Hey there and welcome back!
So far in this series on creating a block theme for WordPress, we have looked at the designs, we have walked through the theme dot json file and the styling we need to do, we’ve talked about block patterns and last time we discussed template parts.
Now comes the really fun part and that is creating templates. Today we’re just going to start with the single post and page templates. But we’ll also throw in sort of a sidebar option that users can have.
But before we get started if you want to see the rest of the videos in the series as well as more videos on WordPress development and website development in general, be sure to hit the subscribe button and to ring the bell for notifications.
Now let’s get started.
So before we begin with creating the templates, let’s discuss where the templates live in the theme. With full site editing themes, you can now add in your templates here under the templates directory in your theme directory.
So as you can see I’ve kind of already created these out as this theme has already been built and you can download it and check it out on GitHub.
But we’re going to walk through how I created the page template, this page-content-sidebar, which is an option that users have, as well as the single HTML and this single post template that has a sidebar.
So first things first, we’re going to create the grouping of blocks for our page template. And this is pretty simple. We’re just going to go in here and create page. Okay so we’re just going to put in the post title like this. And we’re going to make sure that it’s centered.
And then we’re going to add in the content right there. And simply just do this. And then we’re going to copy these two. And then we’re going to go here and unescape it like that.
And then we’re going to come in here to our page dot HTML. Now with this file, this has already sort of been setup, and you’ll see this if you use the FSE starter theme that I have on GitHub that’s linked to in the description below, a lot of this will already be set up for you, including this sort of group of blocks as our main. This would all be set up for you.
And we would just come in here and hit paste. And we hit save. And that is our page template.
Okay and now we come out to our page and there it is. This is our page. It’s very simple. Very easy. But that’s what this series is. It’s really just to introduce you into creating full site editing themes.
Now we’re going to take it up a little bit and we’re going to create a custom page template that has a sidebar. So to do that we’re going to come back into here and I’m just – for simplicity’s sake – we’re just going to remove these two blocks. And we’re going to create a columns block like this. And let’s see, let’s align it wide like so. And then here is post title. Then I’m going to add post content like so.
And now that we’ve got our title and content back in, this is where things get a little bit tricky because you can’t really add in a template part here in the page editor. But I have a little bit of a workaround for that.
So we’re just going to copy this group and we’re going to bring it over here and unescape it like so. And then we’re going to bring it in here, and now I already have this group set up where we’re going to put the columns. But simply we’re going to paste what we put there.
And now if you’re adding this all in the HTML, we’re simply going to copy the template part that we have for our header and paste it. And for us it’s sidebar. We’re not going to have a tag name for it. And now we’re going to hit save.
Now one other thing we touched on briefly with the theme dot json file, but you can define custom page templates in the theme dot json file here. You can give it the slug, the title, which is going to show up in the sidebar, as well as what post types it’s available for. So this is for page and we have a similar one that we’ll talk about later for posts.
So now we’re going to go back to a page that we have set up, and we’re just going to change the template like so. Hit update. And now we have our page template with the sidebar. And again we can change the sidebar in the site editor.
And I’ve also gone ahead and made all of this a block pattern. And that can be edited in the site editor. So let’s go see how to do that.
Okay so we’re here in the site editor, and now we’re going to get to our page template. So we go to templates, and we’re going to look for page. And we’re going to go over here and we’re going to remove this main group.
And now sort of beneath the header we’re going to look for a pattern, and it’s going to be under layouts. And it will be this page content sidebar layout. We’re going to hit it there. And we can see that it’s been inserted. And now we can hit save.
The site has been updated, let’s reload this page. And now we can see that our page template – the default page template – has the content sidebar layout. And all we had to do is edit it here in the site editor.
And I think that’s one of the cool things that gives theme users a lot of control with what they can do with their content and how their website looks. There’s a lot more that can really be explored here that I’m hoping to do with other maybe more premium themes. But this is really cool.
So now let’s go over and do a similar thing with the posts.
Okay so for posts we’re going to jump back into here – into our wonderful add new page screen. And we’re first going to start off with the post title like always at this point. And then we’re going add in a group for our post meta. And here we can – let me see if it’s the same size like that.
And then something with the group block we can also add in a layout. So we want this to be side by side. So first off we’re going to add in the author – post author. And we’re not going to show the avatar and we’re not going to show the bio.
So next then we’re going to put the date like so. And you can change it to be the format that you have for the site settings or custom format. We’re just going to leave it as the default site settings.
And next we’re going to put the category or categories. It’s similar, there’s nothing much to write home about. And then we’re going to put in the post tags. And then we’re going to go back and we’re going to align this center.
Okay and then beneath that we’re going to put in the post featured image if there is one. And we’re just going to leave that like that.
Then we’re going to add in a spacer block. Although now that there are margins available, it might be a little bit easier just to do margins. But let’s do 30 pixels on that.
Then we’re going to add in our wonderful post content like so. And then another spacer.
And then we’re going to add in our post navigation. We’re again going to do a group block like this. And again like so. And we’re going to do this space between so that way they’re both at the end of the line. So then we do previous post. And we can just put like that. And then we’re going to add in next post like that. And you can change how it looks – if it says previous post or just the title or whatever. That’s up to you.
And then actually I forgot that up here I have a wonderful separator block that we’re going to do. And it’s going to be all the way across. And then another spacer. And another separator block like so.
And then we’re going to add in our comments. And then a comments query loop like so. And you’ll be able to update or change this essentially if you have comments already, and especially if you’re doing this inside the site editor. Just for simplicity’s sake and to do this quicker, I find it easier to build these things initially especially in the add new page screen.
So now we’re going to go back up here. We’re going to copy all of this. And we’re going to go over here and escape it. And then we’re going to come into the single dot HTML file, and we’re just going to paste it like this. And then hit save.
And now we see our single post template right here. Site title. Post meta data. The image. The content. Navigation. And our comments.
And then for doing the sort of the right sidebar we would do something very similar to what we did with the pages. So I’ve already gone ahead and created this post content sidebar template with everything that we just did in the two sets of columns. And then in the theme dot json file, we come back here, we have it here.
And then we can come in here and select it like this. And hit update. And there we have our content and sidebar.
And then finally we can come over here and edit that like we did the pages in the site editor if we want all of the single posts to have the content sidebar layout. And then right here. And then we come down here to our block patterns. And hit that to insert it. And then we would hit save.
And now our site has been updated so that all of the post templates look like this. And that’s how you create your page templates and your post templates with full site editing themes. It’s something sort of fun to play around with. I’m still exploring every time I work with FSE themes on how to do it.
But I really think that there’s a lot that you can do, and it will help out your theme users being able to customize their own websites to make them look how they want them to look pretty easy, or at least easier than what we have now.
So what questions do you have about templates and FSE themes? Or what questions do you have about full site editing in general? Be sure to leave them all down in the comments section below, and I’ll do my best to answer them.
Next time we’re going to continue on with the templates and we’re going to work on the archive templates, the 404 template and the search template.
To see that video, the rest of the videos in this series, and more videos on WordPress development and web development in general, be sure to hit the subscribe button and to ring the bell for notifications.
But that is it for today. Thank you so much for watching. And I will see you next time!
