How to use different header for categories and pages in WordPress

wordpress tips tricks

Don’t you come across situations like you need to implement multiple header types for different categories? I’m sure you do. Here is a simple yet effective solution to work out the issue to implement multiple header types for different categories. For more conditional tags you can look up to WordPress codex.

Advertisement

First of all create the header files for each categories. Also have one header file as the default one. These files will be included from the main header.php file. Consider the code below for the your WordPress theme header.php file.



/**** Conditional Header for Per Category Example WordPress ****/

// make sure we are in category listing
if (is_category()){

if (is_category('1')){

}
elseif (is_category('2')){

}
else {
// this is the deafult header

}
}
?>

Example of using Category Names and Slugs

// Alternative for using Category ID, You can use Category Name or Slug
if (is_category()){

Advertisement

// example of using a category name
if (is_category('Category 1')){

}
// example of using category slug
elseif (is_category('category-1')){

}
else {
// this is the deafult header

}
}
?>

Alternatively you might want different headers for different pages, so I’ve included that example too.


//
// example of using header file based on pages
// note that you can either use page ID, Page Name or Page Slug
//

// this one uses page title
if (is_page('About')){

}
// this one uses page slug
elseif (is_page('subscribe')){

}
// this one uses page ID
elseif (is_page('6')){

}
else {

}
?>

Reminder: You need to use these codes inside your themes header.php file to load specific header elements based on condition.

  • LEO

    I would like do the same but with Custom Content Type that I created with Custom Content Type UI

  • Drewdclifton

    Hi thanks for writing this. I know it’s getting old but I have two questions that I can’t seem to answer for myself.

    1. Do I leave the word “TEMPLATEPATH.” as is, or is that meant to be where I put a path?

    2. How would I do this to have a custom header on the home page only (my home page is my posts page).

    Thanks!

  • http://www.facebook.com/people/Nursakti-Adhi-Pratomoatmojo/1008915926 Nursakti Adhi Pratomoatmojo

    Thank for this excelent post. But there are few bugs about the lines. Here the final tested of mine.

    In the header.php, replace all codes with this simple lines (below). please make the backup as newheader.php and don’t forget to prepare your modified header file e.g. category.php

    Hope it works for you guys.

  • http://www.klamtech.com أخبار تقنية

    ohh i have a question, does the header of specific category appear when i visit a post in this cat?

  • http://www.klamtech.com أخبار تقنية

    great solution bro, i was hardly looking for it

  • Allampatu

    and if it’s a child page?

  • Chris

    I’m very close. The code below is where I am, and what’s confusing is:
    “About Us” header doesn’t work. It goes to the default header (header-home).
    “Our Approach” header doesn’t work. It goes to the default header (header-home).
    “Portfolio” header DOES work. It goes to the portfolio header.
    All other pages go to the default header as they should (header-home).

    Please…. I feel like I’m so close, and I really need to get this done. Any help would be highly appreciated.

    Here’s the site if it would help.

    http://bluegrassphotography.net/testwordpress/

  • Jayharle

    Awesome, clear and concise. Thanks!

  • Taichoup

    Great script, thanks! It made my life a lot easier. There is one thing I don’t understand though : any chance you know how I can get single post pages to have the same header as the parent category?

  • Seb Syd

    Thanks HarmoniePonder for the correct code, took some searching,

  • http://forexhug.com forexhug

    good coding please explain more

  • Andrew C.B.

    Hi there,

    Mine is not working. It simply take the last one else {

    include(TEMPLATEPATH.'/header4.php');

    }

  • Hponder

    You're welcome Kevin :)

    Yes, thanks Ruhani, you got us to the answer.

  • http://www.anythinggraphic.net Kevin

    I understood your version better :-) Thanks!

    Also, thanks for the tip Ruhani.

  • http://www.ningbohotelreview.com Ningbo Hotels

    Sorry I meant:

    include(TEMPLATEPATH.'/headercontact.php');

  • http://www.ningbohotelreview.com Ningbo Hotels

    I had the same problem (I use WP 2.9.2) and got a blank page with whatever code I used until I removed the embeded “<?php” tags.

    So guys if you get a blank page instead of your usual index page, remove the php tags from beginning and end line.
    Here is an example of code:
    “<include(TEMPLATEPATH.'/headercontact.php');”

    It will then works perfect.
    Good luck guys! :-)

    Roger

  • http://twitter.com/HarmoniePonder HarmoniePonder

    This might help everyone:

    <?php

    if (is_page(Home)) {

    include(TEMPLATEPATH.'/header2.php');

    } elseif (is_page(Menu)) {

    include(TEMPLATEPATH.'/header3.php');

    } else {

    include(TEMPLATEPATH.'/header4.php');
    }
    ?>

    Taken from this page:
    http://codex.wordpress.org/Conditional_Tags

    • Nleiter

      Thank you! Your post worked for me. I was getting syntax errors with the snippets above.

    • tomsawyerv

      Thank you so much! I kept finding the snippets above and getting syntax errors! This worked great!

  • hahah

    Thanks dear this is a perfect way of to change header. I had used same thing in my site its working well without any issue or error.
    thanks

  • finnchops

    Hi, it is perfect but just can not get it to work, please can you post some working files at all? thanks

  • http://www.GroundedGroup.com/ JHouse

    That would be cool if you provided example code that we could just drop right into our header, or at least some more/clear instructions.

  • ashworth102680

    Nice. I assume this works for footer as well? Will it work to repeat inside any theme file? Badass…

  • ashworth102680

    Nice. I assume this works for footer as well? Will it work to repeat inside any theme file? Badass…

  • http://www.dlocc.com/ Devin Walker

    Thanks,

    I will be using this on my blog, which is very much on a related topic as yours. Good, well explained code.

    -Devin
    dlocc.com

  • http://www.velaction.com/ Jeff Hajek

    Thanks for the info. I did a quick workaround and just used a slice of your code for my index.php to make my blog header different, but I will eventually be using the rest of this code.

    One question–what is the convention for spaces in page and category names? All the examples are single words. (i.e. 'Gotta Go Lean Blog' vs. 'Home')

  • james

    It does not work? I really need to do this but no matter if you put it on the first line of your header.php or further in it just don't work, just a blank page, can you please supply a working example somewhere?

  • calvinaj

    Where exactly we should place this code in the 'header'. I keep getting syntax error. This excerpt of my header.php.

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
    <html xmlns=”http://www.w3.org/1999/xhtml”>
    <head profile=”http://gmpg.org/xfn/11″>
    <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />

    <link rel=”pingback” href=”<?php bloginfo('pingback_url'); ?>” />
    <?php wp_get_archives('type=monthly&format=link'); ?>

    <script type=”text/javascript” src=”<?php bloginfo('template_url'); ?>/script/jquery.idTabs.min.js”></script>

    <?php
    /**** Conditional Header for Per Category Example WordPress ****/
    // make sure we are in category listing
    if (is_category()){
    if (is_category('highlights')){
    <?php include(TEMPLATEPATH.'/header-highlights.php'); ?>
    }
    elseif (is_category('business')){
    <?php include(TEMPLATEPATH.'/header-biz.php'); ?>
    }
    else {
    // this is the deafult header
    <?php include(TEMPLATEPATH.'/header.php'); ?>
    }
    }
    ?>

    <style type=”text/css” media=”screen”>
    <!– @import url( <?php bloginfo('stylesheet_url'); ?> ); –>
    </style>

    </head>

    <body>

    <div id=”wrap”>

    <div id=”topnavbar”>

    <div class=”topnavbarleft”>

      <?php wpads('header'); ?>

    </div>

    <div class=”topnavbarright”>

    <?php include(“Advert/advertisement.php”); ?>

    </div>

    </div>

    <div id=”header”>

  • calvinaj

    Wow this is exact the code I'm looking for. Will try to work figure it out how to make header-cat.php works.

    Wish you had shown – sample of the code – working samples. Anyway thank for sharing.

  • vanya

    Could you give an example for the: header-cat1.php etc. I suppose I need something different than the default header, but I have no clue what to put there (sorry!)
    When I add some of your php examples to my header.php and create my own header-cat1.php with the meta data for each category, I always get an error!
    Thanks!

  • http://www.ruhanirabin.com Ruhani Rabin

    These codes/files should be reside inside your themes folder :)

    easy way to do it is to make copy of your header files.. such as header1.php
    header2.php and load header according the main header.php which is just
    pointing directions to load it.

  • geedee99

    Hi,

    did a search for changing headers per category and found your blog.

    Where does the code go?

    Does it replace or append the header.php file?

    And does it go in all category header files?

  • http://www.JuedMDesigns.com/ Jued Martinez

    That's a really nice snippet of stuff there!
    I Like It!

    I'll Try It!

  • Deez

    This is not working. What am I doing wrong? Here is my code:

    <?php
    /**
    * @package WordPress
    * @subpackage Default_Theme
    */
    ?>
    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
    <html xmlns=”http://www.w3.org/1999/xhtml” <?php language_attributes(); ?>>

    <head profile=”http://gmpg.org/xfn/11″>
    <meta http-equiv=”Content-Type” content=”<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>” />

    <title><?php wp_title('«', true, 'right'); ?> <?php bloginfo('Andie Cumber'); ?></title>

    <link rel=”stylesheet” href=”<?php bloginfo('stylesheet_url'); ?>” type=”text/css” media=”screen” />
    <link rel=”alternate” type=”application/rss+xml” title=”<?php bloginfo('name'); ?> RSS Feed” href=”<?php bloginfo('rss2_url'); ?>” />
    <link rel=”alternate” type=”application/atom+xml” title=”<?php bloginfo('name'); ?> Atom Feed” href=”<?php bloginfo('atom_url'); ?>” />
    <link rel=”pingback” href=”<?php bloginfo('pingback_url'); ?>” />

    <style type=”text/css” media=”screen”>

    <?php
    // Checks to see whether it needs a sidebar or not
    if ( !empty($withcomments) && !is_single() ) {
    ?>
    #page { background: url(“<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbg-<?php bloginfo('text_direction'); ?>.jpg”) repeat-y top; border: none; }
    <?php } else { // No sidebar ?>
    #page { background: url(“<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbgwide.jpg”) repeat-y top; border: none; }
    <?php } ?>

    </style>

    <?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>

    <?php wp_head(); ?>
    </head>
    <body>
    <div id=”page”>
    <div id=”header” onclick=”location.href='http://andiecumber.com/&#39;;” style=”cursor: pointer;”>
    <?php
    // if pages then show this
    if (is_page('Beauty Hot Spot')){
    <?php include(http://www.andiecumber.com.'/Beauty Hot Spot.php'); ?>
    }
    //else other places show this
    }
    else {
    <?php include(http://www.andiecumber.com.'/header.php&#39;); ?>
    }
    ?>

    </div>
    <div id=”navmenu”>
    <ul>
    <li><a href=”<?php echo get_settings('home'); ?>”>HOME</li>
    <li>ABOUT</li>
    <li>SERVICES</li>
    <li>PORTFOLIO</li>
    <li>BEAUTY HOT SPOT</li>
    <li>RESOURCES</li>
    <li>CONTACT</li>
    </ul>
    </div>


  • Deez

    This is not working. What am I doing wrong? Here is my code:

    <?php
    /**
    * @package WordPress
    * @subpackage Default_Theme
    */
    ?>
    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
    <html xmlns=”http://www.w3.org/1999/xhtml” <?php language_attributes(); ?>>

    <head profile=”http://gmpg.org/xfn/11″>
    <meta http-equiv=”Content-Type” content=”<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>” />

    <title><?php wp_title('«', true, 'right'); ?> <?php bloginfo('Andie Cumber'); ?></title>

    <link rel=”stylesheet” href=”<?php bloginfo('stylesheet_url'); ?>” type=”text/css” media=”screen” />
    <link rel=”alternate” type=”application/rss+xml” title=”<?php bloginfo('name'); ?> RSS Feed” href=”<?php bloginfo('rss2_url'); ?>” />
    <link rel=”alternate” type=”application/atom+xml” title=”<?php bloginfo('name'); ?> Atom Feed” href=”<?php bloginfo('atom_url'); ?>” />
    <link rel=”pingback” href=”<?php bloginfo('pingback_url'); ?>” />

    <style type=”text/css” media=”screen”>

    <?php
    // Checks to see whether it needs a sidebar or not
    if ( !empty($withcomments) && !is_single() ) {
    ?>
    #page { background: url(“<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbg-<?php bloginfo('text_direction'); ?>.jpg”) repeat-y top; border: none; }
    <?php } else { // No sidebar ?>
    #page { background: url(“<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbgwide.jpg”) repeat-y top; border: none; }
    <?php } ?>

    </style>

    <?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>

    <?php wp_head(); ?>
    </head>
    <body>
    <div id=”page”>
    <div id=”header” onclick=”location.href='http://andiecumber.com/&#39;;” style=”cursor: pointer;”>
    <?php
    // if pages then show this
    if (is_page('Beauty Hot Spot')){
    <?php include(http://www.andiecumber.com.'/Beauty Hot Spot.php'); ?>
    }
    //else other places show this
    }
    else {
    <?php include(http://www.andiecumber.com.'/header.php&#39;); ?>
    }
    ?>

    </div>
    <div id=”navmenu”>
    <ul>
    <li><a href=”<?php echo get_settings('home'); ?>”>HOME</li>
    <li>ABOUT</li>
    <li>SERVICES</li>
    <li>PORTFOLIO</li>
    <li>BEAUTY HOT SPOT</li>
    <li>RESOURCES</li>
    <li>CONTACT</li>
    </ul>
    </div>


  • Emily

    Hello, thanks so much for sharing this. I believe it is exactly what I want to do… but I am unsure as to where to place it within the header.php file. Can you tell me?

    Thanks in advance!

    • http://www.eggdesign.ie/ Egg Web Design

      Cool, just what I needed. Thanks

  • http://www.ruhanirabin.com Ruhani Rabin

    just put inside your themes folder :) where the other files are .. such as header.php page.php … etc.. oh it should be inside the active theme folder..

  • Daniel

    I am a newbie.

    may I know where to place the header-cat1.php, header-cat2.php, files?

  • Kitty

    I came across your page with this problem and you totally solved it for me. Thanks!!!

  • http://www.photomarcbailey.com/blog/ Christiane

    It works perfectly fine if you do not nest the php code.

    But something strange happens : wordpress loads my page twice.

    Any Ideas ?

    http://www.photomarcbailey.com/blog/

  • Veronica

    sweet, thanks!

  • http://www.ruhanirabin.com Ruhani Rabin

    Hi Veronica, it will be pretty much simpler .. here is a picture .. take a look at it to know how to do it..

    http://twitpic.com/1p7qh/full

    as you said 1 banner for the pages and another for the rest of the areas

    • Anonymous

      You rock! This was the only code I could find that would do what I needed-and you actually made it work. I love pics!

      Thanks :o)

    • http://softduit.com brettbum

      Yeah, I agree that twitpic was perfect :)

  • Veronica

    Hi,

    I'm not too skilled with PHP and WordPress, just started learning and playing with it. Is there a way to use one header for my blog, while using another header for the pages? Your tutorial explains how to do different headers for different pages, but I'm looking for something more general.

    Thanks in advance,
    Veronica

  • http://www.pacamat.com Dee Yan

    Thanks Dave, i’ll try it

  • http://www.pacamat.com Dee Yan

    Thanks Dave, i’ll try it

  • http://deprec4ted.net dave

    Sorry,
    I can’t embed PHP code into a comment.
    I’ll add some spaces to the php tag:

    Try to use instead of this:

    This one:
    include(TEMPLATEPATH.’/header-contact.php’);

    All you have to do is avoid to put a <?php inside another <?php tag. It worked for me.

    Good luck!

  • http://deprec4ted.net dave

    Sorry,
    I can’t embed PHP code into a comment.
    I’ll add some spaces to the php tag:

    Try to use instead of this:

    This one:
    include(TEMPLATEPATH.’/header-contact.php’);

    All you have to do is avoid to put a <?php inside another <?php tag. It worked for me.

    Good luck!

  • http://deprec4ted.net dave

    Hi Dee Yan,

    Try to use instead of this:

    This one:
    include(TEMPLATEPATH.’/header-contact.php’);

    All you have to do is avoid to put a <?php inside another <?php tag. It worked for me.

    Good luck!

  • http://deprec4ted.net dave

    Hi Dee Yan,

    Try to use instead of this:

    This one:
    include(TEMPLATEPATH.’/header-contact.php’);

    All you have to do is avoid to put a <?php inside another <?php tag. It worked for me.

    Good luck!

  • http://www.pacamat.com Dee Yan

    Hi Ruhani, i have the same problem with dave, after i put the script inside my header, i got white empty page. and i try to find <? php tags, but it seems ok.
    could you help me out, thanks before.

  • http://www.pacamat.com Dee Yan

    Hi Ruhani, i have the same problem with dave, after i put the script inside my header, i got white empty page. and i try to find <? php tags, but it seems ok.
    could you help me out, thanks before.

  • http://deprec4ted.net dave

    Hi, it’s me again.

    It seems that WP doesn’t like nested < ? php tags. Stripping the nested ones and leaving the main one finally works.

    Thanks for the article!

  • http://deprec4ted.net dave

    Hi, it’s me again.

    It seems that WP doesn’t like nested < ? php tags. Stripping the nested ones and leaving the main one finally works.

    Thanks for the article!

  • http://deprec4ted.net dave

    Hi Ruhani,

    I’m trying to use this example but I can’t make it work. All I get is a white empty page.

    I’m using your example to get different headers for different categories.

    Probably I’m not inserting the code in the right place (inside header.php) or there is something missing.. could you please help me with that??

    Thanks in advance!

  • http://deprec4ted.net dave

    Hi Ruhani,

    I’m trying to use this example but I can’t make it work. All I get is a white empty page.

    I’m using your example to get different headers for different categories.

    Probably I’m not inserting the code in the right place (inside header.php) or there is something missing.. could you please help me with that??

    Thanks in advance!

    • quaker

      why not simple put this code before the opening title bracket in the header.php

      • Brav0hc

        Hello, ok how this header-sec.php should look like?