Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:2Length:9 minutes
  • Overview
  • Transcript

1.2 WordPress Coding Basics: Template Parts

In this lesson, I’ll teach you how to use template parts in a WordPress theme. I’ll explain how they work, and I’ll create some practical examples. Then, I’ll show you how to call them from your theme template files using template tags such as get_header() and get_template_part().

Related Links

1.WordPress Coding Basics: Template Parts
2 lessons, 08:34

Free Lesson

WordPress Coding Basics: Template Parts

1.2 WordPress Coding Basics: Template Parts

[SOUND] Hello, and welcome to this Tuts+ Coffee Break Course on using template parts in your WordPress theme. In this course, I'm going to show you how to separate out parts of your code into different files and turn them into template parts. And then how to use template tags, provided by WordPress, to call those in your theme template files and output the code from them. So this is my demo site that I'm using that you might recognize from some of my other Coffee Break Courses. And here's my theme. So you can see here that it has a number of template files. There's a single file, a search file, a page file, an index file, and author file, an archive file, and a 404 file. And I'm gonna be working with the single file here, to show you how a template file can be used. But before I do that, let me show you the most basic and common template part, which you might not even think of as a template part. And that's the header, sidebar, and footer files. And they are templates part just like any other. So in my header file, I've got everything I need to open up my page. I've got my head section up here, the opening body tag, and the header, and the navigation in my site. But how do I actually call that when WordPress opens a page? Let's have a look at our home page. When WordPress opens this page, it uses the template hierarchy to discover which file it should use to display the content. And in this case, it'll be using index.php. And here's my index file. Now right at the beginning of that it has this get_header function here. And what that does is fetch the contents of this header file and output them in the place where that function is. You'll then do the same thing for the sidebar and the footer. And you can see as well as that, it's got this function here, get_template_part, with loop as its parameter. And what that's doing is calling this loop.php file. So that runs the loop. So in my index, firstly, I'm starting the query, checking if we have posts and then starting that loop with while have_posts. And then for the content of the loop, I'm using this file here. Now the benefit of that is it means you only need to code your loop once. Instead of coding it into all the relevant files in your theme, you just code it in the one template file, and then you call it wherever you want. So for example in the archive.php file, we also have get_template_part( 'loop' ). And if you want to learn a bit more about the get_template_part function, you can see it here in the code reference, on the WordPress codex. It makes it easier for you to build efficient code that only has to be edited once. So say, for example, you wanted to add metadata to your loop. Instead of coding it into every single one of your files, in your theme template files, you would code it once in your loop and then it would automatically be pulled into all of them. Now let me show you an example of how to do this. Here in my theme, I've got a single file. And that at the moment has got a loop in it. So you can see here, there's an opening article tag right down to a closing article tag and there's all the content. There's meta data about the author, the categories, and the tags. And then there's the_post_thumbnail, and the_content itself. Now, I want to put that into its own loop file. But because this is a single page, and not an archive page, we don't want to just use that loop file that we've already been looking at. So what we'll do instead is use a file called loop-single.php. And I've already created this as an empty file. So what you need to do is take everything inside that loop, And shift it into the new template part. So that's the exact same code, nothing changed at all. Now what I now need to do is use that get_template_part function to call back from within my single.php file. Now this time, it has two parameters. Making sure I get the syntax right. And those two parameters are loop and single. And that will automatically look for a file called loop-single.php. So I save both of those files and go back to my site. And let's open up a single post. Now we have an error here. Let's take a look at what's going on. Let's take a look back in my single.php file because that's the only one that I actually edited. And here we are. I didn't close my PHP tag there. So I'll save that again, check my loop single file. That's just got what I copied and pasted. Go back to my site and there it is. So that looks exactly the same as it did before I made that change. So your users will never see any difference. But you'll find that it makes your work more efficient, because you've only got one or two template parts instead of having your loop coded into all of your theme template files. Now, if you want to learn more about the get_template_part function, the code reference here on the codex tells you all about it. And it also tells you a bit about how template parts work. Going back to our files, it's worth mentioning that you can use template parts in what ever way you want. So if you wanted to split this template part, loop-single, into multiple template parts, you could do that. So for example for this entry matter before div here, you could create a completely separate template part for that. And then pull it in wherever you wanted to in your theme. You could also do the same for the entry content. And the advantage of that is if you've got a snippet of code, like this entry-meta here, that you want to add to certain theme template files, but not all of them. Such as for example, a single page for a post but not a custom post type, that would be one way of doing it. Another way is by using a conditional tag and enclosing your code in that. But by putting snippets of code Into theme template parts, I keep nearly saying template files here, template parts, you can split up your code. Make sure each bit of code is only in your theme once. And make your life easier if you ever come to change things. So think creatively about template parts. They're not just for headers, sidebars and footers and they're not just for the loop. You could use them for absolutely anything you wanted to in your theme. Now before we finish, I'm just gonna tidy up this code here, make sure my indentation is a bit neater. And that's my loop-single file finished. So that's how you add template parts to your WordPress theme and how you call them from your theme template files. I hope you found this course useful. Thanks for watching.

Back to the top