WordPress: Create and use a second header.php file

Good afternoon friends! Today I want to share a very easy way to incorporate a second header.php file into your WordPress theme.

First, let’s create the second header.php file. Typically, I will just copy and paste the codes of the original header.php file, edit them as I see fit, and then save the new file as my second header.php file.

For this example, I will use just a very simple header. Paste this code into a text editor:

<!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>
<title><?php if ( is_home() ) { ?><? bloginfo('name'); ?>&nbsp;<?php bloginfo('description'); } else { wp_title('&nbsp;'); ?>&nbsp;by&nbsp;<? bloginfo('name'); } ?></title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="shorcut icon" type="image/x-ico" href="<?php bloginfo('template_url'); ?>/favicon.ico" />
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/javascript/imghover.js"> </script>
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<?php wp_head(); ?>
</head>
<body>
<!-- header START -->
<div class="Header">
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<div class="Desc"><?php bloginfo('description'); ?></div>
<!-- header END --><!-- container START --><div class="Container">

Now, save  the file as header-secondheader.php (or whatever you want the second header to be called). Just make sure it is in the format of header-yournewheader.php.

Upload the file to the correct folder on your server – ” …/wp-content/themes/yourthemename“.

Next, open the template page that you want to use the second header for. For this example, let’s say it is index.php.¬† Find this line of code:

<?php get_header(); ?>

And replace it with this:

<?php get_header('secondheader'); ?>

Of course, make sure that the name in the parentheses is the name of your second header.

That should work for you, but as always, let me know if you run into any issues at all.

  • Cheryl

    Hi Libby,

    Thank you for the information. Where do you put the url for the image of the secondheader?

    Thanks

    • Libby Fisher

      Hi Cheryl,

      Well, there are two ways you could put an image in the second header. If you want to use an image for the background of the new header, then I would rename the div called “Header” in the second header.php file (for this example, let’s rename it “Second-header” instead) and then create the styles for “Second-header” in your stylesheet. If you want to use an image for the background of “Second-header,” you would just add the style “background:url(images/yourimage.png);” to “Second-header” in your stylesheet.

      If you are trying to insert an image into the second header, not as the background, then I would open your new header file (in the example in the post above, it is called header-secondheader.php) and simply use this code to insert an image in the header:

      Does that answer your question? Thank you for commenting. Let me know if there is anything else I can help with!

      • Ruth

        Hi Libby,

        So, I was following right along, until I got to the php code where I need to go in and change it on the secondary pages. I cannot find these files to save my life! Looking at the web address, it references a file like this “?page_id=6”
        Here is the URL of the website I am applying this to:
        http://emmakyrke.com

        I have the main header on the homepage a need a slimmer second header on the subsequent pages. Thank you so much for all your help!!!

        • Libby Fisher

          Hi Ruth,

          I think you need to replace this line of code in your page.php file:

          php get_header()

          With this line:

          php get_header('secondheader')

          So just add the word secondheader into the parentheses after get_header, if that makes sense.

          Please let me know if that answers your question or not. Thanks! :)

          • Ruth

            Hi Libby,

            Wow! Thanks for the speedy response!

            When I replace that line of code, will it replace the header on the main page as well?

            I can’t fine the specific php file for just the secondary pages.

            This is driving me crazy! :)

  • Libby Fisher

    Hi,

    The page that controls the home page is typically going to be the index.php file, so it probably won’t affect the home page header.

    If it does however, I would create a new page template called home.php (just copy and paste the codes from page.php or index.php and simply make sure that the home.php file is calling for the header you want on the home page), upload it to the server with FTP, and then apply the home.php template to the page you are using for the home page.

    I hope that makes sense. Please let me know if you get it working or not.

    Thanks!

    ~Libby

  • Ruth

    Libby,

    Shoot! Still not working :(

    I checked to make sure the path to the img is correct, it is, also checked to make sure the CSS was correct.

    I really do appreciate all your help!

    ps: If you prefer, I can e-mail you, so as not to take up all your blogging space.

    • Libby Fisher

      Hi Ruth,

      Sure, if you want to email me, my email address is libby@thelibzter.com. If you’d like, you could also send me the log in info to your WordPress admin panel and I could look at your site’s template files.

      Thanks!

      ~Libby

  • http://nikdesigns.com Nicole

    Hi Libby. Thanks for this tutorial! I am working on a project for school… the teacher gave us a theme and wants us to make changes to it. If you look, you will notice that the “hi there” graphic appears on the top of all the pages.
    I only want that on the home page… I want a smaller version of the logo to appear at the top of all the other pages in the site.

    I created a new div called .logo1 that is basically a copy of the original logo div. I added my logo as a background to the div.

    I then created a neww header.php file that I named header-1.php.

    This is where I am having the trouble. The theme I got pulls the logo files from an admin upload area from the wp dashboard. At least I think that’s what it’s doing. Here is the code from the header.php file:

    <a href="/”><img src="” alt=”” title=””>

    I don’t know how to call my new div…. logo1.

    Can you help?

    Thanks!

    • http://thelibzter.com Libby Fisher

      Hi Nicole,

      Without being able to see the theme files you are working with, it’s hard to answer your question. My assumption is that it might be the best idea to get into the original header file and use an “if…else” function – something like “if this is the home page, show div ‘logo1’, otherwise show div ‘logo2′”. You can learn more about this at http://codex.wordpress.org/Conditional_Tags. Please let me know if you need anything else. If you want me to log in and look at the template files, please just send the login information to libby@thelibzter.com.

      Thanks!

  • http://nikdesigns.com Nicole

    I don’t think my code took… here is a paste.
    http://pastebin.com/WD4ePh05

    The site is http://www.nikdesigns.com

    Thanks!

  • http://www.wp3layouts.com/ WP3Layouts.com

    Great tutorial,
    you can also use the if statement to get the new header for categories and archives .

    example

    if ( is_category() ) :
    get_header( ‘secondheader’ );
    endif;

    as explained at http://www.wp3layouts.com/wp/wordpress-get_header-create-get-second-header-php/