3.1 Adding Custom Post Types to the Blog

Hello, and welcome back to this Tuts+ course on using custom post types in WordPress. So far, we've registered our project, Custom Post Type. And in this part of the course, I'm gonna show you how to display your project along with normal posts on your main blog page. So here you can see the blog page on my site, which is using the twentyseventeen theme. And it's just showing, if I scroll down, you'll see some more. Here we are, it's showing all of my regular posts. Now let's take a look at the admin. So I've created some new projects using my post type, and I want to add those into my blog. Now, you may or may not need to do this on your site, but it's useful to know how to do it anyway. Because then it means that if you do register a custom post type that you want to include on your main page, you can easily do so. And the way we do that is by using the pre_get_posts action hook. And we'll write a function that we hook to that in our functions file. However, because I'm using a third party theme, the twentyseventeen theme, if I attach to the functions file of that theme, it will get deleted whenever I update the theme. So I need to create a child theme, and that's what I've done. So here's my themes folder and in it, you can see there's twentyseventeen. And there's also my theme called tutsplus-custom-post-types-theme. And within that, I've got a style sheet and a functions file. And I need both of those to create a child theme. So the style sheet here has got commented out information at the top that tells WordPress that this is a theme, and also that it's a child theme. And the important line here is this Template: twentyseventeen line, because that tells WordPress that this is a child of the twentyseventeen theme. Now, as well as registering this as a child theme, which enables WordPress to use all of the theme template files from the parent theme as well as the child theme, I also need to add styles. Now, the correct way to do this is in the functions file of your child theme style sheet. And you do that by enqueing the style from your parent theme. And you find the style of your parent theme using this get_template_directory_uri function. Now, I am not going to go into a lot of detail here. But what I will do is provide you with a link in the notes for this course on creating child themes in WordPress. But let's move onto what we're doing in this part of the course, which is using the pre_get_posts hook to add our projects to the main blog page. So you can see I've added my commented out text here already. And I've named my function, so let's just copy that. So my function is called tutsplus_projects_on_home_page. It does what it says on the tin, and I've used that prefix again. In fact, while I'm at it, I'm gonna also add, The prefix to the enqueueing function as well, just so that's done correctly. So the contents of my function will go in here. But first, I'm gonna hook it to pre_get_posts. So, add_action has two parameters. The first one of which is the hook that we're hooking our function to. And the second is the name of our function, which I'll copy and paste. So at the moment, that's an empty function. It won't do anything. So let's populate that function. Now, the first thing we need to do is check that we're on the homepage and we're running the main query. Because if it's not the main query, and it's something output by a widget or by a WP query class, then we don't want to include it in that. So we'll add a conditional term to do that, So there's our check. So first we're using the is_home conditional tag to check that we're on the homepage, and that relates to the blog page. So that's either the homepage if you're sharing posts on your homepage, or it's a separate blog page showing your posts if you've got a static page as your homepage. And then we're also checking that we're in the main query. And if that's the case, it will then run the code within our conditional tag. So the first thing we do is we reset the query by defining the post types that the query will fetch. Now by default, it will just fetch posts. And we need to include that, as well as our new post type. Which is why the second parameter here, which is the actual post types we're including, is an array, because we want to include two of them. So the first one is post, and then the second one, Is tutsplus_project, which is the name of our custom post type. But that's not quite done. We need to add one more line, And that's simply, return the query. So this code here will alter the main query on the homepage, the blog page, to set not only posts, but our project, as the post type queried on that page. So now we save that. And we'll go back to the site and check that it's working. Right now, I'm getting an error, and I know immediately why that is. It's because I didn't include a parameter for my function. And here, I should have this query variable as a parameter for the function. Because otherwise, it doesn't know what it's working with when it looks at this variable here. So let's save that again and check it out. So there we go. You can see my blog page here has got one of my projects first. Cuz that's the most recent post, either of post or projects post type, that I've added. And then beneath that, there's a normal post, so they're mixed in with my normal posts on my blog page. So that's how you add your custom post type to your main query on the blog page. In the next part of the course, I'll show you how to create and edit a custom template file for your new post type. See you next time, and thanks for watching.