A Beginner’s Guide to WordPress Theme Development: Day 4
- 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.
Today, continuing [wp]’s series, [bg], we’ll be developing a file that handles posts – the single.php file. Download the latest copy of the theme we’ve been developing all week, ‘Champion’ with the link above, unzip it and you should notice a couple of new files have appeared! The two new files we need for today’s instalment are the single.php file and the comments.php file. Let’s first look at the single.php file.
Developing the single.php (post Page) file
Upon opening the single.php file, it should look pretty familiar; the first line is <?php get_header(); ?> which, as we learnt yesterday, tells WordPress find the header.php file and display the contents here. Skip a line and you’ll see:
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
That too should look familiar; it’s the loop! Scroll down further and you’ll see a couple of template tags –
<?php the_title(); ?>
<?php the_content(); ?>
. After that, scroll down to line 35 and you’ll meet a new template tag:
<?php comments_template(); ?>
. Just like get_header, get_sidebar and get_footer, this tells WordPress go and find the comments.php file and display the contents here. You can probably guess where this is going – get the comments.php file open.
Getting to grips with WordPress’ comments
Open it up and… eek! It’s complicated. The comments file is notorious for being the thing that must be done but no-one really likes doing. But that isn’t going to stop us, is it? No. Let’s get going. The first part of the code just checks to see if the comments file has been loaded directly, and if it has an error message gets displayed. Next, it checks to see if the current post is password protected, and if it is then the user is asked to enter a password to see the page. Leave this bit of code alone; it’s important it is kept and, well, what has it ever done to you?
Next is the bit we’re interested in: the comments loop. It starts by checking if comments are open:
<?php if ( have_comments() ) : ?>
And if they are then some text is displayed, showing the number of comments a post has. Skip a couple of lines to line 28 where an ordered list is opened and inside that ordered list is <?php wp_list_comments(); ?>. This is another of WordPress’ template tags, and it spits out all of a post’s comments. There are other ways of displaying comments (that offer more customisation), but that is a post for another day; as I said, it’s quite a complicated subject.
Gloss over the next part (which is pretty self explanatory) to line 49. Here starts the form that you see on most blogs – this is the part where you fill out your name, email, website and comment. There isn’t really much need to customise this or change it in any way, so we won’t. Instead, we’ll go back to the single.php file and finish up with that.
Finishing off with the single posts
Open up the single.php file again and scroll down to line 37, just after where we left off. Here is something that again should look fairly familiar; it’s the loop finishing off and saying if no posts are found then display this:. The
<?php endif(); ?>
closes off the loop and then we get to the familiar looking get_sidebar and get_footer, which we learnt about in the previous installment of the series.
Creating a post page
This tutorial has focused heavily on posts, without a mention of pages. The good news is that pages run identically to posts and so to create a post page, all you have to do is save another copy of your single.php file as page.php. And you’re done. I did say it was simple!
So there we are until next time. To recap today’s events, we’ve created a single.php page that handles posts, created a comments.php page that handles comments and a pages.php file that handles pages. Tomorrow we’ll be wrapping up the tutorial series with a look at the home.php file, functions.php file and archive.php file. Also tomorrow, a PDF of the whole series will be available for download. In the meantime, go and play around with what you’ve learnt today, leave a comment, [s] and tell all your Twitter friends about the series with the link below!