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?

Yay! 🎉 You made it to the end of the article!
Alex Denning
Share:

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

0
Would love your thoughts, please comment.x