Anatomy of a WordPress Theme Template File

1.2 Anatomy of a WordPress Theme Template File

[SOUND] Hello, and welcome to this Tuts+ coffee break course on the anatomy of a WordPress theme file. In this course, I'm gonna show you exactly how theme files work and what you can expect to see included in them. So that when you start building your own theme files you'll know what code to include. And I'll show you a demo site that's running the 2016 theme, which is currently the default theme, and I'll show you the code in 2016 itself. So here's the home page of our site, and this site you set up to slow blog post on the home page. Now the template file that's displaying this is called index.php, and I'll show you that shortly. But first, let's take a look at the structure of the 2016 theme. So here you can see all the files that are in included in the theme. And the theme folder is contained in the themes directory, which is in the wp-content directory in your WordPress installation. And 2016, as you can see here, has quite a lot of files. Now, your theme doesn't have to have all these files. You can get away with just having two files if you want, and that's index.php and style.css. And if you want to know some more about this, there's a link to our course on the theme template hierarchy in the course notes for this. You'll find the most themes have an index.php file as well as the style sheet. And they also have some template parts, which are the header, sidebar and footer files, and you see those here. Here's our header, sidebar and our footer, and I'll show you very shortly. But let's start with that index.php file, because this is the file that WordPress uses by default if there's nothing more specific according to the template hierarchy. So it's the file that it's using on that home page in our site. So this index file contains a few key things. Firstly, you can see here this get_header function. And what that does is it called the header.php file. And it inserts its contents in this place in the page. So right at the top. And I'll show you that in a moment. It then opens up a div. And in this case, it's a div with the id of primary, with a class of content-area. And then inside that there's a main element with the id of main and another class of site-main. Now that's not compulsory. You don't have to have divs or any other kind of element in a specific place in your site. So what you'll normally find is that there's some kind of element that contains all of main content to the page. So firstly, we've got a conditional tack, if have_posts. And that's checking if there are any posts returned by the main query. So in other words, if we've got any blog posts on the site. And then if that is the case, it then moves on to running the next things. So next up, it's then using another conditional tag to check whether we're on the main blog page but not the front page. What that does is it displays the title of that page if the blog page has been set up to not be the front page of your site. So if you go to static front page and another page for blog posts, the title of that page will be displayed using this single post title function here. But if the blog page is also the front page, that won't apply. Because this conditional tag here is not front page, won't apply, cuz we are on the front page. So if we get back to our front page, you can see that there's no title for the page here. It just goes straight to the title for the first post. Now that's something this specific 2016, but it can be useful to have it in your themes if you want to. And now we move on to the really important part, and this is the loop. So here, you can see the loop is being opened, while have_posts, the_post(). So this keeps looping around while they're are posts. So, while there are posts to display, it will keep outputting a post. It will keep running through each post in turn, and outputting specific content based on what you've defined in your loop. Now at this point, you could either have the code for outputting that content in this index file. Or you could use what's called a template part, and that's what happens here in 2016. So you can see this function here, get_template_part is fetching a file called content inside the template-parts folder with the suffix of the post format. So let's take a look at the file structure that. So here is our template-parts folder, so then you can set up different template parts depending on the post format. But by default, it'll just open this content.php on our main home page. So in this case, it's going to open content.php, and I'll show you that in a moment. But first, let's just finish off going through the index file. So that then uses endwhile to end the loop, that closes this while have posts loop. And then we have navigation to previous or next pages posts. So if your blog has more than ten posts in it, you'll want a link at the bottom that takes people to the next page in the blog. And then finally, there's an else statement. And that relates to this if up here. So if there are posts, it runs through all this. And if they aren't, it'll get another template part called content none, which is in the template-parts directory. So you can see that right here. So all this here, the blog posts, is powered by that section of the index.php file. And then finally, it uses two more template tags, get_sidebar() and get_footer(). And those called the sidebar.php file and the footer.php file. So now let's take a look of those include files, header, footer, sidebar, and those content files as well. So first, let's have a look at the header. Now remember, our index file, and any other template file in our theme, will call this right at the beginning. So this is what opens every single page in our site. And it makes life a lot easier having just one header.php file because you don't have to repeat all of this code in all of the different template files in your theme. So we firstly got the head section, which is a standard part of an HTML page, with various bits of information that are used by the browser but not displayed by it. And then we're opening the body element. And you see, if you scroll down, it's not closed in this file. Because it will be closed in the footer file. And then inside that, there are some other divs. I'm not gonna go into those in detail because that varies depending on the theme. The body is opened in this header.php file. And then there's a header element, which corresponds to the header in the site, which is this area here. And inside that you got site-branding, you've gotta check for whether we're on the front page. And that basically assigns a different element to the site title depending on whether we're on the front page or not, an H1 or P. So what you've got here is a link to the homepage. And then the name of the blog using php bloginfo brackets name. And that displays the name of our blog with a link, as you can see, to the home page. So wherever I am in my site, I can click on that to go back to my home page. And then under my that, we've got this code here which displays the description. If there is a site description, it will output that in a p element. So moving on from that, we still, within our header, this element here. But we're moving on to a site-header-menu. And in the site that's over here, the menu on the right side. So that then outputs a primary menu by checking if there is a nav menu called primary. So here, we're opening a nav element. And inside that this wp_nav_menu function is used to display the menu. And then finally, there's an endif here, and that's the end of the check on whether there's a nav menu called primary. And then underneath that, there's something very similar, checking for another nav menu and that's the social menu. And again, that's something specific to this theme. So if that nav menu has been set up, it will display that underneath the main menu. So we're now closing off some divs here. So we're closing off the site-header-menu, closing that endif to check if the menus are there, and closing the site-header-main. But we haven't close the header element yet, because the next thing to do is check if this an image. And that's because 2016 supports a header image that is displayed in the header of the site. And then finally, we're closing this header element. So that's the header of every page in our site. And then the very last thing in the header is to open a div called content. And that's not part of this header here, but what it does do is it opens a div that is wrapped around both the main element over here, which contains our content and the sidebar as well. And as I'll show you in moment, that is closed in footer.php. Because it's easier to open it once in header and footer than to keep opening it again in every template file in the theme. So that's the header file. So the sidebar is much shorter and more straightforward. And all that does is it checks if the sidebar with the sidebar 1 id is active, which means, have any widget is been added to that sidebar? And if that's the case, it will open that sidebar and display it in an asside element. And then you'll remember after the sidebar call there was a footer call, so here's our footer file. And here's the closing of that site-content div, which was first opened right at the bottom of header. So that's closed at the beginning of the footer, and then underneath that we've got a full-width footer. And then here within 2016, there's a couple of menus again. And that's quite unique to this theme, most themes don't have menus in the footer. But it can be quite useful, because if you've scrolled all the way down a really long blog post, being able to navigate back to other the content when you finished is a good idea. So finally, there's a div with the class of site-info and that displays information about the site. There's an action hook here, called twentysixteen_credits, which you can use to hook extra content to if you want to. And then there's a span for the site title. And then there's the proudly powered by WordPress text. So that's down here at the bottom of the screen. And then finally, we close that site-info div, we close the footer element, we close these two divs, which we're opened in the header in the first place. And then after doing all that, we run this action called wp_footer. And that's an action that you can hook things to, like scripts that need to be loaded after everything else. And then that's the very last thing that happens before the closing body in the closing HTML tags. So if I go back into header, there's an equivalent hook in the header file. So we got wp_footer down here, and then up inside our head that's wp_head() here, which is the very last thing inside the head section of the page. So the next thing is to have a look at one of our template parts, and this is the content that's displayed in the loop. So here, we're opening an article, which has got a header in it, an excerpt, a post thumbnail, the content and then a footer within that, which displays metadata. So that will be output each time the loop runs in our main index file. So here where this get_template_part call is, it will be fetching this file, and using that code to output the contents of a specific post. So that's how our index file works. It calls the header, it displays the main content, it calls the sidebar and then it calls the footer. And let me quickly show you another template file so you can see that they will work in a very similar way. So here, in our archive file, we've got get_header again. We've got some very similar code here for opening elements, slightly different in terms of titles and description. And again, you've got the loop, with this get_template_part call. Navigation to the previous or next page once again. A call to the template part for no content. And then finally, down at the bottom, a call to the sidebar, and the call to the footer. So by using the header, sidebar and footer files on that content template part, you save having to repeat the same code again and again in each of the template files in your theme. And that's how theme template files are structured. I hope you found this course useful. Thanks for watching.