How to use different headers on different WordPress pages

Loading WordPress different headers on separate pages was something which I needed during my work on many websites created on this beautiful platform. I’m not talking here about showing a different graphic image on separate pages as this can be easily achieved without having to create separate .php files in WordPress theme folder like we will discuss in this tutorial. So this article is useful when you actually need totally different look and functionality on various WordPress pages.

A WordPress site, in most cases, has a homepage which has a different design than the rest of the pages, but, normally, the top part with the logo and main navigation menu it is the same. But what do you do when you want to have a totally different looking WordPress page on your website? Like for example you need a special landing page with an offer which does not need the logo or the top nav menu. Or maybe just a page which needs a different top header (different logo, different menu, generally different header design, load different JS files or CSS files in header.php).

Like for example the below images. In the first one you have a certain header loaded (Header1):

wordpress changed header

Then for a different page on the website you want to show a totally different header (Header2):

wordpress multiple headers

Well, when you look at your theme files ( wp-content/themes/themename ) you have header.php file where is the whole code for the website header used by all WordPress pages. If you want to have multiple headers, in other words if you want to load different header code based on the page which it is viewed, then you will need to take into consideration the WordPress function get_header.

So, if for example you will have a landing page which needs totally different header, then you will need to create a file which it is named: header-landing.php. If you have other special page just create a file called header-special.php. And so on, if you want to have different headers for other pages. And in these files you will add whatever code you want.

Then on page.php (which it is actually the template which controls all the pages) you will need to replace the classic <?php get_header(); ?> with the following code:

<?php if ( is_page('landing-page') ) { ?>
      get_header('landing');
<?php } elseif ( is_page('special-page') ) { ?>
      get_header('special');
<?php } else {?>
      get_header();
<?php } endif; ?>

The above code for WordPress different headers on different pages loads the needed header when a certain page is loaded and when none of these pages is loaded then it shows the normal header.php.

What if you want to show the same header for child pages also?

To be more clear, if you show a different header for a special page inside your WordPress site, using the above code, but you also want to show the same header for all child pages of this special page, then you need to build a simple useful function which we will call is_child:

function is_child($page_id_or_slug) {
   global $post;
if(!is_int($page_id_or_slug)) {
   $page = get_page_by_path($page_id_or_slug);
   $page_id_or_slug = $page->ID;
}
if(is_page() && $post->post_parent == $page_id_or_slug ) {
   return true;
} else {
   return false;
}
}

Then we will have the needed code:

<?php if ( is_page('landing-page') || is_child('landing-page') ) { ?>
      get_header('landing');
<?php } elseif ( is_page('special-page') || is_child('special-page') ) { ?>
      get_header('special');
<?php } else {?>
      get_header();
<?php } endif; ?>

What about different footer for different pages on WordPress?

Based on the above method and using the get_footer function instead of get_header you will have different footer on different pages. Simple and efficient!

Just let me know how all these are working for you.

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *