How to use different headers on different WordPress pages

Introduction

Loading WordPress different headers on separate pages was something which I needed during my work on many websites. I'm not talking here about showing a different graphic image on separate pages. We will learn in this tutorial how to achieve this without creating separate .php files. This article is useful when you actually need totally different look and functionality on various WordPress pages.

The PHP code to show different headers

A WordPress site, in most cases, has a homepage which has a different design than the rest of the pages. The top part with the logo and main navigation menu it is normally the same. 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 you need 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):

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

In a WordPress theme the code for the website header it is in the file header.php (wp-content/themes/themename). The WordPress function get_header loads different headers code based on the page which it is viewed.

You will need to create a file which it is named header-landing.php for a landing page which needs a totally different header. If you have other special page, just create a file called header-special.php. If you want to have different headers for other pages then just do the same. Just add whatever code you want in these files.

You will need to replace the classic , on page.php, with the following code:

if ( is_page('landing-page') ) :
    get_header('landing');
elseif ( is_page('special-page') ) :
    get_header('special');    
else :
    get_header();
endif;

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

You will need to use the below code in order to show the same header for all child pages of the special page. Create a function first and add it to functions.php file:

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 code we need:

if ( is_page('landing-page') || is_child('landing-page') ) :
    get_header('landing');
elseif ( is_page('special-page') || is_child('special-page')) :
    get_header('special');    
else :
    get_header();
endif;

What about different footer for different pages on WordPress?

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

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