 As I said, welcome everybody to today's session. Our topic for today is intro to templates. So it is very much an intro. So if you have worked with templates and you've applied templates and those things, this might not be the session for you. If you, maybe in the chat, if we can just get an indication. If you are very familiar with templates, maybe you can say, I'm three, very familiar. Two, so-so, and then one is a beginner. So maybe just the number. One for beginner, two for average, and three for very familiar. Okay, cool. Oh, quite a variety. So for those people that said three, I hope you will be able to help in the chat as well if there are any questions that come up. But I'm going to start with an introduction and then I'm going to go through my test website. And Victor, I'm going to leave Mark Andrew with that question for now. I will maybe touch on it a bit later, but yeah, let me start. So the first thing that we need to realize, if we want to use templates, we need a block theme. So a block theme is not a classic theme. A block theme is a type of WordPress theme built using blocks. And you can edit all parts of a block theme in the site editor. And when we're in the site editor, that's when we will, of course, use our templates to create structure for our website. So templates are groups of blocks combined to create a design or structure for a web page. Templates are structural and not for adding content. And that is something I wanted to kind of make clear at the start. So one of my colleagues, Sarah, always says that a template is like a picture frame. It is the picture frame. And of course the content that we add to our website, that is what goes into our picture frame, the picture that goes into our picture frame. One of my other colleagues, Catherine, she compares a template to a container. So you've got your container, you've got your template, and then all your content is the things that you add into your container. So content for a page or post is pulled in by the post content block. The template, as I said, is structural. And templates are used to add structure by using your header and footer template parts. All right, so templates offer design and for structure and we rely on the post content block to pull in the content from the page or post that is assigned to a specific template. So yeah, that is a bit of an introduction. And if there's anything else that somebody wanted to add, please go ahead. But yeah, templates gives you a lot of power. And of course, if you think back to classic themes, you weren't able to modify your header and footer compared to how you are able to do it using a block theme and using templates. All right, that is my introduction to templates. So let's go and see what that looks like on our test website. So let me first go to my test website here. Now, please note, I'm just gonna jump to my dashboard. I have installed the WordPress beta tester. So what you will see today is what we are going to see with 6.2, with the 6.2 release. So if your website looks a bit different at this stage, that's fine, but one of these days, I think it's on the 28th of March, the 6.2 release will take place and then your site editor will look the same. Okay, so first things first, let's make our way to appearance and see what theme I have installed. So I've installed a block theme and the block theme is 2023. And you will therefore also notice, as a block theme, there's no customizer and you'll be editing your whole site in the editor. Now, as a reminder, all our content for our website is added to our posts, right? And our pages. But we will go to the site editor to manage our templates, template parts, and also if you wanna style your website, you can do it there. But we're not really going to go into styling as our focus is more on templates. Okay, something else that I wanted to show here is if you go to settings and reading, you'll notice what I've done here is I have selected a static page. So I selected a static page and I made my home page or I selected my home page that I created in pages as my home page and I selected a block page for my posts page, all right? So that's the settings I've chosen here. Now, if we then go to appearance and click on the editor, we will see that our site editor opens up. If you click on your WordPress icon or site icon, it will take you back to your dashboard. But of course, I wanna go back to my site editor. And as I said, I will come back to questions a bit later. For now, let me just go through my introduction and then I will stop and maybe look at some questions. So I don't know if it will be helpful to just kind of focus on the demo for now and then we can look at some questions after that. All right, so here you will see, customize the appearance of your website using the block editor. All right, and here we have our templates and our template parts. And your template parts, and it says here that the template parts are small pieces of a layout that can be reused across multiple templates and always appear the same way. Common template parts include the site header, footer and sidebar. But I must say something I've seen with modern websites is I don't see the sidebar that often anymore, but you can use template parts for sidebars as well. So of course template parts, yeah, I should say template parts of your template. Yes. Sorry for interrupting, yes. What's the answer for users on Linux who can't see the screen? Is it restarting? I actually do not know. I'll track it down, sorry, continue. I know, I apologize. Cool, all right. So as I said, template parts, full part of your template. So you use your template parts to add that structure to your template. All right. So if I click on templates, you will notice that your theme provides you built-in templates. So you've got your 404 template, which displays error pages. You've got your archive template. Then you even have a blank template that you can use and your blank template, if you open up your blank template, for example, you'll see there's nothing there. And of course, if you add structure to this blank template, you can then go and assign it to a postal page if you wanted to. All right. You have your home template and yeah, it's something important to note. It says it displays posts on the home page or on the post page if a static home page is set. All right. So again, it displays posts on the home page or on the post page if a static home page is set. So I remember I set a static home page. So my static home page will actually be assigned to the page template, not to this template. So it says displays the post page. So this will display the post page. All right. So if I then go to my page template, it displays a single page. So if this template is assigned to a page, it will have this header and it will have this footer. Okay. So let's just look at the anatomy of a template. Okay. So I'm just gonna, you'll notice with 6.2 when you select a template, you can just click on the template and then you can start editing your template. So one of the main things that I wanted to highlight with regards to a template is that it's important to differentiate between the reusable parts and the dynamic parts. And let me explain this. So the reusable parts are the static parts, your header and your footer because that will be reused. It will be reused across the pages that has been assigned to this template. So every page that has been assigned to this template will share this header and this footer. But of course the dynamic part is the part that changes. And that is of course the content part. Now you will notice we don't add content in this template, right? We've added the static parts. So you'll notice I've already created a header year and I've already created a footer. So those are the static parts that won't change. But if I open up here in my list view, here you will see the post content block. So this is the post content block. It will display all the blocks in any single post or page. So every page will have its content, right? And every page assigned to this template will then share this header and footer. But we add, as I mentioned, we add our content to our page, not here. The content from our page is pulled into the template by the post content block. Okay, so that is a mouthful, a bit of an introduction to templates. So any questions with regards to what I just said? Mark Andrew, maybe something you wanted to highlight, something that I missed before I actually show you how to assign templates and so forth. That was all very clear here, Wes. I'm on board and I didn't see any other questions from the chat and we saw the screen share issue. So great. Great. Well, thank you for that. Thank you for solving that issue. Okay, so I've got a different test website where I want to show you how to assign a template or to change a template. Now you will remember just to highlight this and I did this for that reason. If I return to my dashboard, remember I selected a static page. So let me just kick on reading. Remember I selected a static page. So if I go to my site editor and I click on templates, you will notice that it takes us to the page template. Okay, so let's see what that looks like on the front end. All right, so there's our home page. As you can see, there's the static part, static part and here is the content that is being pulled in by the post-content block. Again, if I click on sample page, same thing. Header, footer and the content that is being pulled in by the post-content block. So if I, this is the sample page and if I go to pages and I click on sample page, you will see that here's the content, right? We did not add that to our template. And if we click on settings, you will notice that this sample page has been assigned to the default template, which is the page template. So the default template is the page template. And of course this is where in the template editor, this is where you can also assign a different template to a page or to a post. Okay, so let's jump to my other test website. This is a photography website. Let's see what theme I have installed here. All right, so I'm going to click on themes and here you will notice the block theme I've installed here is the 2022 block theme. The one thing I still want to do is, oh, that's fine. I mean, you have seen on my other test website, I have applied the, or I've added the beta tester plugin. So we can see what it looks like in 6.2. Yeah, I've actually not done it and I haven't added the Gutenberg plugin. So the UI will look as you will see it now when using WordPress. Okay, so let's go to settings and see here. If you go to settings, you will notice that this time I selected my home page to be my latest posts. All right, so I don't have a static home page that I've selected, my home page will be latest posts. Okay, so let's make our way to our site editor and here you will notice it says home at the top. And it says home at the top because I decided to keep my home page, my latest post space so you will notice that if I scroll down now, my latest posts will be displayed here and this is my home page, right? Now, if I open up my, now here you will see it looks a bit different again because I haven't, I haven't opted in for 6.2. So if I go to settings, so if I go to templates, you will notice this is my home page template, the one that we were just on, right? And let's say I click on my page template, you will notice that my page template also has the same header, but let's say I wanted to change that. Let's say, no, I want my home page to have this header, this structure, but I want my other pages, these pages, the weddings, commercial, journal and contact us. Let's say we want those pages to have a different structure, a different header, a different footer. Well, of course we can do that. Okay, so I'm gonna open up my list view and as you will see, we are going to edit our page template now. So let's remove this header completely. But we don't actually have to remove it. Let's, okay, let's remove it for now. You can replace it as well. Okay, remove block header and let's say insert before. And now I'm gonna add a new header to my page template. Okay, so I'm gonna choose one that I've already created. Let's choose an existing header or create a new one. So here's another one that I created, another header template part. And as I mentioned, we use template parts to add structure to our template. So I'm going to select this header template part that I've already created. All right, I've used the, you'll notice I've used the cover block and I've added a row block at the top with my logo, my navigation menu, et cetera. Okay, so now let's get saved. So now you will notice that my home template looks different than my page template. Cool. So let's move back to the dashboard and now go to pages. And for example, one of our pages was commercial, right? I haven't added any content here, but you could. And now you will notice, you will notice in 6.2 it just says default template, but the default template is the page template. So we know that this page and our other pages have been assigned to the page template, not the home template. And to reiterate, if we go to settings, reading, we said we want our latest post to be our home page and therefore the home template is applied to that page and it displays our latest posts. Okay, so let's go to the front end of our website and here we see our home page and it's displaying our latest posts. And now if we go to one of our other pages that has been assigned to the page template, remember this has been assigned to the home template, if we then click on commercial, we will notice that this page will now be, let's go to our context page. You will notice that this page has got a different header and because we edited the page template. Okay, maybe let me stop there for a moment and see if there's any questions or anything I need to clarify. Maybe I will get back to the question that, let me just scroll up there. Yeah, no question so far other than that one. And the question was, what's the difference between the front page and the home template? And what's their relationship to that WP admin settings? Okay, so I think this is what I'm trying to show now. When you select your post page as your home page, then the home page template applies. But if I look at my other website and I hope this will clarify it. So let's go back to this test website. I remember, yeah, I selected a home page or static page. So what you could do now, if you go to your, and you'll notice that this page, this home page, let me just show you, if we go to pages and you will see it says home there. So let's click on home. Do you see that this home page is applied to the page template? So therefore, this home page of ours, our static home page, will have the same template as all our other pages. And this is where you can now use the front page template to change that. So if you wanna go back to your site editor and we go to templates, and this is actually something that, the next thing that I want to get into is, we've got these built-in templates, right? But you can also add new templates and even a custom template. So if you click on the plus button there, it says add new template. And now we can add a front page template and it says displays your site's front page, whether it's set to display latest post or static page. The front page template takes precedence over all templates. So that is something that you could do if you wanted to create that. So you've got that option and then you will know that it takes precedence over all templates. But as you can see, you can also add other page templates. You can add an author template, a category template, et cetera. And then at the bottom, you can even create your own custom template. And that's what I'm gonna focus on today is creating a custom template. Nicely done. That appears to have answered Victor's question exactly. Great, I'm so glad to hear that. All right, any other questions before I move on to creating a new custom template? Okay, so let me move on to my new test website. Now some of you maybe will, if you were in my online workshop about creating a photography website, you will maybe remember this website, this test website of mine. I'm actually gonna use this test website to display or to show how to create a custom template again. Okay, so I'm gonna go to my front page and you will notice my photography website that I created, right? Here's the footer and here is the header. But then I decided I have a, I want to have a gallery page or actually two gallery pages. So I've got some sub menus here. So I want to show folks the photos that I'm taking for my test website. And I take action sports photos and I take commercial photographs. So I wanted to have a, or gallery pages and I decided I want to have a different template for these gallery pages. And then I just said, okay, I'm gonna create a custom template and then applied to this gallery's page. It's click on the action sports and here you will notice I've actually, I've kept my footer the same but I've wanted a different header. And I achieved that by creating a custom template. Now technically you could even use the blank template. So let's go to our editor. Okay, let's open up. Let's look at templates and let's open up our page templates. And you will notice that this is the structure we've created with our page template using our header template parts and our footer template parts. Now, as I said, you could technically probably use the blank template if you wanted to. You could use the blank template and create a specific structure and then apply that to your gallery's page. But I decided I wanted to create a custom template. So I said, add new and then I went to create a custom template. So this is a blank template that you create from scratch. So let's say, for example, a gallery, let's call it gallery template and let's say, create. Okay, when we create this gallery template, it will just use the header and footer from your page template. But of course, we wanna change that now. So the first place we're gonna go to is we are going to create a new header template part. Okay, so we'll keep this as is. We'll come back to our gallery template now. Let's go to gallery templates. So I'm actually just gonna copy some blocks to make life easier for myself. So let's template parts, online workshop photography. So let's open my list view and let's say copy block, right? And there at the bottom it says copy cover to clipboard. And now we're gonna go to template parts and I'm going to create a new header template part. So let's select header because this is a header template part and let's call it my new gallery header. And then I can say create. And let's paste those blocks there. Now you will notice it looks like this. If we save, we can just click refresh and then you can see that. Let's open my list view again. I'll select my cover block and now I'm just gonna replace the image. And I've already have an image from my media library and I'll select this one. Great. So there's my new header template parts. I'll save that, okay? Then I'm gonna go back to my custom template that I created and I call that gallery template. Now something that's really important. If you change anything to this template part here and you save it, it will basically update that header template part everywhere else it's been used. So you wanna be very careful modifying anything here. So we are just going to remove this one completely, insert before, and then we are going to say we wanna add a new header. We'll choose one that we just created and this is the new gallery header we created. So we'll select that one. I'll save it. And now we know that our new custom template is ready to be used. So now let's make our way back to the dashboard. Let's go to pages. So if you look at your about page, just to clarify that, you will notice your about page is assigned to your page template, right? So that's what we want. If we go to one of our gallery's pages, Action Sports, you will notice I've already assigned it to a gallery's one, but let's go to the one that we just created. So yeah, you can, let's say for example, you modified the blank template and you added the same structure, that would have been fine and then you could have added selected blank. Here's another. So these are just ones, they are similar, but these are the ones that I created, but this is the one that we created, gallery template. So let's assign it to the gallery template. Whoops, let's make sure gallery template, it's been assigned, it's updated. And again, if we go to the front end of our website now, if you go to your about page, remember this is the page template, but if we now go to gallery's and Action Sports, we know that we added or we assigned a different template to this page. All right, I see there was a question. So what if you started creating on a front page and forgot to set the home page? What is the workaround for this? Well, as far as I know, what it said there is that the front page will take precedence. So the front page will be your home page. That's how I understand it. Okay, so this is creating a custom template. Yeah, Valerie, you're welcome to ask your question in the chat. All right, so as you can see, templates put the power in your hand. Well, Mark Andrew, maybe, oh, there was just a question from Valerie. I don't think others can see that now just about using code. So these sessions are just for users and not for developers. So yeah, Valerie, unfortunately in this session, we won't be going into any code, but you can keep an eye out for Jonathan Bossinger's online workshops. He is a coder and developer. So most of his online workshops will be covering that. All right, there's another interesting question. Is there a shortcut to access the customizer now that it's disappeared? Well, I don't know if that is because you want to add CSS because technically you don't need to customize it because you can do everything in the site editor. But let me show you the exciting thing about 6.2 and Mark Andrew, maybe I just need you to help me here, but the great thing about 6.2 right now and everyone else is that you'll be able to now access CSS in the site editor and with the 6.2 release. So let me go to my website here. Yeah, this one is the one that will show you what things will look like for the 6.2 release. So let me just click on the template and hold on. Now I need to try and remember where this is. Oh, there we go. All right, so for everyone when 6.2 release when it takes place, when you're in your site editor and you click on styles at the top right and then you click on the three vertical dots here next to styles, it says additional CSS. So then if you click on additional CSS, this is where you can add your CSS. Cool, so I hope that's helpful. Wes, you can also do it on a block by block basis, correct? I think so. Let's check. So let's go to a block and let's say, for example, the buttons block, yes. Then here at the bottom, you can say additional block CSS. Yeah, correct. So of course, the one that I showed you is for your global styles, but then this is for your specific block. Cool. All right, so one thing that I also wanted to discuss, this is actually, this was my online workshop last week. Last week we looked at, I'm not gonna go into this, but lastly we discussed customizing your single template and customizing your four template. I just wanted to remind you that you can do that of course as well. So if I go to this website, and I go to my editor, I just wanted to remind you of these templates. The 404 template. So the 404 template displays an error page, right? So at the moment, this is what my error page looks like because I've customized it. So you can customize your 404 template to look the way that you want it to look. And your single template, your single template provides the structure for how a single post will be displayed. So you can of course, let's open the list view. You can change this. So at the moment when you open a single post, you will have your post title, then you'll have your post featured image. Yeah, you've got a separator block, then you've got your content. But of course, you can change this and say, no, I want my post title to be centered. And no, I actually want all of these things, my post date, post author categories. I want those things to be, I'm just going to drag it up. I want it to be below my post title. And then I can say I want it to be center. So you can decide how you want your single post to be displayed. So if I click save, there we go. Now this also brings me to managing your templates and template parts. So as you will notice, I've just changed my single template. And I said, I want my single post to be displayed this way. But let's say no, this is actually not what I want anymore. Then we can go back to our templates. And then at the bottom, it says manage all templates. And if I go to my single template, the one that I've just customized, you will see below the name of the theme, it says customized. If I click on the three vertical dots, you can say clear customizations. And then it will revert back to the themes template. So let's say clear customizations. All right, something else. I actually want to show you, if I go to the front end of my website and let's see what it looks like on the front end and let's make a mistake to see our 404 page. So this is what my 404 page looks like at the moment. This is the one that I customized, right? But if you want to revert back to your 404 template provided by your theme, you can go to editor, templates, manage all templates, and then let's clear customizations. And if you open up your 404 template now, you will see that it reverted back to the default template provided by my theme. The other thing that I also wanted to show you, when you go to your site editor or to the editor, or let's rather do it on my other test website where I've got the 6.2. If you go to templates, manage all templates, you will see I don't have any custom templates that I've created yet. But let's say for example, I create a custom template, example custom, let's just call it that now, it's created. If you now go to manage all templates, you will notice, sorry, I added that twice. But yeah, you will notice when you click on the three vertical dots, you won't have the option to clear customizations because this is your own template that you created, but you can rename it here and you can delete it here. So I'll just go ahead and delete my custom template. All right, any other questions folks? Looks good here. We had one in chat, but I think we solved it about the customizer and it disappearing when you're using a block theme and not. Yeah, great stuff. Thank you for answering that, Mark Andrew. I see there's another question, can a template pod be duplicated? I think I showed you this earlier on, but yes, you can just copy the blocks from the template bots. So for example, let's go to template bots again and then this was my online workshop photography header. You can just copy the blocks from here. Or let's actually see if I can copy the blocks from here into a different website. I wanna see that. So template bots, let's try this out. I'm gonna create a new template bot, a header. I'm gonna call this copy template bot and see if this works. It might not. So let's say create, whoops. Did I just create the template and instead of a template bot? Nope, that was a template bot. All right, so there's my copy template bot and now we are in template editing mode. Let's see if I pasted here what happens. I don't think we can. Copy block, let me see again. Oh yeah, that's interesting. Of course, this is my logo from our other website, but yeah, it picked up my logo from this website. So interesting. So it did copy the structure. But any case, as I mentioned, you can copy your blocks here and then if you go to template bots and you create a new template bot, you can paste it there. But if you click on the three vertical dots next to a template bot, you can delete it or of course you can create a new one. Yeah, and I won't show it how you can just copy and paste it again because I think I've showed that earlier on. All right, so, Mark Andrew, did you technically answer that question there? Yes, it was about reusable blocks in general and how they affect things globally. So is that the same as a template part or what do we do in that case? No, no, you are completely right. You want to, I just want to see what the question is. Do reusable blocks work the same way like templates in which if you make the change on one, it will be, yeah. Okay, it will change globally, that's correct. So Mark Andrew is completely right. You can detach it from being a reusable block and then when you make changes, it won't change globally. But yes, reusable blocks work the same way. Well, that is everything I planned for today. And I'm just curious to see if there's any other questions or something that you want me to go over again or maybe something that you wanted to also highlight. There's one more right at the bottom from Rihanna. All right, yes, there's a question about can you use different logos and the answer is no, you can only use one logo for a site. So, yeah, sorry about that Rihanna. You could still insert an image and scale it down on any of the headers you want, I believe. Yes, you can definitely do that. So let's, yeah, you probably don't have time for that now but yes, you're all right. You can add an image and scale it, absolutely. Well, thank you everyone. Thank you for your time. I hope that you will be able to use templates more confidently. And as I said, it puts you in the driver's seat which is the advantage of using block themes. Thank you very much everyone and thank you, Mark, Andrew and we will see each other next time. Have a good one. Thanks Wes, thanks everyone. Ciao.