 Hi, good day everybody and welcome to today's session. Our topic for today is customizing the single template and the 404 template. So I thought let's start by talking about templates itself. Now, as you know, a template provides the structure or design for how a page is displayed. So the single template displays single posts and the 404 template displays error pages. And the first place we're going to stop is the single template or customizing your post content layout. So every block theme comes with the single post template that provides the structure or the design of how a single post is displayed. So the query loop block displays the posts, but the single template provides the structure for how an individual post will be displayed. So for example, if you land on the blog page and you see all your different posts, if you click on that post or a single post, it will open up. And the single template provides the structure for that single post. Now a 404 template, a 404 page is also known as an error page or page not found. And it is the content a user sees when they try to reach a non-existent page on your website. And the 404 template allows you to create a custom 404 page that is unique to you and also hopefully engaging. Now let's jump to my test website. And then let's first look at how you can customize your single template. So let's make my way to my first test website. And I just wanted to point out that I am using a block theme, the 2022 theme in this case. And I've also activated the Gutenberg plugin. So we will see what WordPress is going to look like when a 6.2 release happens. All right. So the first place we need to go to, of course, is the site editor. Because the site editor provides or allows us to edit our templates. So if you go to Appearance and click on Editor, it will take you into the site editor. And here you will see the new UI. I just wanted to highlight that the navigation will be actually removed from the 6.2 release. So you won't see this. You will only see templates and template parts. So let's click on templates and then make our way to the single template. And as we said, the single template provides you the, or allows you to change the structure of how a single post is displayed. And when you click on the template, you can immediately start editing. But I thought, let's open up the list of you and see how this template is structured. So you've got your header, you've got your footer. And then when we open up our group block, we will notice we have the post template and post title block, I mean, the post featured image. You've got a separator block. You've got your post content block. Now remember, we don't add any content to our single template. This is only to provide structure. So all the content from your post will be pulled in by the post content block. And then below your post content block, we've got another separator block, we've got a spacer block, and then we've got our post date block, post author block, and the categories block and the tags block. And then another spacer block and separator block here at the bottom. Now let's see what that looks like from the front end. And remember, this template is provided or this default structure or template is provided by our team. OK, so let's make our way to the front end of our website. Go to our blog page and open up one of our posts. And here we can see the post is being displayed in this manner. So we've got our post title, the post featured image, the separator block, our content. This is where your post content block was and the post date, post author, categories, tags, and your separator block. Now, of course, you can change this. You can customize this to suit your needs. All right, so let's make our way back to the editor and make our way to a single template and make a few changes. So I'm going to change this template twice to show you what can be achieved. So let's open up our list view. So firstly, I'm going to center my post title block. So if I click on a line, you will see you can change it to wide width or full width. And if you click on, let me see again, sorry, a line text, you can align it to center. Now, something else that I wanted to do is that I wanted to bring the post date or the categories and tags blocks. I wanted to bring that to the top below the post title block. Now, instead of deleting everything here, we can actually use our list view and drag all of this to below the post title block. So we see our post title block is here. Let's click on post date and you will see all of this forms part of a row block. That's why they are next to each other in a row. And now we can merely click, hold in and drag this up to below the post title. And then I also want to change note, not that one. I wanted to change the justification to center. Great. I want to leave my post featured image there, but I thought I want to get rid of some of these separator blocks and spacer blocks. So I can do that in the list view as well. It scroll down, remove separator, remove the spacer block. Let's go down. There's some more spacer blocks. Remove spacer, remove spacer. And then I'm also going to remove that separator block. Whoops, it stood you in the list view again. Oh no, let's leave that separator there because then there is a clear separation between your content and your comments block. All right, so we've made a bit of a change. And let's see what that looks like on the front end. All right, let me just click save. Here we go, site updated. And then let's check out the front end again. Block page. And now we can open up our post. And now you will see the way your single post is displayed or the structure of your single post is different. So as you can see, we have made a few changes. But if you're not happy with these changes, you can always revert back to your original template. So if we go to our editor, we can go to templates. And yet at the bottom, you will be able to click on manage all templates. And of course, if you scroll down to the single template, you will notice it says customize. Now in the past, there was usually a blue dot there at the top that showed you that this template has been customized, but now it actually tells you customize. And there's three vertical dots next to it. And if you click on that, it says clear customization. So we can go ahead now and clear the customizations. And then it says use the template as supplied by the theme. So when we clear customizations, we can open up our single template again. And we will notice that all our changes are gone. Now I wanted to show you another way that you can display single posts. And what I'm going to do now is I'm actually going to use a cover block as a header and and display my post-featured image in my header through the cover block. OK, so this is my second example. And let's see what that that's going to look like. So I'm going to open up my list view and I'm actually going to remove my header. And I am going to just want to see what's in this group again. I am going to remove my post title block. I'm going to remove my post-featured image block because that's going to be part of my cover block. And I will remove my spacer block. We can remove that and it's removed that spacer block as well. Right now, above that, we're going to click on the group block and it's going to say insert before and out above that. We are going to add a new header and we are going to to start blank. And we are going to call it single. Template header, right? And now we can start building our header right here in the single template. So I'm going to click on the insert and I'm going to add a cover block. Now, usually, you can upload an image from your computer or your media library because, as you know, the great thing about a cover block is that you can add text over a video or over an image. But we are not going to select an image from our computer or media library. We want to select the use feature feature image option. Great. And now, when a single post is going to be opened up, the feature image from that post will be displayed through the cover block. All right, now we can start adding the text that we want to have over the image. So let's start by our navigation menu and logo. So we're going to add a row block. OK, on the left hand side, we can add our logo, our site logo. And on the right side, we can add our navigation menu. So let's add a navigation block there. Now, of course, with 6.2, you will notice if you want to browse through some other navigation menus that you have, you can click on the three vertical dots there. And we can select one of the other navigation menus that we've created. Great. All right, so I've selected my navigation menu. Now I will select my row block. Now, as you can see, the logo and the navigation menu are right next to each other. We want to split that so that the logo is on the one side and the navigation menus on the other side. So when you select the parent block, the row block, you can go to your sidebar settings and below justification, we are going to select space between items. And when you select space between items, you will see the navigation menu goes to the one side and, of course, the site logo stays on the other side. Right, we can even enlarge this site logo a bit. There we go. Now, below our row block, we are going to say insert after. We are going to add our post title. So the title of that post. And we are going to say we also want to align the text to center. Now, one thing that we also want to remove. Is the post date, post author, post categories. We want to remove this year. So let's remove this row block because I want to only add information about the post dates and the post author. So let's remove this row. And also the space of luck. Yeah, here we go. Let's remove the space of luck as well. OK, so we remove that. Of course, the post content block will stay where it is as. That is where the content from the post will be pulled into. OK, so. I'm going to select my post title block and I'll say insert after. And now I just want to add the post date block. I forgot one step. I'm jumping the gun here. So let me just undo that because I want the post date and the post author block to be next to each other. So I need a row block for that. So let's add a row block and on the one side on the left side, we will add the post date block. And then on the right side, we are going to add the post author block. All right. So let's select our parent block and also change the justification to center. Now, something else I want to do years. You can see if you click on the insert of between these two, we can add another block. So I'm going to add a paragraph block and I'm actually just going to add a full stop there and I'm going to make it bold. So just to add a bit of a different style there. But something else I see now is the space between the full stop and the post author and the post date blocks are quite big. So if I select my row block, we can change the block spacing between these three blocks. So let's see if I go to styles and scroll down to block spacing. If it's zero, it's drag it to one. There we go. If I drag it to one, you will see there's less space and that works better. OK, so we've set up our structure here. Something else that we still want to do is look at the opacity and overlay color of our cover block. So let's select our cover block and then also click on styles. Now, at the moment, the opacity is 50. I first want to select an overlay color. So a color that will go over my image and I'm going to select a light color. One provided by my theme called tertiary. So let's select that. And because it's a light color, I'm going to make the opacity a bit darker. Let's make that 70 percent. So let's go ahead and click save site updated. And now let's see what our single post is going to look like on the front end. I think I still actually wanted to drag my cover block a bit larger, but we can do that now. Let's first see it select surfing. Yeah, I like I really like the way this is looking. So as I said, one thing we can still do is we can enlarge the cover block a bit. So let's do that. So quickly just jump back to our editor, templates, templates, single template. All right, let's select our cover block. Let's make sure we've selected our cover block. And let's just drag this a bit larger. Click save again, make our way back to the front end again. Blog page, let's open up our post. There we go. And now you can see that the post feature image is being displayed through the cover block. Let's look at another one. Blog, let's open up this post and you will see the same thing happens. Just a reminder, if we go to the back end of our website to our dashboard, and we go to posts, maybe there's somebody wondering about it. But if you open up one of your posts, you will you will add your post featured image in your post in the sidewall settings. So yeah, you will notice on the right below featured image, you can replace it there or remove it there. So let's look at Table Mountain, for example, as well. And you will notice I've added my featured image there. And of course, that's the image being displayed through the query loop block, but also then through my single template. Great stuff. Are there any questions? I know there was a question about adding images or adding a post featured image or the image that you want to add to your posts, how you would go about modifying or editing those images. And I would suggest using the website squish.app and yeah, you are able to edit your images before actually uploading it to your media library. All right, great. Let's move on to the 404 template. Now, as mentioned, the 404 template is is the template you're going to use to display 404 or error pages. So a 404 page is also known as an error page or page not found. So it is the content a user sees when they try to reach non-existent page on your website. And most people who land on a 404 page will probably leave your site immediately if they can't find their way. So an unattractive or unengaging 404 page leads to poor user experiences, experience. It increases the bounce rate of your site and will also therefore negatively impact your SEO. So the quicker you can get a visitor to the right place, the better. So I first wanted to look at the 404 template that comes with my theme. And then I want to show you one or two or two examples of creative 404 pages. And then I will show you and how you can modify your 404 template. So first off, if I go to the front end of my website, this is my new test website, and let's say I search for something wrong. You will notice that if you scroll down, it says 404. This page could not be found. Maybe try a search. All right. And there's a search block. Now, this is the the template that comes with my theme. But I want to show you one of my favorite 404 pages. And that's the the Pixar one. I think we all know Pixar. They make some really good movies for kids. But actually, it's just that it's good for for grownups. So let's do the same. Let's make a mistake and see what happens. And it says, oh, don't cry. It's just a 404 error. What you're looking for may only be misplaced in long term memory. And then you've got a thorough footer. And then at the top, you can immediately find your way through the rest of the website. But what I love about this 404 page, it uses humor and it just makes you smile and it wants you to stay and kind of search some more. The other example I wanted to show you was this one from Tindrick. So let's see what happens when I go and search something correctly. Yeah, it says 404 page not found. And what's really cool is how they've used their logo in the 404. It says, can't find what you're looking for. You're probably not looking in the right place. And of course, it's a play on words because this person is probably also looking in the wrong place. And what I like about this 404 page is also that go to home page is kind of right in the middle that drags your attention. So if you click there, it will take you back to the home page where you can find your way from there. So let me show you how you can edit your 404 template. Again, we are going to make our way to. The editor, right. And we are going to click on templates. And this time we are after the 404 template. And here we can see the layout of our 404 template. What I'm actually going to do now is I'm going to remove the header. I'm going to remove all the information here. I'm just going to keep the footer. And I'm also going to use a cover block again to create my own engaging 404 page. So I'm going to say insert before and I'm going to add a cover block. And this time I am going to select an image from my media library. As I really have an image that I want to use and I will select that. The next thing I will do is I am going to drag this further something else. I'm just going to click undo something else. You could have done if you selected your your cover block. You could have selected toggle full height. All right. Now the first thing I'm going to add is I'm going to add columns block. And I'm going to add two equal columns. And on the left hand side, I'm going to add a paragraph because I want to add the text. We've got an astronaut flying through space here. So I'm going to say keep gone and make sure you watch your oxygen levels. And I'm going to say exclamation mark. And then of course I want to enlarge the text. So let's go to size. I'm going to create, I'm going to set a custom size. And let's say I want this to be 40 pixels. For now, we'll see if that works. And below that I also as Tendrick, I want to have a buttons block that will. That will take my visitor to my home page. So I'm going to add a buttons block and say take me home. I'm going to make that bold. And I'm going to change the background color to white. As it's got a good contrast with the black background. And I'll make text black. And then I'm also going to change the radius to 10 pixels to give it a more rounded effect. We can even say 20. Great. Now, one thing I also wanted to mention with the color block as my previous example. Always remember to add your alt text for accessibility, but also for SEO. Something else that I wanted to mention is that you must also add a link to your buttons block. So if you select that, you will always add a link to the buttons block to take you to your home page. All right. On the right side, I'm going to add my navigation block or my navigation menu. And then I will also use styles and I'll say I want this to be large below size. I'm going to say I want this to be large. Now, the next thing I want to do is I want to send the information on the inner left column to the bottom and the navigation menu to the top. So I'm going to add a spacer block. It's first press enter. I'm going to add a spacer block above my text in my left column. So let's add a spacer block there. And now if we drag this, that information will let's do that for now. And let's just bring that down a bit. Now, the other thing about my navigation block, I also want to change the justification to the right and send that to the right. I'm going to add some more padding. And once I've added my padding, we can play around with the spacer block a bit more. So for now, let's just close this. As you can see, we want to add some more space around the text. So let's make sure we select our parent block, our cover block, open up our settings and then click on styles. And then for padding, you can just use the slider again or set a custom style. And let's make this seven. Okay, let's close our list view and see what that looks like. And that one, I think this can actually, the text can go down a little bit more so that it doesn't overlap the arm. So there we go. So there we go. We've got our own custom for template and hopefully someone will also enjoy the human. It will take them to the homepage. And of course, you also have your navigation menu and you also have your footer in place. So let's save and see what that looks like from the front end. Site updated. All right, let's make our way to the front end. And let's make a mistake. Search for the wrong thing. And there you go. Your new custom for for template. That's hopefully more engaging. And we'll, we'll keep your keep your visitor on your site. Now, the other example that I want to show you is using a full pattern. Okay, so if you make your way to the WordPress website and hover over download and extend and you go to patterns, you'll be able to scroll through various patterns. That's ready for the picking. And it says add a beautifully designed ready to go loud to any WordPress site with a simple copy and paste. So these are pre designed layouts that you can use on your site. You can just copy and paste and then change it according to your needs. So when it says search patterns, I'm going to type in four four. Now the great thing of course is you can also Google or search for creative for four pages and get some inspiration there. That's what I did for my example. My first example, but you can also go and search for four for patterns. And then you can can add them to to your four or four template. I must say I like this Laurel and Hardy one. And yes, also an interesting one. It's open it up. It looks like the person is trapped. And it says something with wrong. And of course you've got your link to your homepage or the contact page. Now, yeah is actually the pattern that I'm after that I'm going to use today. So I'm going to say I want to copy. So you copy this pattern. And then you make your way to your your website. Now the one thing we we first need to do of course is go back to the editor and clear customizations. So let's go to templates, manage templates. And then we know we've just customized it. So we're going to say clear customizations. And if we click on the four or four template, everything's back to normal. Okay, but we are going to delete the header again. And we are also going to delete this text and we're actually also going to delete the footer. We want to blank for a full template. And now I'm just going to say command V or you're going to just paste the pattern that you just copied from the pattern directory. And now you can start and you can start editing. So I really like this image of the ship which says we're lost not shipwrecked in the optic loss though. So I like this I'm going to keep this here. So I'm going to select that. And I'm just going to make this a bit larger. Sorry, click on settings. And let's say we want this to be 30 pixels. So we've enlarged that a little bit. And below that, I want to have my take me home buttons block again. So I'm going to add my buttons block, say take me home. Here we go. Let's make that bold again. Click on styles. And background color this time is going to be black. And let's make the radius 100 pixels. And then also change the, sorry, the justification of the text. Let's make that center. Here we go. And then, of course, remember to add the link to your homepage. No, shouldn't press enter. Apologies, let's select that buttons block again. Click on the three vertical dots and say, let's use our list view. It's like the parent block and say insert after. So now below this, I actually want to add a search block. So type in forward slash search. And let's add the search block. Now at the moment it says search day and it also says search day in the, in the, in the buttons block. But there's an option here, the third one and it says use button with icon. So I want to my, I want my button to show that magnifying glass icon. So I'm going to select that and now you will see the magnifying glass. And the last thing I want to do is I want to change the background color of my search block to black as well. And I also want to change the radius to 100 the same as my, my other buttons block. So let's close and see what that looks like now. Here we go. And now I am going to add, I'm going to say, I'm going to select the group block and I'm going to say insert after now I'm going to add a footer. So I'm going to type in footer forward slash footer. And this time I'm going to choose a footer pattern that comes with my theme or that's provided by the theme. So if I click choose and scroll down, sorry, you will see it says patterns. And here we can scroll through a variety of patterns. The ones at the top were ones that I've already created. And then you can choose a pattern from this list. And I actually want to select this one with, which says footer with social links and copyright. So let's click on that one and then it will insert. Now the one thing I want to do is I actually want this to have the same background color as the pattern that I added. So I'm just going to steal the Xcode or copy the Xcode from my pattern. So if I select this group block and open up my styles. Sorry, my settings and go to styles. You will notice that that color is already there because that's the background color. So I'm going to open that up, click on custom. And then there's an option where it says you can just you can highlight and copy but you can just click on copy. And I've copied that Xcode and I can go back to my footer, open that up, click on the group block. Go to styles or that group block, go to background, click on custom. And then I'm going to remove that. And I'm going to paste the Xcode there. There we go. So now my footer has got the same color as my pattern. Great. That's exactly what I wanted. Now I just wanted to add a navigation menu to my footer because this is I want to I don't want to header or my fall for template here. I've got my my homepage button. So I thought let's add the navigation menu to my footer. So I'm going to select my social icons and let's say insert before at the top. And let's say forward slash navigation and align that to center. And then you will notice at the bottom it says site title it's just placeholder. So I'm going to add my site title so I'll remove the placeholder forward slash site title and then also change the alignment of the text to center. Great. And yeah, I have my new custom 404 template. And of course I've used a pattern to to make life easier for myself. So let's save that save and then see what that looks like on the front end. Great. It's me steak. And there you go. My new 404 error page. And as mentioned, you could have used any of these patterns. Let's search some more. You could have used any of these patterns and then modify it to your liking. And that brings us to the end of today's session. And I hope you will feel more confident now. I hope you will feel more confident and editing and modifying or customizing your single template and your 404 template. Thank you so much for joining us today and we will see each other next time. Have a good one.