Custom Single Post Layouts with WordPress Gutenberg

good morning today i'm going to show you how you can create any layout you like for your single posts using gutenberg and a full site editing theme and this is going to give you a glimpse of the amazing power of full site editing so i'm going to take you step by step through it i'm going to show you how to build your own custom layouts i'm going to show you how to restore layouts if you don't like them and you want to restore them back to the default theme layout i'm also going to show you how you can export your layout so you can use them on other websites and i'm also going to explain dynamic blocks and why they're so important to this whole process so let's dive into it right first thing to say is you're going to need a copy of the latest version of the gutenberg plugin which is freely available from wordpress.org so install that here it is and you are also going to need a full site editing theme there's not many around at the moment but i've just got um three here to show you which are really good tuva uh so these are all freely available from wordpress.org toover is a great one uh clove is another great one here it is i'll put these links as well in the description for you and also this one here tt1 blocks by wordpress.org is another free one so you need to install the plugin and then use one of those themes for this demo i've created quite an extreme single post layout which i've customized myself so this is what i've done and so i've created this enormous post title up here which i've decided to put above the featured image this featured image is being pulled dynamically from my post content and then down here i've just got my normal post content again built using gutenberg and then down here i've just turned off comments i've also hidden things like meta information uh which is your publish date and stuff like that because i just wanted this nice and clean so i'm gonna show you how i created this and by going through that process you'll learn how to create your own custom single post layouts as well right let's get into editing the single post template so we can create a custom layout for our posts and when you install a full site editing theme and the gutenberg plugin you'll see a brand new menu in your dashboard that says site editor that's where the magic happens so let's click on that and if you need a fuller tutorial on the full site editor then i'll put a link in the description below because i've just done one but that's going to load in the full site editor and then we just need to click on the wordpress logo on the top left okay and we're after this option here single post that lets us edit and customize the single post layout for all our posts okay and it's all built using the gutenberg block editor and here it is it doesn't look very exciting at the moment but these are all dynamic blocks these are pulling in content automatically from my post content i'll just flip back this is the post i've got it's not particularly exciting we've got a post title and some content can you see there let me go on the list view which is these three lines and i'll just close up header and i'll close that footer and we can actually see now the the kind of hierarchy of how this has been built so we've got a post title which is this option here then we've got a spacer block and then we've got a group block and within that group we've got the post content which is this one here and then we've got another group block with the spacer with columns with our meta information so that's kind of what we've got i'm going to show you next how you can change and edit it really the key to understanding how you build these templates is understanding the concept of dynamic blocks dynamic blocks let you pull content in automatically from your original post content and hopefully we have a whole bunch of them that come now with full site editing which i just baked into wordpress now this is why it's so incredibly powerful they're listed under theme here now some of these are to do with your archive pages not your single post page so i'm not going to concentrate on those today those are for another video but just a few to pick out so you've got your post title it's going to pull in your post title you'll post content obviously you'll post content then you've got your post date post uh except we don't need for this uh post featured image we're gonna add um then we've got login logout we don't need that for this nor navigation that's your header template parts are things like headers and footers so we don't need that for that but we do we might need post author if you want to display the author of the post uh post comments is also here uh post comment count so hopefully you get the idea this is pulling in the information dynamically generated into your posts here's a prediction there is going to be a boom of people building really cool dynamic blocks for wordpress that do things we can't even imagine yet that you can pull into your posts i'll tell you one that's needed um a bit later on but that's the principle of dynamic dynamic blocks they're baked into wordpress so they're now part of wordpress so wordpress is now a block based system right let's move on to now to actually editing the template i have simplified my single post template just to make it easier to show you and explain what's going on so you'll see on the left here in the list view all i've got in my post template is a spacer post title another spacer and then your my post content and this is the actual post that we're it's currently producing so if i go to any of my posts now they are inheriting this layout we're going to make some changes though so under the post title i'm actually going to add a featured image now i can either do it by clicking the little plus here or i can hit the normal plus sign scroll down to my theme blocks and find the post title and just drag it across it's not the post title sorry the featured image which is that one there and drag it across that brings in the placeholder won't bring in the natural image and then with this one what i want to do is just select it let's just see so we can see here it's selected and with that in fact let me just save that for now and then go back here and we should see now our nice featured image looking pretty cool uh the other thing i want to do on this one is just make a few changes so this title this post title i'm going to change the font size of it over here on the right each block can be customized this one i'm going to make huge uh in fact let's make it bigger let's go to 100 let's make it really big and i'm also going to change these the font to monospace which is kind of funky this is the placeholder for my content but i could add any of my theme blocks under here if i wanted to uh let's just go down to theme here and you'll see i could add any of these blocks and if i wanted to so the post date exit or indeed i could add the comments so let's do that next let's add the comments uh form underneath here so people can now post comments save it go back to my site and there we go there's my enormous post title with the new text in it under here i've got my normal post content uh and then further on down here i should have my comments box box and but that applies to all my posts now let me just try a couple of other things you can also do things like at these crazy overlays so let's add a crazy overlay to my featured image this is the featured image block click on the list view just so we can see that and save it and you'll see now that that has that crazy not massive fan of it but you can you get the idea that that is actually being applied to all my posts so if i go to any of my posts now they will all inherit this new single post layout that i've just created there we go there's the featured image being pulled in automatically and the comments box underneath if you didn't want the comments box to appear you could just delete it but we are now just using gutenberg to create our post layout so it's like incredibly incredibly incredibly powerful and we're right at the start of um you know what's possible some blocks that i think are missing from this is i would love i would love the ability to add a cover block that also pull in your post title automatically uh within it and when i say i can do that at the moment what i can't do is pull in the features image dynamically and set that as the background to that cover block that would be really awesome there we go that's how you can edit your single post templates here's a couple of other things to consider so next up i just want to quickly show you how you can restore your templates back to the original default theme template so here's my template and i've actually just put the featured image above my post title which kind of looks cool right but my customer doesn't like it and they prefer the original layout so there's an easy way to restore these you just go to the theme the full site editor go to your template as we have this is the one here uh you click on can you see at the top here where it's a single post click on that and you'll see this option here which is super useful which is clear customizations click on that and that restores the template back to the original themes default one of the really really really profound changes that full site editing is become is bringing to wordpress is this ability to share layouts between websites we're already seeing this with block patterns but now we're seeing it with templates like the single post template but also everything within your theme now is a block so it can be shared much more readily let me show you how this potentially can work already so if i go to appearance here and go to templates that's going to show me all the templates that i've customized and you'll see there's my single post template so what i can do here now currently this is this is the template i've created on this url18tags.com and that's going to load in the template that i built okay all the blocks that i need but what i can do now is copy that onto another website which is really really cool so to do that i'm going to click on the three dots up here go to the code editor view and this essentially is showing me the code editor the code view of what gutenberg is doing under the bonnet so i'm just going to copy all that now i have another website where this is currently what the po that single post layout looks like and this is the single post layout and all i'm going to do here is i'm going to be very destructive i'm going to delete everything within it so basically the head of the footer everything within this layout is going and i'm just going to be left with a paragraph block and i'm just going to paste in that layout that i copied from that other website so it's going from one website to a completely another website but it should be the same custom post layout there we go and there we go how cool is that so you can see how easy it is to copy um you know these layouts these these layouts from one website to another website so it's it's incredibly profound change that's going to have all sorts of implications which i'm going to be exploring um in a future video not so long from now because this is going to be massively disruptive and interesting to the wordpress theme system and the wordpress page builder system for sure just one final point before i finish up and that is i got a comment from a customer last week saying how this is so dangerous for their customers to get hold of and of course your customers if you want to lock them out from this stuff you can this will only be an admin experience where you have this full site editing functionality so there we go there's a look at how you can customize the single post layout using gutenberg and full site editing i think it's incredibly exciting if you enjoyed this video if you can give it a thumbs up i will love you forever and if you want to see more videos like this hit the subscribe button and i'll see you very soon

Channel: Jamie Marsland

Views: 1,218

Keywords: customize single post, elementor single post template, full site editing, gutenberg, gutenberg fse, gutenberg wordpress, gutenberg wordpress editor, gutenberg wordpress tutorial, kadence, remove comments single post, remove featured image single post, remove meta single post, single post template, single post template elementor, single post template plugin, wordpress, wordpress full site editing, wordpress single post template

Id: NJH6XU3jHaU

Length: 11min 28sec (688 seconds)

Published: Tue Sep 28 2021