WordPress – Customer Headers for Categories

Here’s a neat trick for WordPress users …

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

wordpress custom categories

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.


custom wordpress header

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.

© Martin Brinkmann for gHacks Technology News | Latest Tech News, Software And Tutorials, 2011. | Permalink | Add to del.icio.us, digg, facebook, reddit, twitter
Post tags: , ,

Link to Original Content

Tags: , ,

Comments are closed.