WordPress: Customer Headers For Categories

Martin Brinkmann
Mar 24, 2011
Tutorials
|
11

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.

<?php
include(TEMPLATEPATH.'/header-firefox.php');
?>

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

Previous Post: «
Next Post: «

Comments

  1. Samuel King said on September 7, 2011 at 2:30 pm
    Reply

    I have a question.
    Thanks for the detailed tutorial, after 2 days of searching, I finally found it.
    My question, after creating the new files and done all editing, how do I attribute this to the category?
    eg: I have created the category file for my category photoshop tutorials, how do i make photoshop tutorials cat display this.
    I hope i’ve made sense :S
    Thanks

    1. Martin Brinkmann said on September 7, 2011 at 2:34 pm
      Reply

      You just reference the header in the category file.

  2. Rarst said on March 24, 2011 at 9:15 pm
    Reply

    Actually get_header() is more functional than that. It can load different header templates and merely defaults to generic one.

    See example in Codex http://codex.wordpress.org/Function_Reference/get_header#Multi_headers

    On larger scale I am not entirely sure you even need custom headers. Most of stuff in header is full of hooks and easy to change without messing with template (that is how SEO plugins work).

    1. Martin Brinkmann said on March 24, 2011 at 9:29 pm
      Reply

      I did not find a plugin that would do that. The one that I found worked only half, it modifies the meta tag and descriptions, but not the title.

  3. Joshua Kelley said on March 24, 2011 at 6:40 pm
    Reply

    I should add that I liked the ad at the top of this post when I first visited it: custom race car headers…

  4. Joshua Kelley said on March 24, 2011 at 6:39 pm
    Reply

    While I understand what you are trying to do, it seems there should be a simpler way. Part of me is thinking you could use custom fields, and call them, but that only works on pages and posts, since categories don’t support custom fields.

    Going back to using Category pages, could custom fields be used there?

    I could be completely off-base here, as I’m half-asleep having woken up minutes ago.

    Josh

    1. Martin Brinkmann said on March 24, 2011 at 7:20 pm
      Reply

      Well the main problem that I see is that I end up with lots and lots of custom category and tag files.

Leave a Reply

Check the box to consent to your data being stored in line with the guidelines set out in our privacy policy

We love comments and welcome thoughtful and civilized discussion. Rudeness and personal attacks will not be tolerated. Please stay on-topic.
Please note that your comment may not appear immediately after you post it.