Join Morten Rand-Hendriksen for an in-depth discussion in this video Working with the single post template, part of WordPress: Building Themes from Scratch Using Underscores.
- 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 the site is easy to read, easy to navigate, and looks great. As we start working with a single post, 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 a user can insert into a WordPress post, and finally, Markup: Image Alignment, which shows us all the different ways we can display images in a post, both in terms of alignment, and with and without image captions. For easy access, I'm going to keep all three of these posts open in my browser throughout the chapter, and I suggest you do the same.
Now let's take a look at the single-post template. Based on the WordPress template hierarchy, a single post is always displayed using a file called single.php. And if you look at this file, you can see it has a really straightforward structure. We start with a comment telling us what this file is, followed by the WordPress function get_header, which grabs the file header.php and displays the header at the top. Then we have a div with id "primary", and class "content-area", that contains a main, with a class "site-main", and within this main, we have the post itself.
Within the main, we have a while loop that grabs all the available posts, and then sets the current available posts as the_post. Then, it grabs a template_part, in this case template-parts/content-single, and displays all the content within that file. This is followed by the function the_post_navigation, which gives us navigation to the previous or next post, and finally, if you are able to leave comments on the post, we display either the existing comments and a comment form, or just the comment form. Then, the while loop ends for this post, we close our main and div, and then we use the functions get_sidebar to get sidebar.php, and get_footer to get footer.php.
Looking at this file, you're probably wondering, "But where is the actual post content?" Well, all the post content is contained within this loop file here, template-parts/content-single. If we go to template parts, you'll see here we have template-parts for different types of templates. We have content-none, content-page for page templates, content-search for the search results, content-single for single posts, and also the generic content, which is used for all the index pages. Going into content-single, here, you see the actual post content.
We start with an article, followed by header, that shows the_title, and the entry-meta. The entry-meta in this case is the words Posted on, followed by the date, and the word by, followed by the author name. Then we have a div with a class "entry-content", that displays the_content, then gives us links to additional pages if the content is paginated. We close that div, start up a footer, and then in the footer, display more metadata, in this case the words Posted in, followed by a list of categories, and if there are tags on the post, also a list of tags, and then the edit link.
The reason why the actual post content has been separated out from single.php, is so that you can create other types of template files that use the same content. Let's say, for example, you have a custom page template, and you want to display a different header, a different sidebar, a different footer, or some other different structural content, but still want to use the same post content. In that case, you could create a new single-posttype.php file, and still use the same content single loop. Now that you see how this all fits together, I want to show you how easy it is to work with these files.
Because everything has been split into individual components, it's very easy to either move them around, or reorganize things, or take things out or add things in. Let's say, for example, I don't like the organization of the content here. We start with a post, then we have links to the previous and next post, and then we have comments. But I don't think this makes sense, because the navigation to previous and next posts should actually be at the very bottom, underneath the comments. All I have to do is go into single.php, grab the reference to the_post_navigation and cut it out, then I just have to paste it back in where I want it to appear, in this case directly under the comments, save single.php, reload the page, and now, the_post_navigation is underneath the comments.
As we move through the rest of this chapter, you'll see me doing a lot of that. Simply grabbing an item, and moving it somewhere else, or opening a function, and making a small change for a substantive change on the front end, and that's my philosophy to any kind of theme development. Always do the minimal change necessary for the biggest possible results on the front end.
- Installing WordPress, Underscores, plugins, and NetBeans
- Creating a modular, mobile-first WordPress theme
- Setting up the basic theme
- Building a custom header
- Designing responsive, accessible menus
- Configuring the Single Post Template plugin
- Generating featured images
- Styling the comments area, search results, and widget areas
- Working with static pages
- Adding features to the Customizer
- Customizing the backend
Skill Level Advanced
Q: This course was updated on 05/13/2016. What changed?
A: We updated one tutorial, "Create a home button with the custom-logo feature," to make it compatible with WordPress 4.5.