Get to know the single post template

- [Narrator] The single post is arguably the core component of WordPress. The single post is what heralded in the Blogger Revolution, and most WordPress sites are built to be able to publish single posts. Now that we have our header sorted out, we can turn our attention to the single post template, and make sure all the content posted on a site is easy to read, easy to navigate, and looks great. In this chapter, we'll work with the main content of the single post, that means the heading, metadata, and post body content. As we start working with single posts, we need to work with real content, and this is where the theme unit test data comes in.

In this chapter, I'll be using three posts to test my content. Hello world, which displays a one sentence post, followed by one comment, markup HTML tags and formatting, which displays all the HTML tags and all the formatting options the user can insert into a WordPress post, and finally, markup image alignments, which show us all the different ways we can display images in a post, both in terms of alignments and with and without image captions. For easy access, I'm going to keep all these three posts open in my browser throughout the chapter, and I suggest you do the same.

Now, let's take a look at the template that powers the single post, and up here in the WordPress tool bar, you can see that is a file called single.php. Single.php is a structural template file. That means it's the one that's called by the WordPress template hierarchy anytime a single post is displayed, and single.php strings together all the different components that make up the full display of a single post. Off the top, the function get header calls the file header.php, then we set up some basic structures. We have a div with id primary and class content area that wraps around a main with id main and class site main.

Inside the main, we run what's know as the WordPress loop, which says, for as long as I have posts, give me the next available post and then do the following to it, get the template part, template parts content, and run that content, then display the post navigation, then, if comments are currently on, display the comments template, then we end the while loop, close the main and the div, and finally call sidebar.php and footer.php. Like I said, this is a structural template, and you'll notice there's no content in this template.

All the content is stored inside a separate file called content.php, which you'll find under template parts. In template parts, you have a series of different files, you have content none, content page, content search, and content php. Content none is used anytime there is no content to display, content page is used when we want to display page content, content search returns search results, and finally, content.php is used both for single posts and for index and archive pages. Inside content.php, we have the post itself, and here off the top, we start the post with an article that wraps around everything, then we have a header, with a class entry header, and inside the header, will display the title of the post, followed by the post metadata.

Now because this template is used both for single posts and for archive pages, we have to run a conditional statement that says, if we are on a single post, then wrap the title in an h1 with a class entry title. But, if we're on an archive page or an index page, wrap the title in an h2 with a class entry title, and give it a link that points to the post itself, so people can actually navigate to the post. Then, we have another conditional that tests to make sure this is a post post type, and if it is, we display the entry meta.

You can see it on the front end here, it currently says posted on then the date, and then by, and then the author name. Then we end the header, set up a new div with the class entry content, and this will be the actual content of the post. Here, we call the function the content, which just spells out the entire content. If we're on an index page or archive page and the more tag is used, continue reading and then the link will appear next to the content. Then, if the post is pagenated, we get some pagenation links at the bottom.

The entry content is closed, and finally, we get a footer with a class entry footer that displays the entry footer content. Entry footer content is currently the words posted in, followed by a list of categories, then tagged, followed by a list of tags, and then, if we're logged in as an author, an edit link. The reason why the main content is broken out into a separate file is pretty obvious. That way, we can use the same file for different purposes throughout the site. As we move forward in the course, we'll actually make a custom template just for single posts, because there are some structural considerations we have to keep in mind, but this structure here, having content.php used both for single posts and for archive pages is pretty common.

The other important thing to note about the structure of these templates is that because we are using all these different template parts and functions, they are very easy to work with. Let's say for example I don't agree with the order of the content in the post. Right now, we have the header, followed by the content, followed by the post footer, and then we have post navigation which gives you links to the previous or next posts, and that happens before the comments. Maybe I don't like that order, maybe I want to move the post navigation down below the comments. All I have to do to make that happen is simply grab the post navigation, which is the call to the function, cut it out, and just paste it in where I want it, save the file, go back, and now we have post, comments, and post navigation at the bottom.

You'll see me doing a lot of this cutting and pasting as we move forward in the course. Now that you have a clear idea how everything fits together, let's start working with the single post template.