Creating & Including WordPress Header & Footer Files

In most WordPress installs (and websites in general) headers and footers are consistent across many pages. Unless there are special sections that are unique to the majority, visitors will see the same layout, with perhaps some dynamic content, at the top of the page and at the bottom of the page. These layouts are pulled into to the page that’s being viewed by two files – header.php and the footer.php.

Now that we have our index.php page set up, we can go ahead and add some code to pull in, or include, the header and footer files to that page. The code to do this would look like:

// INCLUDE HEADER FILE
<?php get_header(); ?>

    // MAIN CONTENT

// INCLUDE FOOTER FILE
<?php get_footer(); ?>

This is the very beginnings of a template page. As you can see, we have both the header and footer files being included by using two WordPress functions. The first one is the “get_header()” function and the next one is the “get_footer()” function. Remember though, it’s important that the header file be named header.php and the footer file be named footer.php. There are more advanced file names than that available, but we’ll talk about them in a later post. For now, focus on these file names.

header.php

This is where the fun starts. We get to begin building the header.php file out. Below, I’ve displayed some very basic code, including some WordPress functions – just to offer an idea of what might be included in the header file. Of course, there is much more that can go inside this file. I merely wanted to show the bare bones. I’ll go over the WordPress functions below.

<!doctype html>
<html class="no-js" lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title><?php wp_title( '|', true, 'right' ); bloginfo( 'name' ); ?></title>
            <?php wp_head(); ?>
    </head>

<body>
    <header>
        <h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
    </header>

Now, if you’re looking at building WordPress templates, it’s assumed that you have an understanding of HTML, CSS and JavaScript. And since you have an understanding of those things, let’s take a look at what’s above.

At first glance, everything looks like what is normally inside a header file. But since we’re dealing with WordPress and its dynamic nature, we need to use WordPress functions. I suppose you could hard code everything into these files, but if you did that, you’d be missing out on much of the functionality that WordPress offers.

The first function you see above is the wp_title function, along with some parameters. This function displays the titles for all posts and pages on your WordPress site. It looks like this:

<?php wp_title( $sep, $display, $seplocation ); ?>

As you may be able to guess, as the function sits above, WordPress calls the title of the page, uses a pipe as a separator, displays it and displays it to the right of the title. Which makes sense because to the right of this function is the bloginfo function. This function can look like this:

<?php bloginfo( $show ); ?>

Now, I’m not going to go over all the available parameters for this function in this post because there are so many of them. If you’re interested in taking a look at what they are, feel free to check out its WordPress Codex page. I will tell you, though, that the bloginfo function parameter that’s showing above will display the site title as is stored in the WordPress admin settings.

The next function – and one that’s quite important – is the wp_head function. This goes right before the closing head tag in the header.php file and fires the wp_head action. Basically, this function calls the functions that we placed in the functions.php file. Due to its very dynamic nature, it’s somewhat confusing to wrap your head around. Just rest assured that the functions you coded into your functions.php file will act as you want them to. Functions such as the wp_enqueue_style and the wp_enqueue_script. In this case, the CSS that you coded earlier will appear in the head section of your header.

Finally, we have two more cases of the bloginfo function. In these cases, we’re simply pulling in the site URL and the name, as we did earlier.

footer.php

Below, we have some code that might be found in the footer.php file. As you can tell, this code is a bit lighter than the header code, but in many cases, you’ll find much more than this.

    <footer>           
        <p>Copyright <?php echo date('Y'); ?></p>
    </footer>
        <?php wp_footer(); ?>
</body>
</html>

Above, we have some simple HTML, along with a few more functions. The first one we see isn’t unique to WordPress. It’s actually the PHP date function. If you want to see how to code this, check out this page.

The last function we have is the wp_footer function. This is found right before the closing body tag. Much like the wp_head function, this one is very dynamic. It generally calls in JavaScript files and if you fail to include it, your JavaScript will not work as intended. A good example of how this might work is through the use of the wp_enqueue_script function (I talked about this in my previous post). If you take a look at the “$in_footer” parameter of the wp_enqueue_script function, you’ll see that it relies on wp_footer. Things in WordPress go round and round like this, so it’s important to really learn how this type of code works and how many areas need one another to give you what you’re looking for.

If you’re interested in more WordPress posts, check out my WordPress category. I’ll be writing many more in the future that cover all types of topics.

Creating & Including WordPress Header & Footer Files

header.php

footer.php

Check Out These Related Posts

What’s Next? Email Updates!

About Jay Gaulard

Leave a Reply Cancel reply