• About
  • Write For Us
  • Contact

IndustryDev

Web Design & Photography Blog

  • Design
    • Lightroom
    • Photoshop
    • Bridge
    • Camera Raw
  • Development
    • HTML
    • CSS
    • JavaScript
    • PHP
    • Dev Tools
    • WordPress
  • Photography
  • Blogging
    • SEO
  • Technology
    • Hosting
  • Inspiration
    • Interviews
    • Learning
You are here: Home / Development / Creating & Including WordPress Header & Footer Files

Creating & Including WordPress Header & Footer Files

May 24, 2015

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.


RECEIVE MY POSTS BY EMAIL!

Interested in receiving my posts by email? This is your chance! Simply place your email address in the field below and I'll deliver each and every post I write directly to your inbox.


<!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.

Check Out These Related Posts

  • Understanding the WordPress LoopUnderstanding the WordPress Loop
  • PHP Code Used in WordPressPHP Code Used in WordPress
  • Working With PHP in WordPressWorking With PHP in WordPress
  • Creating WordPress Page TemplatesCreating WordPress Page Templates
  • Setting Up Navigation In WordPressSetting Up Navigation In WordPress
  • WordPress Page & Post TemplatesWordPress Page & Post Templates
  • WordPress Homepage TemplatesWordPress Homepage Templates
  • WordPress Templates – Media, Search & 404 PagesWordPress Templates – Media, Search & 404 Pages
  • The Anatomy of Your WordPress ThemeThe Anatomy of Your WordPress Theme
  • Working With WordPress TemplatesWorking With WordPress Templates
  • Adding CSS and JavaScript to Your WordPress ThemeAdding CSS and JavaScript to Your WordPress Theme
  • Creating Blog Templates in WordPressCreating Blog Templates in WordPress

Filed Under: Development Tagged With: PHP, WordPress

What’s Next? Email Updates!

If you enjoyed reading this post, why not consider signing up to receive others like it by email? It's so easy and you can unsubscribe at any time.

About Jay Gaulard

Hi. My name is Jay Gaulard and I've been designing websites and taking photographs since 2002. My passions lie with learning the latest coding techniques and development tools as well as staying on top of the digital imaging world. When I'm not studying or writing, I'm practicing Brazilian Jiu-Jitsu in Maine, USA.

Leave a Reply Cancel reply

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

Connect With Me

  • Facebook
  • Google+
  • Instagram
  • Pinterest
  • RSS
  • Twitter

RECEIVE MY POSTS BY EMAIL!

Interested in receiving my posts by email? This is your chance! Simply place your email address in the box below and I'll deliver each and every post I write directly to your inbox.

Recent Posts

  • What Does the “Info” Button do on My Canon Rebel DSLR Camera? April 19, 2018
  • Color Range Masking the Graduated & Radial Filters in Adobe Lightroom April 17, 2018
  • Using the Liquify Filter to Change Body Shape in Adobe Photoshop April 14, 2018
  • How To Soften Skin in Adobe Photoshop April 12, 2018
  • How to Change the Background & Accent Colors of Your Windows 10 Interface April 10, 2018

Most Popular Posts

  • How to Set the Photo Quality in your Canon Rebel DSLR Camera How to Set the Photo Quality in your Canon Rebel DSLR Camera
  • Using the Liquify Filter to Change Body Shape in Adobe Photoshop Using the Liquify Filter to Change Body Shape in Adobe Photoshop
  • How To Stop the Flash From Popping Up On Your Canon Rebel DSLR Camera How To Stop the Flash From Popping Up On Your Canon Rebel DSLR Camera
  • How to Export Video From Adobe Photoshop How to Export Video From Adobe Photoshop
  • How to Adjust the Mouse Click & Scroll Settings in Windows 10 How to Adjust the Mouse Click & Scroll Settings in Windows 10

About IndustryDev

IndustryDev is an online publication that focuses primarily on lovers of the digital world. We write articles that cast a wide net, including those that discuss website development, design and WordPress. We also post, daily, about the image related aspects of the web, including photography and illustration, along with other topics like blogging and SEO.

Read More

Copyright © 2018 · IndustryDev.com Web Design & Photography Blog · About · Write For Us · Contact · Privacy / Terms · XML Sitemap · Sitemap