Skip to content

A Beginner’s Guide to WordPress Theme Development: Day 3

[bg] continues on [wp] today, with the third of five installments. Today, we’re looking at the header, sidebar and footer.

Day 1: Introduction, the fundamentals of WordPress theme development

Day 2: The index.php and style.css files: the most important parts of any theme.

Day 3: The header.php, sidebar.php and footer.php files.

Day 4: The single.php file: the file that handles posts.

Day 5: The archive.php, home.php and functions.php files and a wrap up of all that has gone on.

download-3

Moving directly on from yesterday’s creation of the index.php and style.css files, today we’re going to be creating three additional files: the header, sidebar and footer files. As you might have guessed, these are going to house the header, the sidebar and the footer.

day3

To answer the question, first download the latest copy of our theme and open up the index.php file. First thing that you should notice is that the header has been replaced with a piece of PHP –

<?php get_header(); ?>. 

This is another of WordPress’ template tags, and it’s telling WordPress go into the theme files, find the header.php file and display the contents here. As your theme becomes more and more complicated, this allows you to create a single header and use it throughout your theme. At this point, you’re probably opening up the header.php file. Good idea! Upon opening it, you’ll see it’s the same thing we had starting off our index.php file yesterday. All that has changed is now it has a whole file to itself.

Decipering the header

Before we move on, a couple of important header points. You’ll notice that the header doesn’t display things like your content type, it uses template tags (I did say there were lots!) such as:

<?php bloginfo('html_type'); ?>

When this loads, what is displayed is your HTML type – have a look at the source code yourself – text/html gets shown. Template tags such as this one are used throughout the header to get the stylesheet url, title, pingback url etc etc. The reason for this is because every WordPress installation is different and so by using dynamic template tags, you can cater for all of these different installations at once.

The sidebar

Look back in the index file and you’ll see that the sidebar has gone too, and its place <?php get_sidebar(); ?>. Like the header, this tells WordPress go into the theme files, find the sidebar.php file and display the contents here. There’s not much to decipher here; a couple of new template tags and only one completely new thing: widgets, which we’ll discuss further on Friday as it requires the functions.php file.

The final part of today’s instalment is going to look at the footer. Like the header and sidebar, it has been removed from the index.php file and now resides in the footer.php file. Again, it is referenced with the <?php get_footer(); ?> function. Nothing much new here; again some more new template tags, but other than that it’s much the same as the index.php file’s footer we had yesterday.

Wrapping Up

So there we are. We’ve split up our index.php file into a header, sidebar and footer. Tomorrow we’ll be making use of these new files and creating the single.php file for posts. In the meantime, why not follow me on Twitter, leave a comment and have a nice cup of tea?

Alex Denning

0 Comments
Inline Feedbacks
View all comments

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!

Most Searched Articles

Best JavaScript Libraries and Frameworks: Try These 14 in 2024

In this post, we look at the best JavaScript libraries and frameworks to try out this year. Why? Well, with JavaScript being available in every web browser, this makes it the most accessible programming language of ...

25 Best Free WordPress Themes (Responsive, Mobile-Ready, Beautiful)

If you're looking for only the best free WordPress themes in the market for this year, then you're in the right place. We have more than enough such themes for you right ...

12 Best WordPress Hosting Providers of 2024 Compared and Tested

Looking for the best WordPress hosting that you can actually afford? We did the testing for you. Here are 10+ best hosts on the market ...

Handpicked Articles

How to Make a WordPress Website: Ultimate Guide for All Users – Beginners, Intermediate, Advanced

Many people wonder how to make a WordPress website. They’ve heard about WordPress, its incredible popularity, excellent features and designs, and now they want to join the pack and build a WordPress website of their own. So, where does one get ...

How to Start an Ecommerce Business: Ultimate Guide for 2024

Is this going to be the year you learn how to start an eCommerce business from scratch? You’re certainly in the right place! This guide will give you a roadmap to getting from 0 to a fully functional eCommerce business. ...