Design

How to Create Multiple Headers & Footers in WordPress

By March 15, 2016 11 Comments

By default, the WordPress header and footer are typically the same on every page of the site. But what happens when you want to create a landing page with a simplified version of both the header and footer? Or when you want to construct a brand new header but don’t want the public to see it until you are done? By using multiple headers and footers we can quickly and easily solve these problems. This post will walk you through the steps for creating multiple headers and footers on your very own WordPress site!

Step One: Duplicate your header.php file and name it header-new.php. You can replace the word new with something that makes sense for your website.

Step Two: Open up the Page.php file associated with the template that you want to use. Then replace the normal header code with the code below. Update the page id number with the correct page number on your site. Change the get_header(‘new’) to match the alias used in step one.

<?php 
if(is_page(10)) {
 get_header('new');
}
else {
 get_header();
}
 wp_head();
?>

Step Three: Make your changes within the header-new.php file, and walah! You have successfully created a second header!

If you’re looking to create a second footer, simply follow the steps above but make your changes to the footer-new.php file instead.

Looking for inspiration?

Landing pages are one of the most common uses for creating multiple header and footer designs. Creating a landing page with a simplified version of both your header and footer allows for better internet marketing and helps place focus on certain elements so that users will complete an action before moving on. Below you’ll find a collection of website and their associated landing page designs.

Electro-matic LED Lighting

Electromatic LED Lighting


Homesite Mortgage

Homesite Mortgage


M&M Automatic Products

M&M Automatic Products


FSBR Law

FSBR Law


Boast

FSBR Law


 

Executive's Guide to Web Development

80 pages of topics and tips to navigate your way to a better website.

Join the discussion 11 Comments

  • Levi Freeman says:

    I have a really silly question but my php skills are next to none. How to I have multiple if statements? SO if(is_page(10)) and if(is_page(13)) and also if(is_page(9)). How do I list them in that code snippet. Do I just put it after the first semicolon?

    Thanks

    • Joey J says:

      Hi there. You can replace

      if(is_page(10)) {

      with

      if(is_page( array( 10, 13, 9 ) ) ) {

      Pls also remove !– immediately before ? at the beginning of the code, and — immediately after ? at the end of the code respectively.

      Hope this helps!

      • Paul Placucci says:

        Another way, add the new header (header-new.php) to the page template

        /*
        Template Name: new page

        */

        get_header(‘new’);

  • Rob Cram says:

    Hi fellas, I want to do something similar where an alternative header.php is being shown on specific posts rather than pages as you’ve demonstrated here. I assume the code used is similar. Any help please with this would be much appreciated thanks.

    • Joey J says:

      Hi Rob, I hope you’ve already found the solution. If not, you can simply replace

      if(is_page(10)) {

      with

      if(is_single( array( X, X, X ) ) ) {

      Pls insert post IDs in place of X, X, X. Hope this helps!

      Edited: Oh, by the way, these codes need to go in “single.php”, not “page.php” for your case.

  • Kayla Campbell says:

    Hello, I tried this and my page picked up both footers. Do you know how to fix this?

  • Paul Smith says:

    I created a new header-homepage.php inside my child theme and placed my slider call inside the file.

    This is the id of my homepage: wp-admin/post.php?post=2&action=edit
    Then I added the

    instead of the get_header(); ?> inside all of my pages (one at a time) to see which one is for the homepage but it isn’t working. I also tried removing the from the code but that didn’t work either.
    I am using a child theme of the shapla theme.

    When I just use the regular header.php file with the slider call the slider shows on all pages and posts so I know the slider call is working. I just want the slider to be shown on the homepage.

    Can someone please help me to figure this out?

  • Paul Smith says:

    I cannot get this to work for me. I have created an exact copy of my header.php file, renamed it header-homepage.php put my slider code after the closing header tag and placed inside my shapla child theme. I then copied an exact page.php also placed it inside my shapla child theme and added the following to it:

    if(is_page(2)) {
    get_header(‘homepage’);
    }
    else {
    get_header();
    }
    wp_head();

    I also tried this:

    if ( is_front_page() ) :
    get_header(‘homepage’);
    else:
    get_header();
    endif;
    wp_head();

    and

    if ( is_front_page() ) :
    get_header(‘homepage’);
    else:
    get_header();
    endif;

    Nothing is working for me. I know that the slider shows if I just use the page.php and header.php files in the parent theme. Also the child theme is working fine in every other regard.

    • Paul Smith says:

      Okay I just tried this with the twentysixteen and twentythirteen child themes and it works on both of them. I’ve contacted the developer of my theme for more assistance. Sorry for jumping the gun with my previous post.

      • Paul Smith says:

        Okay it turns out that I had to use an action hook to change my header.php file with the Shapla theme. Sorry for wasting your time.

  • Ayatollah Ericoh says:

    After creating the new_header.php file and doing what you have described above, Do I copy the exact code from the link above and put in the php file I have created or what?

Leave a Reply