I'm currently working a bit on the technical backend of this WordPress blog. You may know that I have started to create custom category pages for each blog category (like Windows, Firefox or Google) here at Ghacks which allowed me to add custom contents to each. I have added a custom heading and a short description on each category page, which looks a lot better than the default plain listing of articles that have been posted in that category.
What I could not figure out at first was how to use custom headers for each category. Headers in WordPress contain all the HTML head information, like meta tags and the page's title, and often the site's logo and main navigation.
Before I go into details I'd like to explain how to create custom category pages. This works similar to creating custom tag pages. You basically copy and rename the standard category.php file of WordPress, and name it category-name.php where name is the name of the category. A custom template for the Firefox category here at Ghacks would have the name category-firefox.php, one for the Operating Systems category category-operating-systems.php
You can then edit the code of each category page individually, for instance by adding category specific information or images to the category listing.
A big problem, from a search engine optimization perspective, is that it is not possible to define custom head information for each custom category page. Why is that a problem? Because you cannot define meta tags and description or the page title in WordPress. Sure, you can modify the category name to a suitable one to get the page title you want, but this one shows up everywhere on your blog where you reference the category, not only as the title (for instance in the category listing in the sidebar).
This was not an option after all. After some dabbling and searching I came up with the perfect solution to use custom headers for the categories here at Ghacks. It again means that you have to copy and rename files but the solution works nicely and has been tested extensively.
Copy the WordPress header.php file and rename it. You are free to name it anyway you want, I suggest to name it header-categoryname.php for easier identification.
You should now have two header files in the WordPress theme folder, in my case they are named header.php and header-firefox.php.
Modify header-firefox.php as you see fit, you can for instance add meta descriptions, modify the page title or add a custom header image to it.
All that's left now is to link that custom header to the custom category file. Open the custom category file, in my case it is category-firefox.php.
You should see <?php get_header(); ?> at the very top. This command tells WordPress that it should load the default header. We now replace that command to make WordPress load the custom header file instead.
You need to modify the header-firefox.php part with the name of your category page, but that's the only change.
This command tells WordPress to load the custom header if that category page is opened by a visitor of the website. And that's basically it. Now you need to repeat the process for all remaining categories that you would like to add a custom header to.
The very same principle works for tags and pages as well.Advertisement
Advertising revenue is falling fast across the Internet, and independently-run sites like Ghacks are hit hardest by it. The advertising model in its current form is coming to an end, and we have to find other ways to continue operating this site.
We are committed to keeping our content free and independent, which means no paywalls, no sponsored posts, no annoying ad formats or subscription fees.
If you like our content, and would like to help, please consider making a contribution:
Ghacks is a technology news blog that was founded in 2005 by Martin Brinkmann. It has since then become one of the most popular tech news sites on the Internet with five authors and regular contributions from freelance writers.