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

• 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. You will also be able to download the whole series as an eBook.

After the excitement of learning about template files yesterday, it’s time to move and look at the most important files of all WordPress themes: the index.php and style.css files.

First off, the style.css. This is our stylesheet. As I said yesterday, this isn’t a design series, so I’m not going to dwell on it too much, but there are some important parts of a stylesheet which WordPress needs that tell it some info about the theme. The theme we’ll be creating this week is called Champion (download above). It’s based on the Default WordPress theme for ease of use. Download the theme and unzip it. Open up the style.css file and you’ll see something like this:

/*
Theme Name: Chamption Theme URI: https://wpshout.com
Description: description
Author: Alex Denning
Author URI: https://wpshout.com
Version: 1.0
*/

And that’s all you need to make a stylesheet WordPress-ified. Moving on, the index.php file:

WordPress has something called a file hierarchy which means it will look for a file specific to the page first, but if it can’t find it then it will use the index.php file. For example, posts have a hierarchy like so:

For posts, first, WordPress will look for the single.php file, but if it isn’t found then it will use the index.php to display the post. WPCandy explains this really well with a great image, but an example of our own:

For author archives, first WordPress will look for the author.php file, then the archive.php file and if it can’t find that it’ll use the index.php file to display the author archive. It’s the same with all types of post, page or archive; they all revert to the index.php. This is why it is the most important file of them all.

So let’s get started. Open up the theme files again and open the index.php file. We don’t need any other files because as I’ve just pointed out, all types of page revert back to the index.php file so to prove the point, today it is the only file we’re going to use. As the week goes on we’ll be adding more files back in, don’t worry! Open up the index.php file and look for line 49, which starts with:

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

This is the WordPress Loop, and the most important part of any WordPress theme. Today is exciting; we’re using the most important template file and the most important part of any template file!

The Loop and Template Tags Explained

So what is this Loop? It’s the thing that goes and fetches posts. With the loop started, look at the next couple of lines, ignoring the opening <div>s. They read:

<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>

<?php the_content(); ?>

These are your very first template tags. Template tags are pieces of PHP (which always start and end <?php and ?>)  which tell WordPress for the current post, get this piece of information. For example, the first template tag used here, the_permalink, tells WordPress for the current post, get the post permalink. Used inside an anchor and you’ve got yourself a link to current post. The next template tag, the_title, as you might have guessed, outputs the title of the post. Add that all together, inside an H2 tag and you’ve got yourself a title which when clicks goes to the post’s post page.

The final template tag above is the_content. This is tells WordPress for the current post, go and find the contents of it and display it.

The next part of the file reads (again, ignoring the divs):

<?php endwhile; ?>

<php next_posts_link('' Older Entries') ?>

<?php previous_posts_link('Newer Entries &raquo;') ?>

<?php else : ?>

<h2>Not Found</h2>

<p>Sorry, but you are looking for something that isn't here.</p>

<?php endif; ?

The first part, endwhile tells WordPress when you’ve finished displaying all the posts, display this:. What is displayed are links to older and newer entries using the template tags next_posts_link and previous_posts_link.

The next part, else tells WordPress if you can’t find any posts, display this:. You’ll see that if no posts are found then a ‘Not Found’ displays. Finally, endif finishes the loop.

So there we have it; the most important part of any WordPress theme; the loop. What we’ve also done is get introduced to template tags. There are quite a few to get yourself familiar with, and you can find them listed on the WordPress Codex.

With the deciphering done, load up the theme to your WordPress install and activate it. You’ll see that despite only having a stylesheet and a single index.php file, the theme loads fine. Click on a post and you’ll see that gets displayed too. Pages, post archives, category archives and any page you like work fine too. Going back to what I said earlier – all template file hierarchies fall back on the index.php file – this proves it.

This also arises the question – “if I can do all this with a single file, why have more template files?” The answer is customisation. A change to the index.php file will be reflected throughout the entire site, so if you just want to change post pages then you wouldn’t be (easily, see à) able to do this, which is why we have different template files (the pedantic might point out you could get round this with if statements, which is true, but it wouldn’t be particularly practical at the end of the day).

In the next instalment of the week, we’ll be splitting up our single index.php file into three more files: header, sidebar and footer. Subscribe to the feed to make sure you catch the post, leave a comment with any questions arising from today’s instalment and see you tomorrow!