3.2 Creating a Custom Post Type Template

Hello, and welcome back to this course on working with custom post types in WordPress. In this part of the course, I'll show you how to create a custom template file for your film to display your custom post type. So the first thing we need to do is identify what are template families to be called. And I'll do that by reference to the WordPress template hierarchy. Here we have single page, single post page, and custom post. So we're looking for a single page for a custom post type. Now WordPress will work through the hierarchy in order. But then this is the one that we're going to be working with and that single post type .php. So in our case, it would be called single- Plus_project.php. And then WordPress will know to use that template file instead of any others to display the single post for my custom post type. So let's take a look at the files. Here you can see in Finder because I'm working locally, I've copied the single.php file from my parent theme. You can see that's here. I've made a copy of that in my child theme, which will override the one from the parent theme if I was to edit it. But I want to create a more specific one, so I'm gonna rename it. So I've now given it the correct name. And now I'll open it so that I can edit it. So here I'm gonna change the commented out text at the front. And I'm gonna get rid of that because it is not past the 2017 theme. Here's my code. So you can see it's getting a template part here. So it's getting the loop from this particular file here, template-parts/post/content. Now, let me first save this file. And take a look at that particular file. So here's Template parts > Post > Content. Now, I'm gonna make another copy of that, and I'm gonna add it to my child theme. So I go back into here. I'm gonna create a folder called template parts. And then so that I'm being consistent, I'll have a sub-folder called post and then I'll copy it in there. And I'm gonna call it content-project. So now I need to edit both that file and my single template file. So here, it's got template-parts/post/content. And then here, instead of get post format, I'm gonna put 'project'| as my second parameter. Now the reason I do that instead of adding it in here as the first parameter is because WordPress if it doesn't find a content project file it will fall back to the content file. And that's why it's important to make sure my file structure is the same my folder structure. So I'll save that, and that's the only change I need to make to the actual template file because all I want to edit is the loop. I don't want to change the navigation or anything else surrounding that loop, but if you wanted to, you could do so. So for example, you could call a different version of the header if you wanted. You could add in some extra classes, which could be used for styling. Although, bear in mind that WordPress will add its own classes to the body tag that you can target. Or you can add content in above the loop. So let's open up this content project file that we've created. And again, I am gonna take out that comment in our texts. And edit that so it's for displaying projects. Now you can edit whatever you want. But I am gonna make two small edits to my file because I want to make just a couple of tweaks. So the first thing I'm gonna do is remove this conditional content here. Because that is checking for the post type and if the post type is post. Now obviously, the post type is not post here, because we're looking at projects. So I may as well delete that because there's no point in having that there. Now this content, here, checks for if we're on the single page or an archive. I'm gonna keep that because we'll be using that later on in the next part of the course. And then, we look for the post thumbnail, which I want to keep as it is, and we then move onto the content. So if I go back up here, I want to add some extra text with my heading, and I just wanna add in the word project. So because this is using the title function with two parameters, the first being what comes before the title and the second being what comes after it, I want to add it in here. So this will need to be PHP, so I will code this as if I was using the Echo Function. So I put the full stop in here, the period, to denote that I'm moving out of HTML and into PHP. And then I'm using internationalization to display the word project using 'tutsplus' as the text domain for my internationalization. This will display Project and then the title. So let's save that and check it out on the site. And there it is. So here I am on a single project and it says Project Client 1 Website. Simple as that. Now, I'm gonna go back into my file and add that same code for archives. So here, I'm just gonna copy and paste. Now you see this is slightly more complicated but I still to need to just add it the end. And then here, Again, I add it. No, hang on a minute. I've added that at the end of my second parameter which goes afterwards. I need to add it after the first parameter. There we go, so let's just tidy that up a little bit with our spacing and save that. So that will now display the word Project before the text of the heading in an archive as well. Which you'll see in the next part of the course. So in the next part of the course, we're gonna move onto creating an archive page for our individual projects and also adding that to our navigation menu in WordPress. See you next time and thanks for watching.