Categories
24 Days of WordPress Tutorials

Day 16: Using custom headers, sidebars and footers

On this 16th Day of WordPress I bring you something more akin to a useage example than a tutorial. It concers the inbuilt ability in WordPress to handle multiple versions of the header.php, sidebar.php and footer.php files for customization purposes. The process of building and calling these files is a snap, so rather than wasting your time just giving you the codes I’m going to give you some ideas on how you can use them for better customization.

A semantic approach to the php include

When you work with WordPress themes you encounter custom WordPress funcitons all the time. Three functions you are likely to see on almost every template page are:


<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

These functions inject the contents of header.php, sidebar.php and footer.php respectively directly into the template file as if they were part of the original file.

The get_ functions are actually custom variants of the generic include function found in PHP. You could rewrite them as


<?php include('header.php'); ?>
<?php include('sidebar.php'); ?>
<?php include('footer.php'); ?>

and get the exact same results.

So why use the get_ functins at all then if the include function does the same thing? The answer is twofold: First off the get_ functions are semantically more readable. While the include function needs a proper URL to work (you can use it to call any file using relative, root-relative or absolute links) the get_ functions require no further expansions or variables unless you want to go the custom route. That brings us to the second reason which is that the get_ functions are not limited to just the core files. Let me explain.

Custom get_ calls for custom files

A little known ability of the get_ functions is that you can use them to call custom header, sidebar and footer files. It’s a simple two-step process. I’ll use header.php as an example:

  1. Create a new file called header-custom.php
  2. In the template file from which you want to call the new custom header file add ‘custom’ as a variable to the regular get_header() function like below

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

Now WordPress will use header-custom.php instead of header.php. The exact same method goes for sidebar.php and footer.php as well.

Why do this? Because the possibilities are endless!

Now that you know how to call custom header, sidebar and footer templates let me give you some ideas on how to use them, starting with the header.

The header.php file usually contains all the head information of your pages including things like stylesheet calls, feed links and core JavaScript libraries. But what if you had a custom page template, a certain category or even a post type on which you wanted to use an alternate stylesheet? Of course you could write in a conditional script to pick stylesheets depending on what page or post is being opened, but an easier route would be to simply create an alternate header file with an alternate stylesheet link that was called by that particular template. Another common scenario would be when certain sections of the site require a custom menu. Or let’s say you want to offer up additional features to visitors who are logged in. Again the custom header file would be of great help.

What of the sidebar then? I actually use custom sidebars in my sites all the time because they provide almost limitless flexibility. By having mutliple sidebar files with different configurations I can provide my clients with multiple page, category and even post templates that display one, two or three sidebars with varying widgetized areas. By creating widgetized areas that are only featured in certain sidebar files you can offer the site owner further flexibility when it comes to what info is displayed where on the site. Want a custom menu to appear in the sidebar on a certain page only? Create a custom page template and call a custom sidebar file. Simple as that.

That just leaves the footer. For most sites, the footer is just a repository for copyright information, closing divs and maybe a menu. But with some ingenuity you can take things a lot farther. For example you can offer up a custom footer file for the front page that also contains widgetized areas displaying menus, latest posts,
latest comments or other material. Or you can provide a custom footer for category pages that provide related post info.

You can do whatever you want here. I wasn’t joking when I said the possibilities are endless. A firm grasp on how to use and abuse the get_ function will be a welcome addition to your coding toolkit.

This tutorial is part of the 24 Days of WordPress series. If you want to learn more about WordPress and Expression Web check out the Sams Teach Yourself Microsoft Expression Web in 24 Hours series (version 2, 3 and 4), Lynda.com’s WordPress 3.0 Essential Training course and Microsoft Expression Web 4 LiveLessons.

By Morten Rand-Hendriksen

Morten Rand-Hendriksen is a staff author at LinkedIn Learning and lynda.com specializing in WordPress and web design and development and an instructor at Emily Carr University of Art and Design. He is a popular speaker and educator on all things design, web standards and open source. As the owner and Web Head at Pink & Yellow Media, a boutique style digital media company in Burnaby, BC, Canada, he has created WordPress-based web solutions for multi-national companies, political parties, banks, and small businesses and bloggers alike. He also contributes to the local WordPress community by organizing Meetups and WordCamps.

4 replies on “Day 16: Using custom headers, sidebars and footers”

The better way to do it is to register sidebars in functions.php and then include this in your index.php or page.php. This will provide you with individually widgetized pages with creating needing additional sidebar files like sidebar2.php, sidebar3.php, etc. A simple conditional statement determines on which pages your new sidebar is placed.

Thank you so much for your tutorial. I just spent nearly an entire day trying to get an alternative footer on my shopping cart and checkout pages in WP as my amazon code in the footer was giving me a mixed content issue with my SSL. I just happened upon your tutorial almost when I was going to give up. Thanks so much for posting it. The only thing though is I am getting this error since I changed over to the alternative footer. It is the same footer as my entire site minus the amazon code. The other pages don’t give this error, just the ones with the alternate footer.
jquery.flexslider-min.js:38
Uncaught TypeError: Cannot read property ‘pause’ of undefined
I am so unfamiliar with with javascript. I am figuring it is something on line 38. Do you have any idea of what this could be?

Comments are closed.