 And we are recording and we are live. So welcome everybody who's joining. I don't have cool background music this week like I normally do. I don't know why, I just decided not to. But welcome everybody. While you are joining, I've changed things up slightly. We don't have any questions this week. You can, if you haven't already, you can kind of start getting your local environment set up. We're going to go through the process anyway. But if you want to start installing activating the Gutenberg plugin, downloading and activating the workshop theme. And then optionally, if you want to check out the design we're going to be looking at, we will go through the process later. And then just if you want to say hi, say hi in the chat or say hi verbally. Nice to see some familiar faces, nice to see some new faces. Cool, I'm not going to hang around the usual five minutes today. I'm going to kind of get things going. Because there's quite a lot I want to cover today. I have set the session for an hour and a half. Just because I'd like to give us enough time to kind of play with things and do things and fill the things. I'm trying to not be too scripted today. So hopefully you're going to be building these things together. I do have a list of notes to follow, but I'm going to try and remember how to do things and see if I can figure out from it. Okay, so let's get on with the usual announcements. As always, welcome. And thanks to Thalma who's co-hosting with me today. We are presenting in focus mode as been normal. I know that one of our regular participants has been having some problems with focus mode. So if you're having some issues with focus mode, let me know, but otherwise we should be good to go. As always, you are welcome to ask questions either in the chat or verbally if you want to. And you are welcome to unmute to ask questions or as I say, post them in the chat. Then we will go through these links in a second. I'm going to grab these two links now and just pop them in the chat so that you have them. But we will be working with a pre-built theme that if you have some time to start downloading and installing, you can do. And then a pre-designed design that we will be working with. And I'll talk through where I got it from and how it works. The design is very simple. So we're not doing a very crazy design today. It's very simple. But it'll kind of give us something to work from. As always, if I'm going to fast, please let me know. I shouldn't be going too fast today because I'm not coding. I'm doing things in the editor, which is not slow. I'm just slow using the editor. But if you need to catch up or if you need me to show you how I'm doing something, please do let me know. And as always, we will be posting this session to WordPress TV probably sometime during the course of the day tomorrow. And I'll link it in the chat in the Meetup event. And if you're looking for more WordPress-focused content, please do visit learn.wordpress.org. Okay, today's learning outcomes. We're going to be looking at the WordPress primary templates. We're going to do a quick overview of the template hierarchy if it's not something you've ever seen before. And then we're going to be creating one or two primary templates in the site editor. Pure. If there's time, hopefully there is time, we'll look at how we can take that content up and put it in actual files. But we'll just be working in the site editor today. And we'll be trying to follow a specific design. So we'll be looking at the design and then trying to implement that design in the editor. And then obviously saving the template data. I said, my loss. Our objectives today are to review the template hierarchy, have a look at the theme JSON that we're going to be working with and I'll talk a little bit about where the theme JSON comes from and how you could put it together, but we won't actually be doing that today. Then we'll be looking at the current index template that is pre-built in the themes that we've got and kind of how that fits together. And then we'll start actually creating some pages and some template parts and doing all that kind of thing. And then finally, right at the end of this time, we'll export that data to files. A lot of this is stuff we've covered before, but it's good to kind of see the process, I think at least in kind of practice. All right. So to get started, if you haven't already, please install and activate the Gutenberg plugin. Now the reason that we need the Gutenberg plugin installed and active is because WordPress 6.1 that's coming out on the first of November is basically going to have all of the features that are currently available in version 14.1 of Gutenberg, which is the current version. I think it is 14.1, I can see the version number there. I think if you click more details, it shows you the version number. Yeah, 14.1.1. So we're effectively going to be replicating what WordPress 6.1 will be when it comes out in November. And the reason I wanna do that is because there's some really cool features coming. There's actually a fix for something if you were at the session that Sarah and I did last week, you'll remember we had some fun with you line wide. So WordPress 6.1 actually fixes some of those issues that we were having and you'll see it live in action today which is really cool. Yes, I did some research after that session. So if you haven't already, please get your local WordPress environment set up and install and activate the Gutenberg plugin. And then I'm going to ask if you are following along and if you are doing this process, please maybe three or four people just type ready in the chat when you've got that plugin installed and then we'll move on to the next thing which is going to be installing the theme. Okay, Jean's ready. This is my opportunity to have a sip of coffee. Okay, so there are some folks that are ready. That's great. Then the other thing that I mentioned was this theme that we're going to work with. So it's a theme that I recreated, pre-created, I guess is the right word. I'll actually download it a bit, but I'll download it again. And it basically just has a theme.json file and what's the name of it? And a index template that's already pre-designed and pre-created and then some blank files which is what we're going to build today. So if you download the theme from that link which is the first link that I posted in the chat, I'm going to post it again just for anybody who arrived late. What do I copy? Pop that in there. And then go into your themes area and WordPress and add a new theme and upload the theme from wherever you've saved it. Where's my desktop? There it is. So it's the let's code workshop theme. You can see that I stole this idea from Sarah from last week. She calls hers, I think hers is code with me and mine is let's code because I didn't want to reuse code with me. So that's installed. Let's activate that. And let's very quickly go through what's included in this theme. So I actually got a screenshot which is nice and let's have a look if we go into the editor. You're welcome to do this along with me if you want to. So it has an index template or pre-created, stop saying recreated which just has and I'm going to use the list view icon here. If you've ever seen the list view it's all three lines at the very top of the site that it's very handy because it gives you a view, an overview of your template content. And if I click here, then it shows you a dropdown. So it's almost like a tree view in a file browser or in a code editor, very, very handy. So there's literally just a query loop and inside the query loop there is a post template block which contains by default post title featured image post excerpt a separator post data in the space. So if you add a post template block in the editor and include all those other blocks inside it's called inner blocks and then the pagination at the bottom. And this is your standard index template for a WordPress theme. You can run a website with just an index template. I'll show you that right now. It'll be a very simple website. But if I go there, there's my first post and if I click on my post it'll show my post. Okay, the empty template doesn't work because there's no single there. It's because it's empty, but if it wasn't there it would just use the index again and just show the single post content. So you could run a blog with just an index template. I've done that before, which is quite fun. Then we have in the templates list there's the index template. Then we have a page template which is currently empty and we have a single template. And that's why you saw that single template error because there is a single template that exists but it has no content. If I remove that template, let's just do that quickly. Let's go over here and we go here. We can recreate it later and let's move zoom out the way so I can access my things. Oh wait, I can't delete it from here because it's in code, sorry. Let me switch to my code editor. And here's the theme and let me just delete that template. So it's the single HTML template. Just going to delete that and then we'll go over to the site and refresh. And there we go. So it'll still load the single post using the index templates. So you can run a full site, a full blog at least with just an index templates. That was probably how WordPress first did themes back in the day, just that English template. Okay, so that's that. Let me go back to there. And then we have, as I said earlier, there was the page which is empty in the single I've deleted. We'll recreate it later, no problem. Then we also have some template parts. There's a footer and a header. The footer is also empty. So there's nothing in there. And so is the header. And just to prove that to you, let me switch to the code editor. So let's have a look here. So there's the footer, nothing in the footer. It's just footer.html, nothing in the header. It's just header.html. There's my index template with all of my code which I designed in the editor and then just saved. And then there's the page template which has no code in it. Okay, so if everybody has got their theme installed, if a couple of people could just type ready in the chat to let me know you've got that installed. If there are any questions at this point in time about anything I've shown you, now's also a great time to ask questions while I have another sub copy. Okay, will you post this record later? Bailey, yes, I will. I will upload it to WordPress TV later and then I will link to it in the meetup event in the comments. We will record. It is recording. Let me just double check that. I'm pretty sure I did hit record. Yes, it is recording. Okay, awesome. So a few folks are ready. So I think we can move on. If you're not ready yet, don't worry. We're gonna go and have a look at the design now. The design is not important for you to have open on your desktop today because I'm going to be looking at the design while we're creating the templates. But if you want to open up the design it's the second link over here. I'm gonna paste that into the chat very quickly. And the design tool that is being used here is a tool called Figma. I don't know much about these tools because I don't do any design work. In my developer experience, my developer journey I was basically taking these designs from a designer and then turning it into a theme. So it's probably a bit small on your screens right now that's because Figma can go really, really big and really, really small. So I'm trying to keep it like that and I'll zoom into certain areas in a second. But let me just do something there. But basically, if you're like me and you've been working with WordPress for a number of years or you've been working with a web for a number of years you will remember the old Photoshop days or using fireworks or many Adobe products and designers would usually design the website as one of those products. And then things like Sketch came along and things like Figma came along and then Adobe bought Figma recently which was quite interesting. But basically, if you were a developer who didn't do any of the design work you typically got a design from a designer using one of these formats and then you would take that and you would do your styling and you would do your templates and you would create everything from events. If you were somebody who was a designer and a developer you were using probably one of these tools. Some folks used to design in the browser which I find quite amazing. Some folks used to use frameworks like Bootstrap and like Tailwind but the sort of traditional approach was designer would design hand it over to developer and developer would then develop that into a website or into a theme. So this theme is the 2023 base theme. So 2023 is the new default theme for when WordPress 6.1 comes out. And what the, I actually just want to find the link I meant to have it open and then I forgot what the design team did was let's just go and find this here quickly they open sourced all of their designs. So the design team, can I spell design? The design team is the open source team within WordPress that designs all the new default themes. And they also members of that team work for automatic and they design themes for WordPress.org and WordPress.com. And I'm going to try and here we go. Here's the post open for open sourcing open sourcing theme designs. I'm going to post that in the chat as well. So what they did was they took all of the themes that they've designed as block themes and they've open sourced the designs. So you can go to Figma and you can view all the designs and you can see what they look like and then you can use that as a foundation for a new design of your own or whatever the case may be. So if I click on, you don't have to do this but if I click on this link here this takes me to the designs in Figma and there's a theme template and then there's more, there's others, there's 2023, there's Bjork, there's Beaumont, there's a whole bunch of other designs that they've created and you can then click on 2023 and then when you've got it open if you've got a Figma account you can click at the top here and say get a copy and it will then copy that design into your Figma account and then you can work with it. So if you're interested to do that you can go ahead and do that now you can do it later if you want but it's a great way of working with designs and that's kind of one of the nice things about Figma is it's a sort of web-based platform to be able to share designs or whatever else. So I've got a copy of that design and that's this one that I've linked to you over here. If you can't see that you can also get it from this link I'm gonna actually get a copy of this side as well and make your own copy but that's what we're working with today. So if you have a look at this design you will see that there are a couple of pages in this design on the left-hand side of here. There is a base theme which is basically the wireframes. Those of you who've been around for a while you've probably heard the word wireframes quite a bit. So there's a wireframe for the homepage templates for the page templates for the page without a featured image I'm gonna move over a bit for the archive templates for the single post single post without featured image and the 404 page. I think there's a search as well. There's a blog alternative and a search right at the end. What we're going to be doing today is we're going to be focusing on the page templates and we're gonna be focusing on creating the single post template. So if you want to have that open on your side you're welcome to, but I'll zoom in and out as we go along. Okay, let me go back to my slides. So we've got those things up and ready. The first thing we want to do is take another break and check if anybody has any questions. If not, we're gonna dive straight into the template hierarchy and we're gonna do a quick review of what it is how it works and why it's important for a WordPress theme. Okay, I'm not seeing any questions so I'm going to move on unless somebody does have a question and please feel free to post it. But the WordPress template hierarchy is essentially how WordPress takes your theme files and renders content. So if we look at the text here, let me zoom in a little bit more so we can see what we're talking about. I think 114, 133 is probably fine. There we go. Template files are modular reusable files used to generate the web pages on your WordPress site. Some template files such as header and footer are used on all of your pages while others are used for specific conditions. How WordPress determines which template files to use on individual pages is the template hierarchy. So this is a whole article that dives into it and I don't wanna go over this too much but basically if you look down, scroll further down there's a visual overview of the hierarchy. I'm gonna click on that to make it nice and big and you'll see that we've got, I need to zoom I think out a bit because I can't see the, there we go, I can't see the key at the bottom. So I'm gonna talk through this so if you can't see it 100% bear with me. But if you have a look right at the bottom of the screen here on the left-hand side there's a key that says primary template, secondary template, variable template and page type. And the primary templates are all the ones in purple on the right-hand side. So it's your index, your archive, your single or singular, your page or singular I'm gonna talk about that in a second, your home, your 404 in your search. Now remember when we were looking at the base theme the base theme in Figma they had the same ones it was homepage, single, blah, blah, blah, blah. Those are the templates that you, we've lost it now, there it is. Those are the templates that you should have in every WordPress theme. Now you'll notice that there's the singular and then single and page. You can ignore singular, singular comes from WordPress was just a blocking platform. When they added the functionality to allow pages singular gets replaced by single and page. So your primary templates are index, archive, single, page, home, 404 and search. If you have those one, two, three, four, five, six, seven templates your WordPress site can pretty much do everything it needs to do. All of the other templates are sort of additional templates that you can use to provide specific functionality. So for example, if you want to show an attachment in a specific way you can create an attachment template and then when an attachment renders it'll render with that template. If attachment doesn't exist it'll fall back to the next one below, which is the single. If single doesn't exist it'll fall back to index and that's why I say to you index can be installed and a WordPress site will just work. So don't wanna go into too much detail into how this all works but basically when you load something on a WordPress site so for example let's say you are loading a single page it'll start by looking for the singular page template which is this one file on the left here. If it doesn't find that it'll look for the single post page. If it doesn't find that it'll look for and it'll keep going down until it finds the templates in the render and then it'll render it. And that's why your primary templates are so important because then you can build different layouts on top of them that you need that foundational level. Okay. If you've never seen the template hierarchy before I do recommend reading the whole handbook document that I shared in the chat. If you have seen it before and I'm boring you I do apologize but it's good to refresh this before we start building in WordPress. Any questions on what is the template hierarchy? Anything about how it works that you have that you want to ask now before we move on? No. Okay. The hierarchy is so helpful especially for us visual people. Yes. The screenshots I have bookmarks somewhere and whenever I'm trying to remember which is which I'd go straight here. And actually myself and Sarah are busy working on block theme courses which is why I'm doing all this block theme content for my workshops. And the question Sarah asked me was is this the only screenshot because she's working with block themes which are HTML files and this one has PHP files which is how things used to work but it all works exactly the same. Linda says that I miss something is the 2020 theme out or are we just copying the design? Good question. It's not out yet. You can test it if you want to and I don't mind sharing this link because it's publicly available. If you go to WordPress I'll share this with you in the chat. You can go there and you can download 2023 in your current WordPress install and you can play with it. It hasn't been released yet. It will be released when 6.1 comes out. And 6.1 is the aiming the target releases 1st of November. We're just using the 2023 designs to kind of copy and use as a base. I could have used one of the other ones but I've just been working with 2023 so it was just easy for me. But you can download it from here you'll have to probably check out the code and then create a zip file or whatever there's no downloadable version of it yet. Okay, great. So let's go back a few steps. So by now you should have your Gutenberg plugin installed and active you should have your theme installed and active that you downloaded. So let's move on. The first thing I wanna do in the theme is just review the theme.json file. If you've been to a workshop about the theme.json file you will remember that it is a way of setting up your theme settings and your theme styles without having to write too much CSS code. It is a structured format. It uses JavaScript object notation so it's effectively a JavaScript object. And if you have a look at I'm gonna move the cameras out of the way because they are distracting me. A whole bunch of things. So I'm gonna minimize the styles for now in my window. And we're just gonna have a look at the settings to begin with. So in the settings I've enabled appearance tools which enables a whole bunch of functionality in a WordPress theme which I recommend if you're building a WordPress block theme you enable appearance tools. I've set up two colors in a color palette. One is called base and the other one is called contrast and they have hex values and I'll show you where those colors are in a second. I've set up the layout settings the content size and the wide size settings if you were at last week's session you will remember the fun we had with those show you how that works in a second. I've set up my spacing units so the units that I want to make available to users when they're changing spacing related things so margins and padding and all of that. I've set up my default topography so my default topography is a system font and it uses whatever the operating system system font is so if it's Apple it'll use Apple if it's Windows it'll use whatever Windows is if it's Ubuntu it'll use Ubuntu whatever the defaults operating system font is and then I've set up some font sizes so I'm not gonna dive too much into the whole what REMs are EMS on that we covered that last week but the first one is small which is one REM which if you remember from last week that's actually 16 pixels then 1.125 REM is medium and so on and so forth. Now if you're wondering and those are all the settings if you're wondering where these settings come from let's go back to the design. The designer that has designed this for it has very nicely set out the style page for us and in the style page they've specified and they've said, they've said, they've said this is the system fonts we should be using so we should use the system font to fall back to Sansarift. Let me zoom in on this for a second so you can see values. Heading one should be a size of 58 pixels a weight of 400, line height, blah, blah, blah. So a good designer will have given you all this information or if you're a designer you'll have designed all this information for your developer unless you're doing it for yourself and you can then take this information and apply it into your theme to chase so you can say heading is this, fonts is that base theme on mobile is this colors is all of these things foreground, background, primary, secondary buttons and link states you can set this all up. Now I'm not gonna go too much in depth into this today but this is the process you would take to build your theme.json. So for example, the first thing you might do let's actually zoom out here for a second you might say, okay fine I want to create the foreground color the foreground color is black so it's 6, 6, 6 zeros and a hash so I would go into my theme.json and I would go to the color palettes and I would say right I wanna create a new color and I'm gonna say color is one, two, three, four, five, six black and I'm going to give it a name of what was it in the design let's have a look over here we called it foreground so I'm gonna go foreground and then I'm going to give it a slug of foreground and then what that does if you remember is it creates a preset called I think it's slash slash WP preset color foreground as the slug, which you can then use so for example, if we go down to the styles there are the colors so I can, their base is being set as the base background color contrast is being set as the text color which is the colors that were for example setting up in the palettes okay so you would go through that whole process of setting up your style settings setting your different styles for your different elements before you start actually building the templates. Okay, as I said today is not about theme JSON we have done some sessions about that it's the kind of thing that you need to kind of practice to get used to and it's the kind of thing that you will do over and over again so that's why we recommend if you have like a base theme JSON that you like working with use that and then you can design in the editor but that's the basics of how that works having a look at the styles so we've got a background style set we've got a text style set we've set some colors to buttons elements this is based on the style from the design to focus to hover we've set a specific border radius we've set a specific default color a default font size it's set to medium not small or large but medium there's all the h1, h2, h3 settings so setting the font size and the line art for each one again based on the design and those all things and you would have this for every single element based on your styling we've got heading topography we've got link things happening we've got spacing we've got block gaps we've got all kinds of things happening and then right there and you've got the version and the schema so that you would do and you would prepare it all based on those based on that style guide which is this over here and then when you're ready then you can start building your templates okay before we move on is everybody happy with that does anybody have any questions if you're happy with that give me a ready or a yay or a thumbs up in the chat if you've got questions now's a great time to ask them and then we can start designing some templates okay nobody seems to have questions let's take it off and out and get to this point this is why I set it for an hour and a half so let's start doing some template design so what I like to do when I'm when I'm building a theme is I like to take a very simple template and use that as sort of a base to start with and the reason I do that is because number one I'm going to be designing probably the header in the footer when I build that template because I haven't got the header in the footer yet and it kind of gets me into a field for how things are going so if I have a look at the base theme over here and I'm going to zoom out very quickly but the page templates if you scroll left and right and have a look at all these different templates the page template is probably the simplest template on the screen let's zoom in so we can see what it has it's very very simple it has the header at the top which contains the title and what looks like navigation it has a featured image which we know from WordPress WordPress pages have a featured image it has the title it has the content in this case it's text and then it has a footer which replicates again the site title and then this text of proudly powered by WordPress which you'll know any default theme that WordPress puts up has that at the bottom so if I had any questions about this design I would go back to my designer and I would say well look what is the padding around this area what is the width over here you can actually if you click on this you can actually see the width there is a thousand pixels that's very very handy for us so that gives us an idea of how wide that image is on the screen if we click on the text we can see that's six fifty five pixels if we look over here we can see this with this one thousand two hundred but if we look at the edge of where the site title since it's in line with the one thousand so there's probably going to be padding of one hundred pixels on either side so we're starting to understand how this all fits together so now we can start building this okay so let's go back into our editor and let's go and build which one was that that was the the single page template now I think I deleted that or didn't I now I deleted the single let me delete the page as well I'm going to show you why in a second I'm going to delete the empty template there I'm going to refresh this so I don't have a single page template yet I want to create the single page template sorry the page template not the single page template the page template the cool thing about the site editor is it has this add new button and if I click on the add new button and you'll only see this now if you're running WordPress 6.0 and with Gutenberg it'll list a whole bunch of templates and without Gutenberg this list is slightly shorter but what you'll notice is that all of the primary templates we discussed earlier are listed here the front page is here single is here there's the page there's the archive okay we don't need author category date tag and taxonomy yet but there's search there's 404 and there's the single post item and that's probably related to the singular because we've got the single up here as well and we can create custom templates or anything that falls outside of the primary templates so that's very very cool so I want to create the page template so I can literally just hit page boom and it'll ask me do I want to create this for all pages or just for a specific page now because I'm still designing I don't quite know what I'm going to use this page for yet so from now I'm going to say use it for all pages so we'll just tag all pages there and notice what happens it creates the page template and we can see that because it says page over there but it comes with some content and that content is copied from your index template so it takes the index template copies all the content and jams it into the page which is cool because at least then you can see something you've got something to work with and it puts you in edit mode so you can start editing if we have a look at the list view we can see there's the query loop which we saw earlier I think you can can you minimize this no you can't it's one size so and there's the post template there's the page nation I don't need this stuff I want to start creating from scratch so I can just over here either on the query loop in the this view I can take on the little three dots and I can say remove or I can click on the query loop itself now you'll notice when I click on for example the header it selects the post title header but if I this toolbar here is the block toolbar if I mouse over that first icon there it'll actually select the parent container so it'll go up to the post template and then the block toolbar is at the bottom here and there's selecting the query so I can go up to the query loop template and then from there I can use the toolbar to remove the loop in the editor so there's a couple of ways that I can do this I prefer the list view way I don't know why I just do but there's many many options so let's remove the query now we've got a blank template I'm just going to close this down quickly I don't need the settings right now so now let's go back to our design so the first thing in our design is our header so let's create the header in the templates so what I'd like you to do if you're following along is either in the editor or in the list view wherever you want to do just hit either the block insert a button or you can type which is what I like to do you can type forward slash and then it'll bring up this list and I want you to add a group block now group blocks and row blocks are very good for organizing content if you come from a bootstrap environment you'll know there was usually like container divs a div with a class of container and they had certain formatting to it that's kind of what a group block is in the template editor in the theme editor so it's a good thing to use to group common things together and it'll enable some functionality which I'll show you in a second so we'll start by adding a group block inside the group block I want you to add a row block which you can either do by clicking on the plus there or you can go block and search again or you can here and you can say insert before after move it around I'm just going to do it from here in the editor I'm going to click on the plus and I'm going to search for a row block okay inside of the row block we're going to add the site title and the navigation so again I'm just going to hit plus and I'm going to search for site title there it is and now I want to add the navigation now currently excuse me the site title is selected I want to show you what happens if I just click plus now it's going to open this up on the left you and I don't know where it's going to go so what I like to do is I like to make sure I know where things are going so this is where I find the list view very handy if I click on the three little dots next to the site title in the list view I can then say insert after and this is why I like the list view and it'll start a new block and then again I can type and I can say navigation and then I can pop the navigation block it okay so that's one of the reasons why I like the list views it enables me to target the specific areas that I want to add content and make sure I'm adding it in those rooms okay does anybody need me to slow down if anybody who is following along wants to catch up I'm going to take another super coffee and tell me to stop otherwise I will continue after my super coffee okay so now we've got site title and the navigation but let's have a look at our design the site title is kind of the same size more or less in terms of sizes the navigation add after as a super clutch absolutely so I need to make some changes so there's a couple of ways that I can do this I can either click on that specific block and if I click on the options in the block settings and say show more settings it pops the setting sidebar up and I can then go to the topography and I can make changes to the size and it's probably going to be it's currently medium it's probably going to be it's currently I think very large so it's probably medium that I need to move it yes that's that's kind of what I want that's one way of doing it and I can save that move on or I can say let's let's leave it on medium for now or I can say I want to make sure that the site title when I use it across the site is set to medium because later on I'm going to add the site title to the footer as well and I don't want it to be nice and big so what I would do then and I'm going to show you a nice little thing that I discovered the other day as well I can over here I think it is reset goes back to default that's very very cool and then I can go into the global styles editor which is that little geotone icon at the top there and I can go into the appearance of specific blocks and I can go to find the site let me search for it a little bit easier the site title block there it is and there I can say I want this to specifically be medium so it's the same effect but now if I save this this is going to save it to my global styles not the specific template so the next time that I use the site title in another area it's going to come out like that and that's what I want okay you'll notice it's asking me that I want do I want to save the page and the styles I can either say yes and it'll save both for now I just want to save the global styles I'm still working with the page so I'm just going to save the custom styles hit save and I'm happy with that okay Andrew says the list view to be very useful 100% I discovered the list view recently when I was watching I think it was Dave Smith on a YouTube video and that was like a mind-blowing moment okay so I've got my header now the other thing that I need to do let's have a look at the header and see what it's doing what we said we said that it was about 1200 pixels wide but it was in line with a 1000 pixel image so I know I need to sort of get some alignment going on the other thing that has the navigation is all over onto the other side which I don't currently have and this is why the rows so hand because in the row settings I select the row and I go let me zoom up away show more settings I can change justification currently justification is justify items left I can say justify center not quite what I want justify right not what I want justify space yay okay that's what I want so I want there to be space between the items and by doing that it moves them both to what I want okay so that's the first thing I can do then I can look at well I want this to be wide aligned and if I click on the alignment I can select the wide width alignment there we go so now it's going to be the 1000 pixels wide let's close the side view for a second and that's what it looks like now what I'm not sure of just yet is when I add the featured image later and wide align that whether it's going to match up properly so for now I'm going to leave it like it is but the other thing I need to do is there's some padding going on there now I don't know exactly what this padding is top and bottom but I know this is probably going to be 100 and it looks like this is 100 as well okay so let's do that so if I switch up the list view and I select the row and I go all the way down to padding I can either select the default padding options or I can tick on the little custom set custom size padding and I can say I want padding of 100 that doesn't look quite like what I want so maybe what I want is padding and margin not sure yet looks a bit too big but it's kind of getting where I want to go if I check the unleg sides option that'll give me all four options so right and left I probably definitely do 100 but top and bottom I probably maybe wanted 50 there's top and there's bottom that's starting to look a little bit better starting to look a little bit more like what I want okay so now I'm starting to build this up cool so that's my header sorted out any questions on building out the header before we move on I haven't said if it's to the header template yet I'll get to that in a second but any questions on all that before we move on okay there don't seem to be any any questions so let's move on now I want to start adding the content how did you space the block again good question Jean so the first thing I did let's actually and this is cool you have undo buttons in there that's just like in word not in life though so I'm going to go undo then we go undo we go undo again so we're back to here so the first thing I did was I selected the row and I said under loud in the settings I said show more settings under sorry I'm losing my things yet under layout justification I changed the justification to space between items then I scroll down to the padding and I checked the set custom size button which switches it to a value and I untick the unlink sides button which basically allows me to do I need to do a value first so I set it to 100 then I said unlink and then that allows me to specify values for all four padding options and I changed top and bottom to 50 okay happy with that Jean the space between the titles and links that was the justification so that was if you select the row that was in the settings layout justification so I see Linda's got a question so because you're in block view if you save it now are you saving the block not the template or global no if I save this now it's going to save all of this to the template in the database it won't save it to the file and I'll show you how you can get it to the file in a second but it's going to save it to this template in the database I hope that answers your question cool Jean are you good just checking before we move on not really but go on are you struggling to find that setting on the road Jean you're welcome to unmute if you want to do it verbally I can't get the spacing that you have between the site global title the title and the sample page thing I was able to do all the padding but I can't get okay so I click on click on the row in the list for you so that she's selecting the row you got that yep and then I'm going to hide the settings and then there's a little three dots next to the row in the list for you click on that and you should see something that says show more settings yep got that okay then on the right hand side the setting should have come up so it should be block selected and the first thing you see should be row arranged blocks horizontally yes okay then below that's layout yes and then do you see justification yes okay then do you see this little button which looks like a tie fighter from Star Wars yes what happens when you click on that nothing ah that's interesting I wonder if you click on the group what are your group settings look like do they look like mine okay yes and I've done this before and this is the first time it has a spread out so anyway go ahead I've done it before I'll figure it out move on for everyone else thank you just just a quick one that sometimes you need to check because in that little menu on the on the left to just make sure that your your like site title navigation are inside the row it's really easy to drop them at the same level as the row that was the next thing I was going to say are they definitely inside the row and not on the next level yes they are all right okay well Gina I'll tell you what if you if you don't come right use create block theme to extract your theme and we can find a way you can set it to me and I can see if I can help you with that okay all right so I need to I hate the zoom video we know it always gets in my way okay so now we want to start creating the content and the content is very simple it's just the featured image it has the title and then it has the page content now we'll notice that the featured image and the title are basically wide and lined again whereas the content is not the content is set to the content alignment in the design is 655 but in our theme.json we made it if we scroll up to the top here we made it 650 just because I like round numbers so what we need to do is we need to somehow group these things differently and this is again where groups come in very very handy so what I'm going to do now is I'm going to create another group after my first group block and I'm going to say insert after so I'll make sure it's after the group and I'm going to type in group over there and move the zoom out of the way and pop a group in there then inside that group I'm going to create a second group for my image and my title so for my featured image and for my title so group and then we can add featured image and then after featured image and this is where again I like to use the insert after option so it's after I didn't type the slash let's forget about that featured image post featured image there it is oh sorry not featured image title that was silly let's try that again the other way you can do it is if you select the group then the little plus sits inside the group and you can say add block there and you can go post title okay so the thing that we'll notice now is that if we have a look at the group and we have a look at the featured image the featured image is currently if we set it to 100 pixels wide the featured image is wider than our header we'll notice so that probably means that the header padding is wrong or something but what it actually is is if we change if we go to the group and we say inner blocks use content width and we disable that we can either set it or we can disable this and then that gives us an option to say 6 the group to the max wide width and notice what happens it went wider than what the top is so I'm going to go I'm going to take it back a step I'm going to say none and I'm going to say by default when the group is loaded it's this inner blocks use content width is enabled so it says all the inner blocks are using the content width which is the 650 I don't want that I want those inner blocks to be a thousand and this was that problem we had last week and now we don't have so I'm going to disable this and then I'm going to set in this order the group to be a thousand pixels wide then I'm going to select the featured image and make sure that's a thousand pixel white it already is and the post title make sure that is a thousand pixels wide so that's going to make sure that when this renders on my front end it's going to be the wide width that I want and that's what that's what the wide width and the content width settings are the wide width allows me to go wider than the content width the content width forces me to stick to the content width But then we'll see that the head is looking wrong. So let's have a look at the header and how we can fix that. If I go back to the header group, I can do the same thing for the header group. I can set it to say, don't use content group. And that's already starting to look better. And if I make it full screen, now I can see what it would look like on a bigger monitor. And I can see that it's not quite there yet. And that's because what I need to do is I need to set the width to a specific width. So I'm going to turn that on. And I'm going to say, use 1,200. And remember in the design, it was 1,200. That's how I achieve this. So let me go back. So for that header group, I say, use the content width, but I explicitly set it to 1,200. 1,200 or what do you mean 1,200? And then with the 100 and 100 padding, it lines everything up the way I want it. If I zoom out here to make the screen bigger, for example, you can see it all stays aligned nicely. So that's how you sometimes have to play with your designs, play with your padding to get things to look the way you want. Maybe you need to make a group wider than the content width and then use padding. Maybe you need to make it smaller, whatever the case may be. And that's the cool thing about groups is you can, using this inner blocks, use content with toggle, you can make your widths wider, widths smaller, make whatever you need to do and then change things accordingly. Okay, I'm going to hit save here, just so I don't lose any of these changes. And then we're going to just look at the list for you again. Now, the other thing to notice is, because I'm going to go a bit larger quickly, because I was working on a screen where I was zoomed in 125%, it means that I don't always see what I need to see and that's one of the downsides about doing it in this way. So it's always good to check, check where the things are aligned, disable your list view and your settings, make sure things are still looking the way they need to. Edwin says, why wouldn't you just remove the right, left padding in the header and row and make it a thousand? That's a very good question. Let's find out. So let us go to the group, go to the group settings and you're saying, take that off. And then it was really the padding, I think it was on the row. So let's just preset some of those. Disable that. So now it's using default padding. Actually, no. Actually, I could just set this. I couldn't go to research yet. Okay. So now it's using default padding. Okay. And then you said, set the road to make it a thousand. So that one. So we have to do it on the group to a thousand. And let's see what that looks like. So that's what it looks like. It's still aligned nicely. But if we look at the design, the design has some padding around it, which is why I added the padding. But if you're happy with this look, that's also fine. There's no right or wrong. It's now going to be a fight between me and the designer. The designer really wants the padding there. So it's going to be a good idea to get the one 200 and include the pattern. If the designer looks at this and is happy, then we're good to go. Adrian, I hope that answers your question. I'm going to. And do those changes. I get my padding back. Because my designer wants that. Jean says that helped my head of space. Yay. It looks like mine. Awesome. That's great to you. Okay. The padding is more. I think the padding is more just because I'm trying to follow the design that anything else. I don't think I've made it in the right place. So I'm going to go around it. But there's multiple ways to do the same thing. Okay. So now we can add the post content. And the post content is going to sit below the group. So I'm going to add post content after the group. So say it's set after. And we're just going to say. Post content. And we'll notice that the post content is not said to go here. say use the content width and it forces that to the content width. So because we've set the content width and because we've enabled it, it says use it. So now we're getting close to that design that we have in our design. Okay, so if you'd like to add the post content to the group, you can go ahead and do that. Okay, any questions on all of this before we move on? Otherwise, we can add the photo. Well, folks thinking about questions, what a good developer would do now is start testing this on the front end. So load up some default content, fire up the website, fire up the page, make sure it looks the way you need it to look. Any benefit to putting the post contents into the group? The only benefit I could think of was if you want the post content to be at the thousand pixels wider, which it was already, so not necessarily there because of the settings we've done. If you wanted it wider, then that would be useful. But for our purposes specifically, because of the way this side is set up, there's not a requirement for that. Laura says, I do not have justification for the post content box. The justification for post content is slightly different. It just has center, left and right. If you don't have it, I don't know why that is. It might be a setting some way, but by default, in my install, it is there. I don't know what the reason is why it wouldn't be there, but you'll notice it's very different to what it is for a group. So a group, the justification options, no, not a group, sorry, the row. For the row, the justifications are left, right or space, or the post content is just left, right or center. If you don't have that, there might be a bug somewhere. I know sometimes if you leave a bug in your themes adjacent file, some things load and some things don't. So it might be something along those lines, but it should just be there underneath the content. The nice thing about this is you could, even if you wanted to, you could say I want that, let's say the designer says they want specifically for the page, they want the content to be, let's say 750. Then I could set it to 750 just for the page if I wanted to on that block, but I don't want to do that today. Okay, let's save this and we're happy with that. And then finally, the footer. The footer is very simple. It's just, again, the site title is text. It uses the same kind of setup as the header. So what's cool about that is we can basically take the header group and we can, and I love this, and we can say copy block because it's a whole block and it'll copy all the inner blocks as well. And then we can go right down the bottom here and we can say, we can add a, sorry, we'll click on the bottom here and we can just go, I think it's ctrl-v and it doesn't seem to be working. Okay, let me do this way. Let me say search after that group and then just going to move it down a bit. If we just go ctrl-v, it'll pop that in there and I can just pop it at the bottom and there it is. So that's kind of cool. I can use ctrl-v, ctrl-c, ctrl-v, copy, paste whatever the case is. The footer is slightly different because okay, it's not. It does have the same padding. So that's perfect. We can leave that like that. The only difference is it doesn't have the navigation. So in the list view, we can remove the navigation. So that's done. And then we can say after the title, we want to insert a paragraph, which is there already, and we can start typing priority powered by WordPress. And then let's just grab the wordpress.org URL and we can just pop it in there. And what I like about this as well, I could just copy, I could just select the text and either use or I click and paste or just ctrl-v and it'll paste the link in straight away for me, which is very, very cool. If you haven't seen that in the block, it's one of my favorite things. I can just ctrl-v and it'll paste the link over the text created for me. I'm very happy with that. So that is perfect. Okay, so if you haven't done that already, you can copy your group block by clicking on the options, saying copy block. And then after your main group, you can say insert after and then you can paste and then you can move it up and down if you need to. Laura says found the toggle button. Awesome. That's one of the things about the site. It does require some time playing with it, using it, investigating how things work, figuring all of these things out. It's a lot of fun, but it does, it's a new learning curve and sometimes us old dogs struggle to learn new tricks. So that's my page template. Let's save that. Is this instead of using your foot to template part? Yes, James. So what we're going to do now is the next step, which is we're going to turn the header and foot into template parts. And I'm going to show you two ways that you can do. So that's a very good question. You've seen where I'm going with this. You can have a sip of coffee before you go on. I'm just going to be sort of a hop now. Okay. So what I'm going to do very quickly now, and you're welcome to do this along with me if you want, is go into your code editor or wherever you can access your files and delete the header.html file, mainly because I forgot to delete it before I upload this. So we're going to leave it like that. And we're going to go back into the editor. And now we're going to take that group and we're going to turn it into a template part from the editor, which is very, very good. So again, if I click on the three dots, the menu comes up and I'm down here, I can say create template part. So from the editor, if I'm happy that this header template is ready to rock and roll, I can just create the template part from here. So I click on create template part. It'll ask me to give it a name. I'm just going to call it header for now. And then it'll say, is this a general template part or a header template or a footer template? It's my header template. So I'm going to hit that. I'll select that and then I'm going to hit create. And now it will go and it'll create the header template part for me, which is very, very cool. Okay. With the bottom group, the other option that I can do, Laura, I just went into either my text editor, which in my case was your code studio or just your file browser and just browse to, that's up in my file browser. Okay, it's not opening up. Just browse to whatever your site or local site is. No, that's not my local site. That's not my local site. Sites, in my case, learn, press, WP content, themes, let's code workshop. And then I just deleted the file. That's all I did. And the other way to do it, if you already have the file there, you just want to copy the content is you can use the same copy functionality. So you can say here, copy block, then you can switch over to your footer template part, which is there. And then you can just click inside the template part. And again, use control view, right, to paste and paste your content straight, which is another cool way of doing so. This is what this is what these are the things that I love about the block editor and the site editor specifically is it enables those kind of very normal, very unused to using copy, paste in Google Docs or Word or wherever within my WordPress environment. So I'm going to save this as well. I want to save the page on the footer. That's fine. So we're going to save that. So now we've got a template part header with content and we've got a template part footer with content. So now we go back to our templates and we say, right, let's replace those groups with the header and footer. I saw that question. I'll come back to them in a second. So here I'm going to say, right, remove the group. Don't need that. Remove this group. Don't need that. And then let's, I don't know why there's a header in there. I think things went a bit weird on me earlier. But this is, I don't know what's going on there. But what I'm going to do now is I'm going to kick here. I'm going to say insert before and I'm going to slash template parts and I could just choose the header in the footer. So I'm going to just go header. And then I'm asking me, do I want to choose a blank one? I want to choose the current one. And there we go. Something's gone wrong. My head has gone wonky. I don't know what happened there. You remove this. Something's gone wrong. Yes, you're right. My whole environment is frozen. No, it's going on here. Page is unresponsive. You're right. It's unresponsive. I broke something. Isn't that fun? You selected the wrong group to make. Ah, that's what I did. Okay. Now my whole site's broken. Let's exit. Ooh, that's fun. Okay. The dashboard still works. Let's go back here. And it's a kind of still works. Back into my template parts. Okay. Let's delete the header. That's fine. It's going to my templates, my page template. Okay. That template part has been removed. That's fine. Okay. It hasn't saved it. So the group is still there, which is great. So let's turn this into my header again. So let's try this again. Create template part. It's a header template part. Let's call it header. Create. That's what I wanted. Oh, you see it pops it in already. That's why I missed that part. So it automatically replaces the group with the actual header template. So I don't have to make the change for myself. With the other one, I did the copy into the file. So let's remove. Sorry. Again, zoom is in my way. Let's remove this. Remove group. And then let's insert the footer. So we'll say insert after. And I'm going to go template part this time. And I'm going to choose the header, the footer template part. There we go. And there's my page. We'll notice that my featured group with the post title and that kind of stuff we're missing because I messed things up. So I apologize for that, folks. But it gives you the basic idea. Okay. Yeah. There were some questions and comments. I'm going to run through those quickly. You selected the wrong group. Yes. Well spotted Robin for that one. How did you get the post content to be 650? I only seem to be at the non-wide option if it's inside a group. I didn't put the post content inside the group. If you have a look here, the group or the header is there. Let me let me replicate the other group for the video. So let's insert after a group. And it was, let me find my notes here. Group, group, feature image. Awesome. Let's add the feature image again. Bomb. And let's add the title. There we go. And then for the group, I had let me just check my notes here. Group, post feature image. So the feature image I said by alignment, title, I said by alignment. And the question was, how did you get the post content to be 650? So I, on the post content, I said, I made sure that the inner blocks used content with under layout was selected. So by default, when it popped in, it was wide. And then I enabled that and that forces it to the 650 I set in the theme JSON. You'll see if you go and change the theme JSON refresh this, then the post content will be that way. Let me know if that solves your problem or not, while I sip of coffee. Awesome. I'm glad I was able to figure that one out. Robin says, this is one of the reasons that naming list view blocks will be helpful. Yes, agreed, Robin. Being able to name them will be very helpful because now I just see a bunch of groups. And I'm pretty sure there is a ticket for that. We're going to, we're going to have one soon. But yes, it would be nice if I could say, this is my post header group. And this is my, in this case, it's the header. But if this was my post header group, so featured image type, the next one was whatever, agreed 100%. Okay, let's save that. So what's cool about this is now we have created a template and we've created the header and foot attempt to pass. We now want to create the rest of the templates. We want to keep going, we want to keep going. There's not going to be enough time to do them all today. So the other one I want to try and see if we can cover today is the single post attempt. So in other words, the template that gets displayed when a single post is rendered. Oh, yes, there was a question about can you make more than one header and foot attempt. I'm pretty sure you can. So let's, in the template parts section, let's say add new. I don't think you can give them the same name. So we'll just call this one headed to, for example, and we'll create it. And there you go. And I can put content in there and then you can use different headers on different pages and different footers on different pages. And that's another cool thing about doing it in the site editor versus in the WordPress way. In the WordPress way, you have to do it in PHP and then you have to call a different one. In this way, you can just build it all up and you're good to go. So yes, you can create more than one header and foot attempt and use different templates in different places. You can create multiple general templates and use them all over the place. It's a very cool feature. Let's delete that one. Okay, no problem. Let's move on and have a look at the design for the single template. So the single template is very, what am I doing? The single template, where is it now? Let me find it. Yeah, single post. The single post is kind of very similar to the page. It has the header at the top featured image in the title. So that's similar to the page. The content is similar. The only real difference is the comments at the bottom. And so what we can do is we can use our page template content and get going with that already. So if we go into templates and we say, right, let's add a new and it's the single template. Now, if you are using WordPress 6.0 without the Gutenberg plugin, that single template option doesn't exist. Or single item post, one of the two doesn't exist. And that's why once Gutenberg is stored with 6.1, that option will become available and you can just go ahead and create it. So we'll select that one and it will start doing things for us. We don't want this content. We want to start with the page content. So let us go into the disview and remove the query loop. And then let's save this template. That's fine. And then let's go back to the page template. And guess what? We're going to copy everything. So there's an option in the editor. If you click on the editor options, which is this button on the side here, where you can say copy all blocks down the bottom. So this will copy all of the content from this page. The other way you can do it is you can switch on the code editor and manually select, but I don't want to do that because I'm lazy. So I'm going to say copy all blocks. So now all the blocks have been copied into my clipboard. And now I can go back to my single templates and simply click on the top empty block and control V. And there we go. So it's a really important, all that content for me. Now what I would like to see in the future is the ability to, when you create a new page, choose another page to base it off. So I don't have to do this copy paste part. But that I think is really, really cool. Andrew says you can sort of add it by group blocks if you go into the advanced settings. Yes. And you add an anchor. That's one way of doing it. So what Andrew is saying there is if you go into, for example, let's say the header, and you go to advance, you can give it classes and various other things that'll, that'll identify for you. So that's another way of doing it. Why did the name change to single foot on top? Okay. So it's because, so single is the name of the template that I'm working with. And then this little part here is the, is the area that I'm, that I'm working on. So that's the header. So it shows that I'm, that I've got the header there. So I could edit the header inside the template and it'll save it back to the header. And I could edit the footer inside the template and they'll save it back to the footer. Very, very cool functionality. Otherwise, if it shows nothing, then you're just working inside the content of the template. Okay. So this is all good. The only thing that we need additionally now is to add the separates, moving things around again, the separator, all of this stuff over here and the comments. So let's go ahead and do that. All right. So after the post content, I'm just looking at my notes very quickly. After the post content, we want a little bit of space to see there's a bit of space after the content. So we can use a very simple block or the spacer block. So I'm going to say insert after and I'm going to go spacer. And there we go. And by default, the spacer in this instance, let me just switch on the settings defaults to 100 pixels. I can change that to whatever I want. I'm going to make it 30 pixels just for the sake of making it a certain size. So that will make sure there's always 30 pixels of space between the content and whatever's next. If we go back to the design, then there is the line, which is right at the top of the post meter. So I need to add a line. And that line is called a separator in the block editor. So let's add the separator. There's the separator there. And you'll notice that the separator by default is this little short line. In the settings for the separator, I can change the separator line option. So I can change the default style or I can say a wide line and then it stretches wide. And that wide width. So in our case, 100 pixels wide width. So that's good. That's exactly what I want. Below the separator, I have the, let me zoom in there quickly. I have the posted dates in whatever category. I have the author and then I have the text. And the cool thing about the editor is there are blocks for all of these. So now what we're going to do is we're going to add a row block. We're going to add a group again. And then a row block because we want the things aligned next to each other. If you remember when we did the header, we did a row. And the difference between a group and a rows, if you add something to a group and you add multiple blocks, the blocks align below each other. If you add them to a row and you go multiple blocks, the blocks align next to each other. So that's where rows and groups can be very handy. So let's add another group first, just because I like grouping things. And then inside of the group, we will add, actually no, not there, we want to add a row. Good. And then we will add, I'm just checking my notes, the post date, post author, categories, and tags blocks. So we'll just do one after the other. So let's go post date, boom. And then let me move this up away. So I always want to make sure the row is selected. So after post date, it's going to be post author, I think it was. Yes. Post author, and then we select the row again. And then it was post categories. Let me select the row again. You'll notice when the row is selected, the plus is there. When the row is not selected, the plus is outside. So it's always handy to check that you're on there. I can select the group, but currently I'm on the row. And then the other one was tax. Tax. Here we go. Now in the design, you'll see that author is there, tags are over there. I'm adding the date as well next to it. So we might want to do some alignment, which we can do. So again, if I select the row, and I change the justification to spacing, there it is. In my design, I've got the posted by date inbox there in the author below it. So what I might want to do is have two rows, two groups, one with the other. For now, I'm going to leave it like it is, because I'm quite happy with the way this looks, but I can use rows and groups to rearrange these things around it. Then I've got a little bit more spacing in the comments. So let's go back to the editor. And I'm going to add another spacer. So let's say after this group, let's just say insert after, zoom window, search after. And I'm going to add another spacer. I'm going to make that 30 as well, just for the sake of being formalized. And then let's just check the thing out. Then it's just the comments. So go away, zoom, can't click on my tabs when that happens. So then after the spacer, and this is one of my favorite things, insert after, and I can just add a comments block. And the comments block handles everything for me. So it handles this out the way. It handles that section. It handles the author comments. All of that is all built into the comments block for me. If we open up the comments block, you'll see it has comments title, comment template, which has more blocks and more blocks and more blocks and more blocks. Now, within the comments, we'll notice if we look at the design, let's just close all of this down quickly. Comments are not supposed to be aligned so wide. So again, what are we going to do? We're going to change alignment. So let's go back to there. And then let's enable the settings. Now comments, I can't change that alignment. I don't have that option to change alignment. But what do I have the option for? Groups. So let's add a group just before comments. And then let's move. And what I love about the list view is I can now drag. I can click on comments and I can drag it into the group. Sometimes this doesn't work 100%. The other option is I can just select this here and drag it up. So let's try that. Just trying to drag it up into there. It doesn't seem to be working. Not a problem. Because comments is handling all the functionality for me, I can just literally say remove comments here, select the group, inside the group, add comments. And there we go. And it's the right width now. So it's going to lay out the way I wanted to. It's all good. The other thing that I want to look at is notice that the row for the post meter is aligned wide. So right now that's not currently the case. So again, we go back to the row. Sorry, back to the group. And we say there. Don't use content with use wide alignment. Perfect. Go back to the row. Make sure it's using the max 100%. Sorry, 1000 pixels wide. And we are... That's not what I wanted. Why is it so wide? Maybe it's supposed to be like that. Let's just make this... No, that's not supposed to be like that. Show the settings here. Done something wrong. Got this working the other day. I'm going to have to figure out why that's doing that. But it's a lot wider than I needed to be. Let me check my notes here. Let's go into the space of group. Not quite sure why that's doing it so wide. Might just be me. I've done something silly, but it gives you the options to go wide line, whatever the case may be. And then I can just save the templates. And now it's ready to be used. It's ready to be used on my sites. It's all good to go. Okay. So that's basically how you can create your pages, your templates, your primary templates. So you create one for your 404 using the various blocks you need. You create one for search, all the different kinds of things. The last thing you're going to want to do if you're building a template for a client is you're going to want to export this to files. If you haven't seen this process before, I'm going to show it to you now. It's a plugin called the create block theme plugin. I'm going to install it very quickly. And if we go here to plugins, and we're going to say add new, and we're going to say create block theme. Here it is over here. Sarah used this last week in the session that she did. I'm using it all the time to export my themes. And what it basically does is it takes everything that is saved in the database. So all of the template files in the database, and it exports them to theme files. So let me show you that very quickly in my code editor. Currently, I only have a foot to HTML part, which is empty. And I only have an index template, which has some code, which is what we started with. And then I have whatever was in my theme. Just if I now go to appearance, create block theme. And I use the overwrite option. It's going to take all of the changes that I've just done in my templates and my parts and whatever else that's in the database and write it to those theme files. So if I say create theme, it does all what it needs to do. And now let's go back to the code editor. And there we go. There's my page with all of my page code. There's my single with all of my single code. There's my header with all of my header content. There's my footer with all of my footer content. So I can do everything in the editor. I can do design, styling, pages, templates, headers, footers, whatever. And then using create block theme, export it all to files. It's a great way of building a theme if you've never written code before. Michael, I agree it is too cool. And that's one of the things that I love about the block editor. So those of you who know, I'm sponsored by automatic. But I was a block editor fan before I joined automatic. I think it's one of the reasons why they hired me. But I just love the fact. I'm a developer who loves automation. I love things to be done for me, mundane things, boring things. And the ability to be able to design in the editor and then just click a button and dump it all into files for me is just amazing. So that is the process you can follow. Hopefully there are some tips and tricks that you've learned from all of that. The other thing that I want to mention before we sort of start wrapping up is if you have customizations that go beyond what the block editor enables, your theme does still have and should still have a style.css file. So once you've created the basic layouts, you can then do style changes in your style.css. And then that becomes what we call a hybrid theme. So it has block elements and customizations. So don't feel like you need to be limited to what block editor gives you. You are still able to register functions at PHP and all of that cool stuff. You are still able to do style.css. So your traditional knowledge that you have about building themes is still valid when you're building block themes. Okay. Robin says, please go through the choice in the create block page to generate the files. Perfect. No problem. I will do that. So once I've saved all my changes, so let's go back a step. So the first thing I do is I install the create block theme plugin. This is a plugin that is basically actively developed by the WordPress theme team contributors, which is why it's by WordPress.org. I don't see it going away anytime soon. I see it's getting better and better. There's even a pull request that I saw for it the other day that enables you, allows you to add fonts using create block theme. So you don't have to code it yourself. You do it through the plugin, which is exciting. So I install that plugin. That plugin adds a menu to the appearance list called create block theme. I click on that and then I select the overwrite option. And overwrite basically takes all the changes in the database and writes all those changes to files. And then I just hit create theme. So Robin, I hope you caught that. If you didn't, you can always watch the video after this. Okay. Somebody said, let's just say one of the, it doesn't work for blocks. I'm not quite sure what that was about. Oh, that was probably about the naming. Awesome. Any questions before we wrap it today? We do still have a few minutes left. So if there are any other questions about developing block themes or the process that we went through today, please feel free to shout out. Okay. We don't seem to have any questions, which is, Baylor says, this is really cool. I agree. There's some really cool things coming as well. So yes, start playing with it. What I always recommend to folks, and I'm going to share this now because it's a good thing to share, is download and use existing block themes and see how they're fit together and see what they do. A good place to stop, there's a theme called block base. It's developed by the automatic themes team. And it's a very, it's a very simple theme, but it's a good base. That's why it's called block base, to start off with. So install block base and then go into each page. Let me actually do it now. So let's install block base very quickly. Taking it's time. While it's, since we're creating a new theme, we don't have to worry about any updates changing the theme. Correct. Linda, that's 100% correct. If you create a brand new theme for your site, but it updates, they're going to happen. It updates the jucreate. So yes, now updates should affect you. Let's activate the steam. And what's cool about block base is it comes with, let's go into the code view for block base quickly. It comes with a very opinionated theme.js. So go through and learn what these different things do and learn the colors and all of those kinds of things. And then it has all of the primary templates. It has a 404, an archive, a blank, a footer only, those are custom index page. So look at how those things work. Look at what the 404 does and how that works. Look at the search and see how the search works. Load it up in your editor and see what the blocks are that are being used. It also has parts. It has footer and header by default, but then it has a whole bunch of other headers and footers. It also has more advanced functionality, like it has some patterns, which if you haven't seen patterns yet, don't stress too much about those, but it's good to learn. But it's a good sort of base to work with. It also has some images, some fonts, various other things. And the cool thing about block base is you can then use that as a base for your next project. So you can go in and you can make changes to styles and colors and whatever else you want. And then using create block theme, you can export that to a new theme for your site. I've actually done that on my own site. I don't mind sharing the URL. It's my name.com. I took, okay, it's not running it now. It's running something else, but I took block base and I built a custom theme for my site. I'm not going to enable it now because it'll be likely to my database back in, but I created a custom theme for my site and now that's running on my site. The name looks worry about updates. It's a very simple theme because I just needed it for my blog, but I use block base as a base and I change some things and move some things around. It's a great place to start. So if you want to start building themes, start with block base or any other other base teams, 2021, 2023, other folks have built base themes, start with those, learn how they work, learn how they fit together and then build from there. Awesome. Folks, we're coming close to time. So I'm going to call it for today. Thank you so much for joining me. I hope there's been something useful and something interesting today. I won't see you all next week because I'm going to be on leave next week, but I will be running another session next week. There's no idea what it will be yet. It will be something to do with themes. Maybe we'll do patterns. I don't know. If you have ideas for things you want me to do, please feel free to comment in the meetup comments for this one, things that you want to learn for the next sessions. But thank you all for joining me. Jean, before we go, Jean said, will there be security issues not using your own theme? If you're using a block theme, probably not because there's no PHP to worry about. It's all HTML. So I don't see any security issues. The only time you'd have security issues is if you start doing your own custom code and you're not doing proper security on that code. But block themes, there would be no security issues. Thank you so much, everybody, for joining me. Have a wonderful Thursday and enjoy the rest of your week and your weekend.