 Good day, everyone again and welcome to today's session. We are going to look at setting up a header and a footer using a block theme. And I actually don't have extra slides that I wanna go through because I wanted to get straight into the demo and take us to the site editor to talk about headers and footers. And we are going to look at creating some examples. Okay, so let's jump out of here and make my way to my test website. Now, the first thing I wanted to highlight is the fact that I am using a block theme. So if you go to Appearance and then click on Themes, you'll notice I've installed the 2022 block theme. And if you were looking to add a block theme, I thought I'll just show you. If you click on Add New, that actually made it easy and there's a new tab called block themes. And if you click on block themes there, you will get a list of a variety of block themes that you can install and activate. All right, so yes, we've installed a block theme and as a reminder, with a block theme, one of the most important things will be using the editor or the site editor because that is where we go to customize our templates as well as site-wide styles. Now we're not gonna really talk about site-wide styles and changing our site-wide styles today. We are mainly gonna focus on creating a header and a footer. So of course, when we add content to our website, we will go to Pages and we will go to Posts to add content to our website. But we are of course not creating, we are not adding content to our website. We are adding structure to our site. We are adding a header and a footer. So therefore we are gonna make our way to the site editor to customize our templates. So as you know, when you have a template, these templates, it says they express the layout of your site with templates. So a template allows you to create structure or design for your website. And that is mainly adding a header and a footer for your site. And there are different types of templates that come with your theme and you can also install, oh, sorry, you can also add extra templates and even add a custom template. But before we jump in, I also wanted to highlight that, for example, the page template. Let's just talk about the page template for a moment. The page template, if a page is applied to this template, all those pages will share the same header and footer. So we are actually gonna, we are actually going to customize our page template today and we'll change the header and footer. I actually have a few examples up my sleeve, but of course, if we open up our template, let's just talk about the template for a moment and open our list view. You will notice there we have our header and there we have our footer. So those are in place, those are the static parts of your website, meaning those parts will stay the same across your website. And so all pages that have been assigned to this template will have this header and will have this footer. And if we open the group here, we will notice there's the post content block and the post content block pulls in the information from your page. So every page will have content, right? And the content from that page will be pulled in by the post content block. So you will notice I don't have a very creative header and footer, but we are gonna change that. So the first thing I wanted to talk about is the fact that WordPress has made it really easy for us by adding header and footer patterns to core. So we are gonna create some of our owners as well today, but I just wanted to highlight that as we start off. And I can go to this header that we have here at the moment and say, well, this is not what I want. I want to edit it. So when you click below on edit, if you click below the header on edit, sorry, that's actually not what I want to do. I don't want to edit that header. So let's just go back to our page template. But yes, if you want to edit this header, you can click on edit, otherwise we're gonna click on our three vertical dots. And there you have an option that says replace header. So we are gonna say, let's replace this header. Now there you will notice I've already, I've already created some template parts. And these are the examples actually that we are going to create today. So you've got templates and within your template, you've got template parts like header template parts and footer template parts. And as we said, the template part is the static part of your template. It's the reusable part of the template that will stay the same. So these are the existing template parts. So these are the ones I've already created and I'll show you how I did that. But then if you scroll further down, you will see a variety of patterns that you will be able to use, which you can choose and then you can start modifying it. So let's say for example, one of these speak to you, then you can merely just click on it. So I'm still just kind of scrolling through all of them and then I'm like, okay, there's one that I like, header with centered logo and background. So now I can click on this one. So now my header or my template part for this template has changed and now I can start modifying this whichever way I want to. So I also wanted to highlight that a great way for us to understand how a footer or header is structured is by actually looking at the anatomy of the ones provided by your theme or by call. So for example, if you open the list view and then your header, you will notice we've got a row block here and then within our row block, we've got a navigation block and then within our navigation block, you will notice which blocks have been added. Okay, so the first thing I wanna do is let's just change the background color. So I'm gonna go to my sidebar settings and click on styles and let's change the background color. The next thing I'm going to, I've already added my site logo. So this is a site logo block. So let's make that a bit larger. There we go. And now we can go ahead and actually add the pages. So now we search in our navigation block. We can, I've already created these pages in the dashboard. So these ones already created, you will notice it says their page. So that means I've already created that page. So now I can link it in my menu and let's say add link. The next one that I want is a menu because I've got a coffee shop. Again, I've already created this page and on this side, I'm going to say, I've got an about page. Let's add that one as well as a contact page. Okay, so open our list view again, select our navigation block and now you will notice our pages that we have added and there's our site logo block. And now we can also maybe enlarge this slightly. So let's open our styles again and let's just make the text, oops, slightly larger. There we go. So what I've done here, of course, is I have taken a pattern and I have quickly modified the pattern to meet my needs. So below this one, I'm just going to, I'm going to say insert after. I'm just going to look at another example. So header, click on header, choose. Now you will notice that the one that we've created is part of our template parts now. Sorry, not that one. My apologies, that's my other one. Okay, so for example, let's look at another example. Let's look at this example. Now you will notice one thing is that this is another header pattern. Now the one thing you will notice is that you'll see all these pages because it's a page list. So when you add a pattern, sometimes you'll notice that there's this page list, but don't fret, let's open our list view and let's open up our row block and our navigation. And this is where you will see the page list. So I actually want to edit my page list. So if you click on edit, at the moment you'll just see this page list, right? And you will see they're all locked, all these pages. So you can't really move anything around here. So let's click on edit. And now it says this menu is automatically kept in sync with pages on your site. You can manage the menu yourself by clicking on edit. So now I'm gonna click on edit. And now we can say, okay, well, we don't want, I'm just gonna say delete. So we can remove this block. I don't want this block here. Remove. And now we can start moving them around. So let's say home goes that side. And let's say our menu also goes that side. We can enlarge this slightly. And there you will see we have modified one of our patterns as well. So the thing I just wanted to highlight there is that you must edit your page list if you are working with a pattern. Now, of course, the same goes for a footer. If you select the footer, we can click on the three vertical dots. We can say replace footer. And now we can go to patterns. And look for patterns that come with your theme. There's a wide variety. Let's select this one. And now, of course, you can start modifying it to suit the design of your website. So yeah, I would suggest always kind of looking at the headers in the footers provided by your theme or core and look at the way they are structured. Okay, so let me show you some examples that I created myself. So if you click on your WordPress icon and you go back to design, you'll see templates and template bots. And this is of course where you create your header and footer template bots. And I'll show you, this is the first one that I created. And yeah, we are going to create some of these examples now. So let me show you how I created this header template bot. Okay, so I'm just gonna jump to this side. Again, we're gonna make our way to template bots. And then next to template bots, you'll see there's a plus icon, which is add new. Now we're gonna say we wanna create a new header. Yeah, I'm gonna call this example one online workshop. So this is the header we are going to create. And now you will see we've got a blank section to work from and now we can start creating our template bot. So what I'm going to do here is I'm actually gonna add a cover block because I want my navigation to be in front of an image. So let's add a cover block and then select an image from our media library. And the one that I'm after is this one. So you'll see I've also added all my images to my media library already. Okay, first thing, let's look at our opacity. So if you go to styles, you'll see the overlay opacity, the color, so let's select black just for more contrast with white text. And it's actually a bit too dark, so I am going to say 10%. All right, so the next thing I'm going to add is my row block. And of course with the row block, you can put things next to each other. So let's add a row block and on the one side, I want my site logo. And as I've said, I've already added my site logo. So I'm going to enlarge my site logo. Again, select the parent block and then on the other side, I want to have my navigation block. Okay, but now you will notice that it's open our list view. You will notice I've got a list, I've got a row block, but you will notice that they are next to each other and we want them to be apart. So what you'll do is you'll go to your sidebar settings, click on settings, go to justification and then click on space between items and that will create that space between the site logo and your navigation menu. So let's say space between items and there you will see it pushes to the other side. Okay, so let's just close this for a moment because I actually want, let's select our cover block, yes. And there it says toggle to full height. So I'm going to select toggle to full height and I see it's not actually doing what I wanted to do at the moment. So I am just going to drag this down. There we go. Now, the other thing that I wanted to do was I wanted to push this to the top of my cover block. So to do that, I'm going to use a spacer block. So I'm going to click on the three vertical dots, say insert after, sorry, not that one, not insert after, I don't want it to be below my cover block. So I'm going to say undo, it's first select my row block, click on the three vertical dots, say insert after and then I'm going to add a spacer block. And now I can enlarge my spacer block and the other content will push to the top of my header on my header template bot. And now we can start editing our navigation a bit. So let's select our navigation block and open our styles, sorry, not site-wide styles, open our settings and then choose styles. And then we are going to say, we want to click on typography and let's say we want to change the appearance. So if you click on appearance, you'll see there's a tick there and now we can start modifying the appearance. So I'm going to say I want this to be extra light, but if you go to size below typography, I want to say I want this to be large. And that is my new header. The one thing though that I still see is that there's not a lot of space on this side. So I would like to change the padding of my cover block. So let's select our cover block, open the styles again, first settings, styles and now we can change the padding to create more space around our content and click save. And there we go. That's our new header in place, our new header template part. Okay, now after we've saved, let's make this just a little bit larger still. Now I forgot that this is actually not the menu that I want. This is one of my other menus. So let's first select our navigation menu settings and then next to settings on the three vertical dots you'll be able to see, there's a list of all your navigation menus and I want my other navigation menu. So I'm going to select that one called header navigation and hit save. And there we go. Now we can make our way back to templates. Let's select templates, I'll page template. Let's remove this header, say insert before. I don't think it's saved early on when I removed it because I forgot to press save. So insert before, forward slash header. And now we can choose one of the headers. And here you will notice this is the one I created example one online workshop and I can select that and my new header is in place. So that is using a cover block. So before I continue, are there any questions before I show you my second example? So I'm going to make my way back to template parts so long again. And oh, there is a question. Is it possible to rename a template? So yes, if you, you mean a template part. So if you click at the top and let me just double check. If I go to template parts, so this is the one I created, right? So edit. So if you click on that little drop down button there, you can rename it there. Yes, new name. Okay, so you can't, so if you wanted to change the name of a template, so let me just save and see. I don't think the ones that come with your theme, you can definitely change the name of a custom template, but let's say for example, you select your page template and you edit that. So you can't change the name of that template that comes with your theme and with call. But you can of course, clear customizations of the template. Okay, so Larry wanted to see how it looks like to when we scroll. So yeah, sure. So let's go to the front of the website. Let's just click on home and you will notice that is how it scrolls. And then we can even see it on a smaller device if we click on inspect. So let's select toggle device toolbar. And you will notice that this is the way it will display on mobile. Okay, let's look at another one. So again, let's make a way to appearance, editor, click on template bots, click on the plus icon, which means add new, and let's say create template bot. We're gonna make a header and this is example two, online workshop, let's create one. So the first thing, so let me first show you the one that I want to create. So it's gonna go back to example two. So this is the example that I wanted to create now where your header is at the, your main navigation menu and site logo and things at the top, but you still have a cover block with some text here. And Ace, Robert, I see there's a question, what is the difference between a front page and a home page, please? So you can set a front page template if you don't have a home page template. So it's just, if you don't have a home page template, you can add the front page template as an option. Okay, so we are back in our template bots and we are gonna create a new one. Now for this example, I'm actually going to add a columns block first and I'm going to select three equal columns and then on the left side, I wanna add my navigation menu and then in the middle, I want to add my site logo. Now the one thing you'll see, my site logo is not displaying, it's because I actually have two different site logos. So I'm gonna replace and I'm going to say, I want this darker one. So that's interesting. So navigation menu, sorry, navigation. I wonder why that is displaying there now. So let's just select a different, so we want the header navigation, here we go. Let's select a different navigation menu and then on the right, I actually want to add a battens block and we're gonna say order online. Okay, and let's select a different style and we're gonna select the outline that kind of blends with our black and white and now we can enlarge this. Now if we open up our list viewing select the left column, there's an option that says that you can change the vertical alignment. So we want this to be in the middle as well as the right column. We want this to be in the middle and we can actually even change the alignment to say we want that to be center of that column and we want this, the navigation menu. We want this to be center as well. All right, so that's the first part and now we can select the parent block and say insert after. We want to add a cover block. We're gonna select another image. Let's double check which one is that. There we go, select the image and we are gonna say welcome and below that we are going to add some, let's say Lorem Ipsum is dummy text. Now to save time, I might just copy this and I'll show you what I did. I just made, let's just copy the text just to save some time and we can add the text there. All right, so now we can start editing so we're gonna say we want welcome to be larger of course so we're gonna open up our settings and I'm gonna actually create a custom size and say I want this to be 6.9 and then you select your other paragraph and I want to change, give a custom size as well and then we're gonna say I want this to be 1.4 pixel, rim, not pixels, sorry, 1.4 and then we can select our cover block and let's look at the opacity. I want the opacity, the overlay to be black and let's make this 40%. Okay, let's see what this looks like now. I still want to enlarge my cover block and then if you look at this paragraph, let's open our settings and click on dimensions and look at padding. The first thing I want to do on it, I wanna say I wanna align the center and now we can change the padding and bring it in a bit so that it's not to the edges and there we go. So and now we can go back to our template, our page template. Now you'll notice it's changed here because I've changed the site logo but we can remove this one now and we're gonna say insert before, forward slash header, choose a header and then you will notice here is the one we've just created, example two, save and now we can see what it looks like from the front. If we go to the front, let's go to our home. Now, one thing I see what I don't like here is I wanna add some more padding. I see it's quite high up there. So now we can just go back, select our columns block, styles and let's say we want to unlink sites. I just wanna look at the top and say, ah, I want some more, let's save that. Let's update that. Don't see that it's updating there though. Let's try again. What we can do, let's say edit site, go to templates page. So one thing we could do here, if you were wondering, we can select this and say insert before and we can add a bit of a spacer block, save and let's see now, there we go. So yeah, spacer block is a great way to fix things. But now I wanna show you something really cool. I wanna show you how you can add a sticky header. So let's say for example, you want this to stick to the top of your page. So when you scroll, that that will stay at the top. I wanna show you how you can do that. So if we make our way back here, we can actually just change this padding to normal because we've added the spacer block. Okay, so to do that, you need to wrap your header into a group. So if you look at that column, I'm going to wrap it in a group. Right, now you will notice it looks different here now. So let's just select this parent block and say I want this to be wide width. Here we go. So now I'll click save. So the one thing we must still do as well, I just wanna double check. So the group block, we must look at the background color of the blue group block. So let's look at the background color of the group block. Otherwise it will be invisible. You can see through it, transparent. So let's make the background white and now click save. So now that I've selected my group block, I can go to advanced in the sidebar settings. I just wanna double check position. Okay, so not advanced position. So again, let me just do that. So you select the group block now that you've wrapped your header into a group block. Yes, Debbie, I'll do this right now after this. And then I am going to select sticky and click save. And now you will notice, you can actually see it right here. If you scroll now, it will stay at the top. So that is how you can create a sticky header. You have to first group it, change the background color so that it's not transparent and then you can select position and sticky. Okay, let's move on to our footer template part. Let me show you the footer that I wanna create with you. So if we go to editor, template parts, footer example one and footer example two. So I'm actually gonna start with footer example two because what I've done is I've actually selected a pattern from the pattern directory to make things easier. Otherwise I have to build it from the start. Now, of course you can create, you can choose a pattern that comes with your theme or core or you can make your way to the WordPress.org website. You can click on that or hover over download and extend, go to patterns. And of course, there's hundreds of patterns that you can search and just add to your website. So I'm gonna say type in footer, press enter. And now you will notice there's many footer patterns that you can choose from. So I'm gonna go to my second page and here is the one that I wanted to use. So I'm gonna click on copy and we're gonna make our way to template parts. We want to add a new template part but this time we are gonna select footer and we are going to call this example footer two online workshop create. Again, we are in template editing mode so that we can just focus on this footer without any other distractions. And now I'm going to say command V, I'm gonna paste the pattern. And now of course, we can start modifying this to meet our needs. So the first thing I'm going to replace this with my site logo. So the cool thing here is that everything's in place, the structure's in place, the styling is in place. Now I can just add my own content. So let's select that and then we can say we love coffee and people. Better beans, better coffee. And let's make that italic. Now you will notice all of this that you see here, it's just basic paragraph blocks. If we open up here because it's dummy text. So we want to of course remove that. So if we select that, we're gonna keep the heading in place but now I'm just gonna select all of this in the list view and say remove blocks. And the same for this one because we wanna add our navigation menus there. Right, so I'm gonna remove the dummy text and now below need help, we can say insert after and we are gonna add our navigation menu. And now remember, if you click on the three vertical dots, you can select a different navigation menu. And the one that I'm after is called navigation because it says need help, you can go to shop, we've got terms and use or terms and conditions and the privacy policy. And now below learn more, we're gonna say insert after and add another navigation menu and then select header navigation with our main pages. All right, but one thing you'll see is we don't want them to be next to each other. So if you select your navigation menu and open up your settings, you will see there's an option called orientation and you can actually align your navigation menu horizontally or vertically and we want it to be vertical. So we'll select that one as well, open settings. We want it to be vertical and there we go. And now of course you can change the background color, et cetera, et cetera. Okay, but we said we're gonna create one more template parts. So let's click on add new, put a template part. Okay, so this was actually example one and the other one was example two online workshop. It's great. Now to save time, I'm actually going to not create that left side. So let's just add a gallery block here and let's select two, three, four, five, six, seven, eight. Let's select eight images, select R. And let's say we want, there we go, we want four columns and let's say we don't want any space between the images. So we're gonna select our styles and when you go to block spacing, when you drag it to zero, you will notice all the images will go next to each other and there won't be any space. All right, now below that, we want to start creating the rest of our headers. I'm gonna say insert after and I'm also going to add a columns block. Now this time instead of using a pattern, I'm going to do it myself to show you. So I'm going to select, I'm actually going to select four columns. So let's select the one with three, select our columns block and then change it to four. There we go. And now in my left, in the left side, I want to add a quote and maybe to save time, I'm just going to copy that. Now your coffee be strong and your Monday be short. So let's add our quote there and that was a no, no miss. And then below that, we can add our site logo or slash site logo. And then we can make that a bit larger. And then in this column, we want to add a heading and see how now I'm kind of doing everything from scratch. So I'm going to add a heading and let's say we want that to be quick links. Again, below that we add our navigation menu and I will see that page is actually saved as a navigation menu. So we are after header navigation and of course we wanted to be vertical. And then on this side, again, we can say we're going to add a heading and we'll say get in touch and to save time as well. I'm just going to copy this. It's the address, the number and the email. And I'm just going to say copy blocks and we can add that there. And then below that, we still want to add a link to our social links. So I'm going to say forward slash social links, social icons, and let's select Twitter, Instagram and Tumblr. And let's put just some dummy text in there as well. Now, if we select our social links or social icon block, we're going to change the color as well. So I'm going to open styles and I want to say I only want, I want logos only and I want the icon color to be black. And then on the right side, we'll change the size of the heading now. So heading and this is going to be our newsletter. Below that, we also want a buttons block which will say subscribe and we will also change the style to outline. And below that, we can add our opening hours. So let's copy our opening hours, copy the block and then paste our opening hours there. Now, this is quite large. So let's change, we can change that to large. Here we go. Now, the one thing we still want to add some padding to this columns block. So let's open styles, go to padding and create some more space around our content. Let's see what that looks like. So as you can see, in this case, I actually started from scratch and I used a columns block and then I merely started filling in my columns. And at the top, I decided to add some images. So now I can click save. Let's go to our page template. So edit the page template. Now go to the bottom. We are going to actually remove this one, remove the footer and then insert after. So forward slash footer and then we're gonna choose the one that I've just created. And now we can click save and let's see what everything looks like from the front end. Okay, so this was the pages. So now there is our sticky header and luckily it doesn't go over our footer, of course. And there's our footer in place. All right, so I'm going to answer those questions now. For now, I'm gonna stop recording. So thank you for joining us today. And for those in the chat, I will get back to those questions now. We will see each other next time. Cheers.