7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 11Length: 1.5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.3 Set Up a Custom Post Type

For our approach to building a Gutenberg layout, we’ll be using a custom post type. In this lesson, we’ll get that custom post type set up and loading into our index template.

2.3 Set Up a Custom Post Type

Hey welcome back to building Gutenberg template layouts without JavaScript. In this lesson, we're gonna go into our functions.php file again, and we're gonna get the basics of our custom post types setter. Our custom post type is going to be how we create our custom layout. All right, so the first thing we need to do is register our post type. So we're gonna need to create another function, and we're gonna call it register_landingpage_post_type. And now, just like we add our other functions, we're gonna need to use add action to trigger this function. We're gonna set it off when WordPress is first initializing, then we're gonna add our function name in here as the second argument, and now inside this function that we've just created, we're going to use the function register_post_type. So, there we go. And we're gonna give our post type a handle, we'll call it landing. And then we're gonna need to pass some arguments through this function to let WordPress know how we wanna to set this custom post type up. So this arguments are basically the post settings. So I'm just gonna change this parameter to a variable name post_settings, and in their line in there are going to set the value of this post_settings variable up here. So this collection of post_settings needs to come via an array. So, we're gonna define an array. And then we're going to make a space inside this array, so you can more easily pass our settings. The first setting that we're gonna pass is public, which we wanna set to true, we wanna make sure that people can actually see this content. We need to give our post type a label and this is what's going to appear in the menu, in the back end. I'm gonna call it Landing Page. And the way that we're going to tell the system what Gutenberg blocks we need is with the setting template in here a little bit later. We're gonna be passing an array of Gutenberg block definitions but for now, we're just going to leave this as an empty right, so that we have something in there. And there's one more setting that we're going to add in here. And that is template_lock, which which we're going to set to all. And what this does is it says that once we've set up the blocks that are going to appear in the post editor for this custom post type, they can't be moved around. They can't be deleted and no new books can be added in. So that makes sure that you protect the user from accidentally messing up the layout or adding in things that you haven't prepared for. So we're going to save that and now, let's have a look at our back end. If we refresh, we should see the landing page custom post type appear in the sidebar, all right? So there it is and then we can go ahead and add a new landing page, the way we're gonna be doing this, we're only gonna need one entry in the section and we're not gonna show the title on the front end, so just add any place holder title because the title won't appear, and just so we can test, we're just gonna add in a little bit of dummy text, and then we'll publish. Now, back in our code, let's go into our index PHP file, and we're going to set up a custom query, so we can reach into the WordPress database and pull out that singular landing page entry that we've created. So up here, in this little PHP snippet, we're gonna make a space, so we've got more room to add some PHP code. And we're gonna set up the parameters for a custom query. So let's create a variable, and we'll name it query. We're gonna make this as an array of different settings that WordPress is gonna need. So first up, we're gonna specify the post type that we're trying to query from the database. So, we're gonna say post_type. And this is where we're gonna specify this landing post type that we added in to our functions PHP file. So it's gonna paste it straight in there to ensure that we have it accurate. And then we're gonna say that we only want one post. We are not trying to get a heap of posts, we really want just one, so that we can use it to drive this portion of our learning page layout, so posts_per_page, and we'll set that to 1. So now, we're gonna use this query to create a custom loop, so in WordPress, the loop is an array of content that has all of the posts that you're fetching to display on your front end at a given time. And then you iterate through that loop to output each piece of content. The default loop just grabs you latest post or if you're on a page template, it grabs your page content but we want our own custom loop. So, we're gonna create a variable. We'll call it loop, I'm gonna set it to a new WP query object, and then through this, we're gonna pause, discuss the query that we just created. So now, that content that we just added in via our custom landing page post type is gonna be held inside this loop variable. And now, we need to get it out of that loop variable by iterating through its contents and we do that by saying while, while our loop, and then we're going to say have hosts, so while the loop has posts inside of it, then we're going to add a colon, and then we're going to add in loop the post, Which drills down into that object and get's out the specific post that we're trying to work with. So now we've opened up this while, and that started that looping process, and we need to end it, which we're gonna do down here in our closing PHP tag, we're just gonna say end while, and then that just closes off the area that we wanna use to output our content. Now because later on, we're going to be filtering our content and we're gonna be outputting it in the custom way, the next thing that we wanna do is transfer our post content into our own custom variable that we're gonna be able to dig into later. So I'm going to create that variable and call it LP content for landing page content, and now I want to get the content out of the post that we've just had WordPress grab for us here. And before I can do this, before I can get that content and put it into this variable, I'm going to need to get a hold of the global post variable, this is a variable that's exist globally in WordPress, as long as you're working inside a post loop. And now we can say that we want LP content to hold the post, but from inside that, we specifically want the post content. So we don't want the title field or any other information or data that's associated with this post. We just want the post content. So that's what's in basically everything under the title. For us, it's just going to be that dummy text we added in a moment ago. But when we fill this one out with Gutenberg blocks, it's gonna be all of the Gutenberg block content. And then to output this content, we're gonna go into our divs that we set up before, make another PHP snippet and now we're going to echo, which means we're going to output that lp content content variable onto our front page, so let's test that out. So we'll go to our front page and we're gonna refresh. And there we go. There's a dummy text called straight out of our landing page post. All right, so now that we have got all of our theme basics underway, we're ready to actually get into the block template set up. Right now we've just got this empty array and we need to start filling that array in with Gutenberg blocks and to then had to appear in our post editor. The first thing that we're gonna set up is the heading. From the two section of our original HTML page, so we're gonna get that built into our custom template system in the next lesson, I will see you there.

Back to the top