Custom WordPress Blog with Gutenberg Blocks

good morning so i was uh trawling through the forums last night on wordpress and i came across this question uh which was how to show page title on post page and what they wanted to do very simply uh was put the word articles at the top of the blog page and the solution that they came up with was really complicated they started talking about you know the answer even though it was resolved in the end the answer got very technical so it was talking about uh creating a child theme and editing the index php of that child theme so we started to get right into code and it struck me that there was a really simple solution to this that would give them even greater control and actually so that's what i'm going to show you i'm going to show you how you can create a custom blog page using the block editor so you have 100 control over the elements on the page and the layout of the page all using just the base block editor no coding required whatsoever so here we go right so i'm going to show you how you can create a fully customized blog page just just using the block editor and in this case no plugins so we're just using the core gutenberg blocks that come with the block editor this is the page i'm going to show you how i built but just keep in mind you can layout this page how you like because you've got you know if you follow this method you will have a hundred percent control over your blog page so you can design this how you want but this is just what i did so at the top here we've got this excuse me we've got this nice intro section with a nice banner at the top which which introduces the blog page and tells your readers what this is about which is great then we've got a button here to subscribe to my newsletter so they can keep in touch with your posts then we've got the meat of the blog page showing here this is pulling in dynamically any posts that we published with the latest post at the top it all happens dynamically and again we're just using blocks to build this there's no coding uh there's nothing no third party plugins we're just using the gutenberg block editor and right at the bottom here we've got this nice section uh which has got about me that isn't me but you get the idea that this is a chance for you to tell your readers a bit you know express some of your personality here and also this nice keep in touch set cut touch section uh where they can keep in touch so you've got these nice funky social icons so this is what i'm gonna show you how to build just bear in mind uh when i do this it's up to you how you lay this page out you've got full control but this is how you customize your blog page so you're gonna start there's just a few steps to get this working you're going to start essentially by creating a brand new page now you can call this page whatever you like but this is going to become your blog page um so i'm going to call it my lovely new blog okay but now we start to rebuild the blog and the the main meet really of your blog page is going to be your posts so luckily there is now a block with the block editor which lets you bring in your posts dynamically and it is called the latest post block it's this one here okay so that's the one you're going to want and all you do is add it into your page so i'm just going to drag it across into my page and it will bring in some posts now to start with it's going to look a bit rubbish it's just literally going to list your latest posts so it won't look anything like what we need to start with but we're going to customize it using the inbuilt options to make it look a bit more elegant so to start with we're going to turn it into a grid layout and you do that at the top here you'll see we've got two different views we can show this list view which is the default view or grid view so i'm going to choose grid view that sets the grid still doesn't look great so we need to add a few bits of content and we do this over here on the right so this is the block customizer panel and there's a few things we want to do here the first thing we're going to do today is turn on post content which is this option here so just switch that on and that's going to bring in automatically some content for you you can change the amount of words you show in that snippet or excerpt here just by dragging this little slider along if you have handset handcrafted your excerpts and your posts that's what it's going to bring in so you can get complete control over the snippet over the except here but you would set that when you're creating the post so that's the first thing we're going to do the second really important thing we're going to do here is we're going to bring in an image and you'll see the option to display a featured image over here on the right so you just turn that on and that's going to pull in the featured image that you've set for each post and you again you set that featured image when you're creating your post there's just an option to set the featured image hopefully you know that and then the other thing we're going to do here because by default it will only show five items we're going to bump that up to six okay and that'll bring in my sixth item there we go so now we've kind of got the grid built there are some other options in this grid which i'm going to talk you through in a few minutes that you can really utilize to take this kind of to the next level but i'm going to finish off just building this page and then we had that nice top section and all i did for that is i used the cover block again this this block is a standard block that comes with the block editor so you don't need any plugins to use this one it's called cover and it's really cool it's really cool so what it lets you do is add a background color or image to a section in a page and then you can write over that image so i'm adding my image there and you can see how it's now prompting me to write some stuff so i'm just going to put welcome to my blog and what's really nice about the cover block is is that it's a container block and what that means is that you can put other blocks within this block so i'm just going to add a few more things within here i'm going to start by adding a subtitle or a paragraph underneath so i'm going to drag the paragraph block from the block library on the left and just pop it underneath my title and can you see the blue line that's telling me where that's going to go so just drop it there drag and drop and then write your subtitle and then underneath i'm going to add the button and luckily there is a buttons block that comes with the editor again no plugin needed it's just a block add the buttons block and this is where i had subscribe to my newsletter now with this depends a bit on which newsletter service you're using if you're using mailchimp which i know a lot of you will be then they will actually give you a link to link this button to your subscription box and to add a link to the button you just click on it and you'll see the little link icon appear and you just pop in the url but mailchimp will tell you when you're setting up your mailing list what to pop in here okay so that's the top banner there's other cool things you can do with the cover block like you can change the focal point of the image by dragging this focal point picker around and you can also add overlay colors and wizzy overlay gradient gradients and all sorts of stuff like that okay and change the opacity on it so you've got full control oh you can also change the height of it just by dragging that up and down so the cover block is really cool it's really powerful okay so that's that's the top section done and then down below here i had that other nice section and i created that just by using i put i had two columns if you remember so i'm going to add the columns block now there are two ways to add blocks into your pages you can either find it over here on the left let's do it that way for now so i'm going to find the columns columns block and i'm going to drag it underneath my posts okay and this is where you set the columns that you want so it's up to you which proportions you choose i'm choosing one-third two-thirds and then on this section i just had a heading to start with so i'm going to add the heading block about me it's all about me then i had some text underneath so i just pasted some text in and then at the top here i had an image now you can again you could find the image block here and you could try and drag it but it's sometimes with columns blocks it's a bit tricky but most of the time it's okay so i'm going to i'm going to drag it in there and then it's just prompting me to choose a photo from my media library so let me just choose a picture that's the picture i want okay and what i want to do is just make that a bit smaller now if you want the text to wrap around that image what you have to do is you have to just align it so this is the key bit so if i like align that right can you see how the text now naturally wraps around it okay so that section is looking good and then the only other thing i needed over here was another heading so i'm going to add a heading block into that column this is my keeping touch section and then i had if i remember all i had was some text underneath and then i had those nice social icons so again so a shortcut to ad blocks is this can you see how i'm just typing forward slash and then the actual block name so you can add them like that or you can always use this plus so there is a block called social icons which again is a core block so you don't need any plugin to use this it's just part of the block library just drag it in there okay now once it's in place to actually choose your choose your icons you want you click on this plus sign and then search here so i'm searching for facebook and it will find the icon and to link that you click onto it and this this is where you would link to your in this case your facebook page i'm just going to put a hash in here for now um and this is again let's say you want an instagram one same deal click on it that's where you'd put a link to your instagram account and then let's just do a twitter one same deal okay so hopefully you get the idea of how you add your social icons and that's my page my lovely new blog page done let's publish that now okay so that's all good and the final step really is all you need to do is add that to your menu okay to replace your existing blog page so there's your existing one i'm going to add my new one there i'm going to remove my old blog page and i'm going to rename this simply as blog obviously you can call this whatever you like it's up to you save your menu and now when i go back to my website i should have there's my blog click on that and that should just go to my new customized blog page so that you know for me that looks a whole lot better than the the automatic blog page that you're probably seeing at the moment if you want to take it to the next level what you could do is your latest post blocks here you can actually filter these by category so one thought for you to leave on to finish on excuse me you could have different sections within this blog page so if you had you know if you had different uh categories for this is kind of a sporting theme at the moment this site so for example the top section could be all my cricut posts then i could the next section might be all my football posts so again what you're doing really is making it easier for your readers to see and to get to the content that they're really interested in reading about okay but you've got those choices here you can really lay out this page however you like so there we go that's how you can create a custom blog page just using the block editor no plugins if you enjoyed this video then i'm producing more and more content around the block editor these days so be great if you could subscribe just click the subscribe button below if you enjoyed it as well if you can give it a thumbs up that makes a massive help in terms of sharing this and makes it easier for me to create lots more of these tutorials so thank you very much for watching and i'll see you soon

Channel: Jamie Marsland

Views: 1,575

Keywords: block template in wordpress, blocksy blog page, blocksy grid layout, blog post generateblocks, blog post template with gutenberg builder in wordpress, custom blocks wordpress free, gutenberg, kadence blocks, wordpress, wordpress block editor, wordpress block editor tutorial, wordpress blog theme

Id: SuW_gzqBexs

Length: 12min 41sec (761 seconds)

Published: Sat Apr 10 2021