 Right, awesome. Welcome to today's session, everybody. Thank you for joining us. We are going to focus on creating a custom template with the site editor. Now, the lesson objectives for today, we are going to look at accessing and using the site editor to add custom templates. We're also going to discuss templates and template parts, and we will also be assigning templates to a page or post using the template editor. I'm using WordPress 6.2 today, and the theme I'm using on all my test websites will be the 2023 theme, and I have not installed any additional plugins. So I just wanted to clarify that at the start. So, custom templates. Let's just talk about that a little bit. Custom templates allow you to use a different design or layout from the rest of your website. This means you can create a page or post template with a unique header, footer, or other page elements. So why a custom template? Well, you might want to create a custom template for an event, a landing page, different types of blog posts, or even have unique styles for different pages on your site. And two examples I'm going to look at today is creating two different templates, custom templates, for two different types of blog posts that I want to display on my website, and the other one is a landing page. But before we look at those examples, I thought let's first discuss the site editor templates and template parts of it, and also just clarify how all of those things work. Okay, so I'm going to jump to my first test website. There we go. And you will notice on my home page, I have a specific header here, and I've got some content, and then I have a footer. Now, my footer and my header was created in the site editor, and I use the page template to do that. And the reason I use the page template is I set a static home page and I set a blog page separately. So therefore, my home page and all my other pages will be assigned to the page template. And the page template will have this header and this footer. So they will all share this header and footer. And I've assigned this template to my pages. But for my sample page, you will notice there in my navigation menu, for my sample page, I wanted to have a different page structure. So therefore, I created a custom template so that the page looks completely different. All right, so let's click on sample page. So when I click on my sample page, you will notice, okay, wow, it's a different header. And I've actually also added a different footer. All right, so this is on the front end. Let's see this from the site editor side. So I'm going to make my way to my dashboard and I'm going to make my way to appearance. And as I said, if you look at appearance, you will see that I have installed the 2023 theme. And we are going to make our way to the editor or the site editor, because this is where we create site structure. Okay, and I want to elaborate on this a bit more. So you will notice you've got templates and you've got template parts. And as we said, we use templates to create a design and structure for pages. You can think of it as a picture frame. It is the frame for your website, like your header and your footer. And the template parts, those are usually your headers and your footers, but you can also create other page elements. So let's open up our page template. You'll notice if you go to templates and you click on page template, you can click on the pencil there at top left, or you can merely just click on the screen and it will take you into your page template. So here is my page template and I've used template parts, header template parts and footer template parts to structure my template. Okay, so here's my header template part and here is my footer template part. And you will notice you don't really see any content here. Let's open our list view. So there's my header, there's my footer, those are my template parts I use to create structure. And if you open up your group block here, you will notice that this is the post content block. So a reminder for folks, we don't add content in the site editor. So we don't add content to our templates. We add the content to a page or to a post. But having this post content block here, it will pull it in, it will pull in the information or it will pull in the content from the page or post that's assigned to this template. Okay, so here is my page template and that's what you saw on the front end. So if I click on the WordPress icon and I go to templates again, you will notice I created a custom template called sample custom template. And if I click on that and then on the screen and if we open up our list view, you will see this is where I added a new unique header and a unique footer. And again, we have the post content block that will pull in the content from the page or post that has been assigned to this template. All right, so let's go to the dashboard to show you how to assign. Oh, no, before I do that, let's just go to templates again. You will notice, let's talk about templates first. You will notice that there are certain templates that are built in and come with your theme. For example, the 404 template, the index template that can display posts, the page template, the single template that displays single posts. But you can also click on the plus icon to add new templates. And you will notice there's a list of templates that you can add. But we are after this one, custom templates. So this is how we are going to add a custom template. And we'll do that later when we look at our first and second example. And the same goes for template parts. You have certain template parts that come with your theme. You'll notice there's some more now because I've already created some. But you'll notice, for example, this footer one, this is one that comes with your theme. And we can see that, yeah, if you go to manage all template parts, you can actually see the ones that come with your theme and the ones that I've already created. And you will notice when you've customized or changed a template that comes with your theme, it says customized below there. If we go to templates, you'll see the same thing. Let's go to templates and manage all templates. And there you will see all the templates that come with your theme. There you will see I've customized my page template. And you will also notice some of the custom templates that I've created. You'll see my name and image there. Okay, so if we go to our page, our pages. So let's look at our home page, for example, because that's the first one we saw on the front end. So if I click on the home page, you would have noticed if we go back, it says front page. And I've got a blog post page. And I did that when I went to settings and I went to reading. You will notice I set a static home page and a blog page. So then if I go to pages, it says front page, blog page. And if we open our home page, we will see in the sidebar, in the sidebar settings, that this page has been assigned to the page template. So if I click on that, it says templates to find the way content is displayed when viewing your site. And this has been assigned to the default template, which is the page template. Now, as I said earlier on, we add all our content here. So you'll see years all the content. And remember, it's going to be pulled in by the post content block in your template. Okay. So here's all our content. We can see that this home page has been assigned to the page template. But we assigned a different template to our sample page. So if we look at our sample page, again, you will notice my content. But now in our sidebar settings, next to templates, you'll notice I have assigned this page to the sample custom template. So therefore on the front end, this page will have a unique header and footer. And just a reminder, if we go to the front end, so here's the header from your page template, your footer from your page template. And here is the content being pulled in by the post content block. And if I go to my sample page, same thing. This page has been assigned to my custom template. And now it's got a different header and a different footer. And the content is still being pulled in by the post content block. Okay. So that was a bit of background about templates, template parts and custom templates. Are there any questions at this stage before we look at some examples? Is there anything that I can clarify or any question that you have? I will jump over to my next test website so long. Okay. So as I mentioned earlier on, that for my first example, I want to create two custom templates to display different blog posts. All right. I see there's a question. When you create a custom page, do you have to manually assign it to a page each time? Yes, Larry. So that's where I showed you, when you go to pages in the sidewall settings, you have to ensure that you've assigned it to the page that you want it to be assigned to. But if you just want it to be assigned to the page template, it will be automatically assigned to the page template. But if you create a new page or new custom template, and you want to assign it, you have to do it manually. Okay. So on my test website here, you will see I've got home, movies, books, and then about. So here's my home page. And on my website, it's all about reviews, movie reviews, book reviews. And to make this happen, I am going to make a movies page that displays all my reviews or blog posts about movies. And I want to create a custom template that displays all my reviews or blog posts about books. Okay. So to do that, of course, we need to create custom templates. And because I want those pages to look different than my home page and other pages. Okay. So let's do that. So the first thing, if we go to our dashboard and we go to pages, I have, of course, created a movies page and I have created a books page. And if you open the book page, books page, you'll see there's nothing in there. And if you open your movies page, you will notice nothing is in there yet. But you will see that these pages are still applied to the page template, the default page template. All right. So connected to that, can you create a conditional to show template only on some page types, like a custom post? Can you create a conditional to show only on some page types? Yeah. We probably won't have time to go into custom posts. But if I understand your question correctly, can you create a conditional to show? Yes. So the answer is yes, you can. And this is what I'm actually going to do now. I'm going to create two different blog pages. Okay. So as I said, this page is still applied to the page template. But now we are going to go to your site editor. So let's go to the editor. And yeah, of course, is our page template that we saw. And now we are going to, if you, if you click on your site icon or WordPress icon, of course your list of templates and template parts come up. So we are going to click on templates. And now I'm going to click on the plus sign or the plus icon. And I'm going to say, I want to create a custom template. And I'm going to call this movies template. And now I'm going to say create. And now you will see there's nothing there. It's an empty and empty template. So the first thing I'm going to do is I'm going to add my new header. And I want this to be unique. So I'm going to add a header. And of course, if you had, if you already created a template part or header template part, it will show you. But for today, let's just choose a new one. So I'm going to say, choose an existing header. So let's choose an existing one. And I'm going to use a pattern, a header pattern that comes with my theme. And I'm going to say, I want to use this, this one, the full width header with Euro image. So I want both of my pages to have that. So I'm going to select that. Great. So the next thing I'm going to do is I want to change this image. So I'm going to say replace. And I've already added that to my media library. And I've added this image. And I'm going to say, I want this. So I want this header for my movies blog page. So apart from the footer, let's test the group out today. Apart from the footer, what is the next thing I must add? If I want to create blog posts, which block do I need to add to display posts? So we are displaying posts. So I see some answers here. And if we were going to display content from that page, we would have used the post content block if we just added content to our movies page. But we actually want to display posts. And to display posts, we need the query loop block. So yes, Anne, thank you for highlighting that at the end. So yes, Jean, and I've already created a category for movies. So below my new header, I'm going to click on the three vertical dots. And I'm going to say insert after. And now I'm going to add a query loop block. Because a query loop block displays my blog posts. So let's add my query loop block. Let's choose a pattern. Now you will notice I've already created posts. So let's see what pattern I like. So for now, I'm going to add this pattern. So there's my query loop block. It's displaying some of my posts. Let's open our query loop block and see what is in there. So we've got a post title, the post excerpt, and the post date. Well, I think below the post title, we want to add a post featured image. So let's say insert after. And let's type in post featured image. And you will notice if you add it to the one, it will appear everywhere else. Okay, cool. But you will notice there's some books here. All right, so this is a book. I know it's also a movie, but this is a book for my example today. We've got a movie, a movie, and we've got a book. Okay, so let me just save this for a moment and show you something first. So if we go to our dashboard, let's go to posts. Because these are the posts that I've already created, right? So here's my four posts that we saw. And below posts, you can go to categories. And you will notice I've created a books category and I've created a movies category. And then if you go to your posts, you will notice below categories, you can see I've applied the books category year, the movies year, movies, books. If you go to quick edit, you can change it there below categories. Okay, so just a bit of background. So now we're going to go back to our site editor and we are going to go to templates. And we've already started with our movies custom template. We've added our header. And now we've added our query loop block to display our posts. But I only want to see movie posts, right? And that's where Gene also said select. We're going to use categories. So make sure you select your query loop block. And the first thing you've got to do year is you've got to deselect inherit query from template. And that means you can customize the way your query loop is displayed. So let's just deselect that. We don't want to inherit that. And now when you deselect that, you will see some options here. You can change the columns. You can order it. There's some information about sticky posts. But we want to filter our posts. So we're going to go next to filters. We're going to click on the plus sign. Now you can filter posts by taxonomies, by the author and even keywords. So the taxonomies are your categories, your tags and even custom post types. But we don't have custom post types. So we are just going to select taxonomies for now. And then when we select it, you will notice there's filters, categories and tags. Now we need our movies category. So I'm going to type in movies and you will see it comes up. And when we select it, we will see that the other blog posts disappear. So the one thing I still want to do year is I want to say I only want to have two columns. There we go. Okay. So the next thing we're going to do, we're going to add our footer. So insert after forward slash footer. So let's choose one of our existing template parts. So I actually want to keep my footer the same as my other pages. So I'll just use my one of my existing template parts here and I will add that year. And then click save. So now my template for my movies page is completed. So of course now the next thing we're going to do, we're going to make our way to the dashboard. We're going to go to our movies page, movies page. We're going to go to the sidebar settings. We're going to say we want to apply this to the movies template. Right. And we are going to update. Now I know with repetition, well we learned through repetition. So I'm going to go through this again. But this time of course with my books blog page. So we'll make our way back to the editor. Click on templates. Click on the plus sign. Create a new custom template. And this is the books template. And then create. Okay. So to save some time, I just want to show you, I'm going to go. If you go to templates, template parts. You will notice that this template part is named full header with your image. That's the one. But we can't change that one. Otherwise it will change for the movies template as well. So what I'm going to do now, I'm just going to copy this. I'm going to copy this block. Copy block. Okay. And then while I'm in template parts, I'm going to create a new template part. So next to template parts, we can click on the plus sign. And now we can create a new template part. And of course we want to create a header. And let's call this books header. And let's say create. And then we can make our way back to template parts. And you will see, if you click on books header, Susan, very good question. You can tell when a block is global when it's got a different color. So let's open our template part here. And now I'm going to paste that block here. And I'm going to replace it with a books. It's select. Cool. So now I've created a template part for my books template. So let's just save that in double check. So that's my books header. And then we still have this one for the movies, the full width header with your image. Now we can return to our templates. And we were busy with the books template. So let's click on the screen or on the pencil. And now we can say forward slash template part. Let's choose one that I just created. And that's this one. And Susan, yeah, you can see now this is global. If you open our list view, you will notice it's got this purple color. And therefore we know it's global. And if you change it here, it will change everywhere else. And it's, it's applied. All right. So again, after our header, we're going to add our query loop block. Insert after. So forward slash query loop block. Again, let's choose the same pattern as earlier on. It was this one. And of course, below the post title, insert after, we added a post featured image. And then we select our parent block again, which is the query loop block. Because if you select the parent block, the sidebar settings will relate to the parent block. We deselect inherit query from the template because we want to change the query loop. We said we only want two columns. And this time for filters, again, we're going to select taxonomies. And for the category, it's going to be books this time. And of course, I've already created my category. So now I can just select books. And now the other two will disappear and we will only see posts with the books category. And then we're going to add our footer. So insert after forward slash footer. And again, we are going to use the existing template bot that's on all our pages. And now we click save. Now we head back to our dashboard. Sorry, you can just click on the site icon or WordPress icon. We go to pages. We go to books. This is still applied to the page template, the default template. So now we want to apply the books page to the books template. And we can update. And now we can see what it looks like on the front end. So if we go to the front end of our website, here's the home page. Now if we click on movies, we will see that this page has got a unique header. And it's displaying posts with the movies category and then our footer. And if you go to books, same thing, unique header. And it's displaying posts with the books category. And we've got our footer. Now, of course, you can modify how you want to display your query loop block any way you want. You could have chosen a different pattern or whatever it may be. So maybe I'll use that as an example. So if you say edit page, I'm not going to edit the page. I'm going to edit the site. So it will take you to the site editor. So let's say, for example, for the books template, if you open your template and you select your query loop, you can say replace. And you could have said, oh, no, I actually want my blog posts to be displayed this way. So it's small image and title. So let's select that. Now, I've already modified these things. So that's fine. But yeah, you could have modified it that way or changed it that way if you wanted to. So cool. Jean says, do you need to create a new template for single movie book or use the single template that come with the theme? So that's also a good question. If we go to the single template. So the single template is just for how you want a single blog post to be displayed. And of course, in my case, I want all my blog posts to, yeah, I want all my blog posts to be displayed the same way. So if you change your single template once, it will apply to all your blog posts. So I won't create a separate one for movies or a separate one for books. All right. Any other questions about these examples before we move on to the landing page example? Let me move on to my test website here. I'm just in the dashboard. All right. So we said in the beginning that there's different reasons why you would want to create a custom template. As I said, you maybe want to have a create an event or as we saw, you wanted to have different templates for different blog posts. Now, something else, for example, before we look at the landing page, in my example test website here, this is a photography website. I created a custom template for my galleries page. So another reason you might want to create a custom template is because you just want some pages to have a unique header and unique footer. So if I go to galleries and to all my action sports photos, if you click on there, you will notice that my galleries page has got a unique header. It's got the same footer though, but I wanted to have this header. So if you go back to home, you will see this header, same footer though. And for example, contact. So I just created a custom template for my galleries. All right. So I want to talk about a landing page. Now, a landing page can be seen as a marketing page. So a landing page is usually can be seen as a page that you want somebody to land on and do something or buy something or register for something. So you usually want a visitor to that page to take a specific action. So you don't want them to go to the rest of your website and get lost. You want them to take action and purchase something or as I said, register for something. So for my example, I've already created a landing page. And there you will see it's called landing page. Okay. And what I did here is I merely used some patterns to create this example. So if I open up my list view, you will see three cover blocks here. And I called my my company, the music bar best deals in town. And this might this landing page might be shared on social media or maybe via an email. Right. So this is not going to be a page that you can click on when you when you visit my website. This is something that I'm going to use as a marketing tool. So if we click on page, we will notice that this landing page has still been assigned to the page template. All right, so we will come back to that now. So let's make our way to the site editor. And now we want to create. So of course, my landing page has got nothing to do with this example website. But I just use this website for for the example. So we're going to click on templates. And now we are going to create a new custom template. And we will call it landing page template. And now we can click create. So I actually don't want my landing page to have a header or to have a footer. I want folks coming to my landing page to click on shop now or to explore the music that I have on offer. So I'm not going to add a header footer. I'm not going to add a header template bot or footer template bot. I am just going to add my post content block. So if you add your post content block. Remember that's going to pull in the information from that landing page. And that's actually the only thing I want to add here. Now, one thing I've noticed, of course, preparing for this is that the style of my post content block actually influences the display of my content. So the one thing I want to do here. Let me let's test this. So I'm going to keep it wide width. I'll just keep it here. So let's click save. And we can see how it how it changes together. Okay, now we're going to make our way back to our page, our landing page, right? Landing page. So we've got all our content. That will be displayed through the post content block. And you'll see my call to actions here shop now, listen now, make sure you open up your sidebar settings. And then assign this page to your custom template, which is my landing page template. And now I will update. That's interesting. You would have seen this information. It's displaying differently. And I don't know if that's a bug or what's going on there. Maybe somebody else can tell me, but let's see what it looks like on the front end now. So let's preview. So it displays correctly on the front end, but you would have noticed that my post content block was actually full width. And therefore this information is displaying full width. Okay, so of course, if somebody clicks on this, on this link on social media, it will bring them here. And as I said, you don't want them to go to your website. You want them to click on one of the calls to action. So let's see how we can change the display here slightly. So let's make our way back to the site editor and open up our landing page template. Click on the pencil. So you will notice if you select the post content block, you can't really change the alignment to full width or wide width. So to do that, I'm going to click on the three vertical dots and I'm actually going to group this. I'm going to add it to a group block. And now when you add it to a group block, you'll notice it already displays differently. And if you open your list view, you will see that you've got more options in your toolbar. And now you will see we can say, oh, let's actually change this to wide width. Let's save. Okay, so we've updated our landing page. Again, let's go to our page, which is our landing page. I know it looks, it displays differently here, but let's see what it looks like on the front end. And now you will see it is not in wide, it's not in full width anymore. It's in wide width. And I actually preferred this way. So I'll keep it wide width. So those are the two examples that I wanted to go through today. And now we are welcome to chat more, ask more questions. Or maybe there's something you want me to show again. So Susan's asking an important question. Do you need, sorry, are child themes still a good practice? Absolutely, Susan. You always want to create a child theme if you can, especially with regards to updates and those things. Yeah, thank you, Anne. Anne says, sorry, just scrolling up here. And there's a plugin called create block theme, absolutely. And you can save the changes you made to templates by creating a child theme there automatically. And then you can reuse it for another client. It's pretty neat. Yeah. The create block theme is an excellent plugin to use. Okay, Laura, is there anything else that you wanted to, to mention or something that I missed out before we say goodbye? No, I think just realizing that the confusion between what a template is and your page is, because a lot of people and me included, I was customizing and styling my template. And then I got confused on what the page is because the page is going to look a little bit different, especially when you have your post already and pulling that, those posts into the template. So just having that difference within there and just taking your time with it and exploring like, like Wes does on here is the thing to kind of just take a deep breath about sometimes. And thank you. I think, and I think that is something a lot of people and myself included struggled with is making the differentiation in that posts and pages are for content and templates are for design and structure. So in your templates, you're mainly going to add headers, footers, and for example, a query loop block. Those are the main things that they used to create that structure for your page. Oh, thank you, Barry. I appreciate that feedback. So yeah, now it's your turn to create your custom templates. I hope it goes well. Thank you for joining us today. Thank you, Laura, for helping out in the chat and for everyone's participation. So thanks for joining. Bye, everyone.