 Good morning. Today I'm going to try and rebuild the TechCrunch website in just 30 minutes. Before I dive into it, this is future me, so I've already dived into it. I've just finished and it went pretty well. These are the things you're going to learn if you watch this video. First up, how to make a sticky navigation the right way, how to create pro post layouts, how to change your global styles, how to understand the new image ratios in WordPress 6.3 and also how to understand when it's okay to put content in your page templates. Right, let's start the clock. Over on the right here, I have the TechCrunch website and over on the left I have a blank website just running WordPress and the 2023 theme. I have added some posts to it, cheated a little bit, but fundamentally we've just got a fresh website just freshly pressed and over on the right we have the TechCrunch website. So I'm going to try and turn this one on the left into something approximating this one over the right. I have a rough idea how I'm going to do this. I'm going to use columns on this front page and then I'm going to use the query loop block to bring in the posts. This is going to be the navigation block over here which you can align vertically and I also, you'll see as I scroll up here, I need to make it sticky. There are a few different layouts over here on the right. You'll see here we've got an excerpt in the middle I think to start with and because of time I'm going to take this one as the one I want to turn replicate over on the left. Right, let's crack on. So I'm going to go over to my site on the left and click on edit site and that will take me straight into the site editor. The first thing I want to do here is I'm going to create a brand new front page page template. So I'm going to go to the plus, click on add new template and you'll see here I can add a new front page template. This is going to be my new front page. I don't want to choose an existing pattern. I'm just going to delete that down and now essentially I have a blank canvas where I can reconstruct the site with. It's pretty straightforward I think. All we've got here is columns. We've got essentially two columns, the left hand column which is there which is basically just going to be my navigation which has to be sticky. I'm going to show you how to do that and then right hand column over here just contains post essentially but format is in quite a complex way. We're going to use the query loop block for that. So let's start just by adding the columns blocks. I'm going forward slash columns. That is a shortcut that you can use to add blocks. Now I can choose the layout I want. I'm going to need to change these proportions because they probably won't be correct right but that's fairly close to the one I want. So I click on that and that's going to set my columns for me. Actually it's not far away. I'm probably going to reduce this one in size which we can do here. If I just show you this you can see you can actually come in here and change the width. So we're probably going to be looking at more sort of 80, sorry 20, 80 I guess. So let's do that now. So I'm going to change that one there. I would recommend as I always do to use the list view a lot when you're editing this stuff and now I can change this one to 80. Again we can finesse these as we go along but that gives me my basic sort of column layout. Then all I've got here is some stuff in my left hand column and some posts in my right hand column. What I want to do to start with though just to show you how to get the sticky bit working because that's quite important. I'm just going to add some content in the left and right column. Just some basic content and then show you how to apply the sticky position to it. All we need in the left to start with is the site logo. I am actually going to add the site logo just so we got it done. So we're going to use the site logo block and then we can upload a logo which I've already got here actually and there's my logo. You can change the size of it by making it big or smaller. It won't go bigger than it actually is but that's probably okay. Then I'm just going to hit return and forward slash navigation. Now I want the navigation block and it's going to bring it in and I'm going to edit this later not now but the one thing I will do now is just change the orientation so we can get that roughly right. Again I'm going to want to add some padding to this. Now over on the right here I'm just going to literally put a whole bunch of text in here and this is just so I can test my stickiness because you see at the moment it's not sticky. It won't stick because I haven't applied the sticky position. Let's go back to the list view and I'm going to show you how you apply a sticky position. So the trick to understanding how to do this is to kind of think that stickiness can only be applied within a container. Something can only stick within the container it's in. So we can't stick this column because it doesn't really it's not within anything. We only want this column this content here to stick so what we have to do is we have to group the content in that column first so I highlighted them both. Click on the three dots and we're going to group it. As soon as you group it you can now make that entire I mean essentially it's the column but we're making the components within the column sticky so just come across here make sure you have groups selected and you'll see this position option here in the customizer and then you can just click sticky and now that will make that content sticky. So you'll see as I scroll that column I mean it looks like the column is sticky but it's actually the content within the column that's sticky but it's had the desired effect. Next up I'm going to move on and add the query loop block over in this right hand column and that's going to bring the posts in. Let me show you again what we're looking at over on the right. Now the one the actual formatting I'm going to try and replicate is this sort of layout here where I've got the post title on the left and the featured image on the right because this is going to show you something really really cool that you can do with the query loop block. Right first up let's get rid of all that content that I've just dumped in those so I can multi-select these paragraphs here and just remove them all in one hit and then I'm going to click on plus and I'm going to search for the query loop block. There it is just another block that comes with a standard with WordPress and then I could start blank but I'm actually going to click choose here because I know that there is a layout that is close to the one I want and let's scroll down and we can probably see it there's a few that are close but that's probably the one I want it's nice and simple but the key bit here is it has my featured image and the post title into separate columns which is really powerful because you can do lots of stuff with this I'm going to add it to my page here it is you see it's not quite right one of the issues we've got is the featured images on the wrong side but let's look at the list view because this is really cool if we come into this you can see and what's what's cool about this is you can actually split your query loop which is the components of your posts basically into different columns so you can see here we've got the main query loop block at the start and then we've got the post template and there's different settings in both I've gone through those on previous videos I won't dive too much into those today this is the bit I really want to show you the fact that you can have a featured image in one column and then your post title in another column but you could put other blocks within those as well if you want to and of course because they're columns if we want to switch them around we can just switch them around like that and of course also because they're columns we can change the proportions of them so we could change this one on the left to let's say 20% and we could change the one on the right to 80% again and again you can play around with these proportions to get the proportions you want the other thing I really want to show you is that now in WordPress 6.3 you can fix the aspect ratio of your featured images in the query loop block this is great because you don't have to worry about resizing your images now when you upload them just come to the featured image come to styles come down to aspect ratio down here it'll probably be set as original but you then you can actually fix the aspect ratio that means when you upload a image regardless of the proportions it's going to fit that size so this is where I'm at I've got the basic structure right I've got the basic functionality right now it's just a question really of finessing things the first thing I want to do is add a little bit of padding around the side here you can see this tech crunch has got quite a lot of padding I probably won't add quite so much but I'm just going to go edit site and then literally all I'm going to do to keep things super quick because I don't have a lot of time today I'm going to select the columns block itself come to styles and I'm going to come down here I'm just going to add a little bit of padding again you can play with the padding settings I'm working very quickly today but you see how easy it is it doesn't take long at all and let's have a quick look and see how that looks and there we go that's a lot more accurate next up I actually want to start to change the size of the font here and bring a few other elements in you can see we've actually got the publish date and we've actually got the author as well the thing I've quickly done is I've changed the height of my featured images but kept the aspect ratio so it's more in keeping with the ones on the tech crunch website right let's just go and change some of this font sizes just click on the font again you can either just click in here or click on the list view to select it but just click on the title let's close that down so you can see it click on the title come to styles now choose the size that you want you can either choose one of these pre-selected sizes here or you can jump in here and choose the actual size yourself with different units available everything you probably expect and then you can also change appearance of it so I've got this appearance setting here and I want mine to be bold so it's more in keeping not exactly right but it's pretty close now I just want to add the author the post author so I select the block itself then click on these three dots and go add after now I just hit forward slash and then type post author and it'll find that block for me it's going to bring the author in you can customize this so I don't want to show the avatar and that's probably okay for now again I can click into styles and I can make this smaller if I want to I can do all the stuff you can normally do in fonts I'm working very quickly though and then after that we probably want a post date so again hit return and we want the post date which is there that'll just automatically bring in the post date then we just want to squeeze these up a bit so I'm actually going to select them both and group them and that will let me easily change the block spacing between them now just go to styles and you can see this block spacing here and you can scrunch those together so they get smaller so I've just finessed mine a little bit so I've made this one super light and this one bold and actually for this text here I have selected a black appearance here you can have extra bold as well and that's kind of more in keeping with the tech crunch website just notice something else I've missed which is this little bit here can you see it's actually got the category of each post above it and it's green so I'm going to just select the title block here and go add before and we're going to see if we can add the categories block just before and see if that's going to work and let's go categories looks like it's going to work yeah it's brought it in so we just need to style this now so I'm going to select it and go to the styles of that one and it's going to be a link so I want to make sure I click on that I'm going to grab the color as close enough grab the color and let's see how that's looking and that looks pretty cool doesn't it I'm pretty happy with that I guess no that's pretty good we've got a little bit too much space between my category and the actual post title so I've grouped them here and then hopefully using the block spacing setting I should be able to bring those much closer there we go that's pretty much that's pretty much perfect though this is where I've got to my site is over on the left it's looking pretty good I need to sort out my navigation but the main functionality in the design is done this is the layout I was trying to do you see these are slightly different some of these because they have essentially that would be the excerpt block so all I would do is add a third column within the query loop block and add my excerpt field into that which I could do I might do that at the end if I have enough time but this is the layout I wanted to do you see it's sticky that's all working great these all link off to the posts themselves which is fantastic they need a little bit of work as well but fundamentally the main structure the website's built let's move on and just build this navigation so there's really only two things we need to do to this is get the structure right as in the order of the menu items and change the design a bit shouldn't take too long let's click on edit site at the top first thing we're going to do is actually just fix up the order of these you'll see also at the top here we have this bit of text I'm going to add that it's just a bit of text that's fairly straightforward so I'm going to click into the block itself and now I can edit this block and that will turn it into essentially an editable navigation block and you'll see all the menu items over on the right here and these are all drag and drop so you can just drag these up and down if you don't want some of these to appear you can just click on them so I've got sample page here so I'm not click on them click on the three dots on the right here and you can remove it so it really doesn't take very long to get the structure right and there's my new structure pretty much right I've missed a few out but it's pretty much there now all we need to do is change the size of them squish them together a little bit and we're going to change the font so it's a bit lighter because it's too heavy on mine at the moment so I'm just going to select the block itself come across to the right here and you'll see we've got our styles as we normally do actually the first thing I'm going to do is just change the scrunchiness of them so I'm going to change the block spacing you can just change them here you can see you can squish them up and down so it might be okay for what you want but you can also jump in here and actually set either pixel or the other units that you might want that's probably enough and then the other thing we're going to do is change the appearance of it we want it light I love light there we go it's light and then we just need to change the size fundamentally and that's probably too big and medium might be too small yeah so it's probably between those so you can actually select one then click in here and it'll give you what you're currently using which is really useful when you're trying to sort of visualize the size of these that might be a little bit small as well let's try 1.65 and that's not too bad at all though I'm pretty much out of time but I'm very happy with how it's gone here's my finished site you can see I've got the sticky working I think the formatting is pretty close it's certainly in terms of the spirit there's a few little differences but fundamentally we've got a tech crunch replica website in about 30 minutes not using any plugins just using core WordPress and core Gutenberg blocks