Free WordPress Gutenberg Theme Maker

oh good morning today something really exciting i'm going to show you how you can make your very own wordpress theme with no coding for free just using the gutenberg block editor this one around me is the one i built so let's get into it as ever i will put chapter markers below on the video so you can skip to specific sections or whine back to specific sections all the plugins and themes that i mentioned as well i will link to in the description below the video right there are three things that you need to install before you get cracking with this the first is you need to install the block based theme from automatic this is a free theme and think of it just like a starter wordpress theme so it's fairly blank but that enables us to create the layouts we want and then save them out second thing you're going to need is the create block based theme plugin which again is a free plugin i will link to below so you can download it so you need those two things at the moment you also need the gutenberg plugin once the next version of wordpress released you won't need the gutenberg plugin we only need that so we can access full site editing functionality now it's time to start designing our theme so we're basically using the block based theme as a starter theme and we're going to build our designs with that theme and then export them out as a theme i'm going to start just by changing a few of the styles and the colors now this is the one i've already actually customized so when you come to do this yourselves yours will look different to this it's the same principles those you'll be white and you won't have these funky social icons but i'm going to start by clicking customize and all i'm going to do quickly for this one is change the colors here and i'm going to change the background color to black and i'm going to change the text color to white next up it's time to edit the template now what's beautiful about this process is we're actually using gutenberg and full site editing to design our theme so there's no coding whatsoever needed at all we're basically using the block based theme as our starter theme and then using gutenberg and the power of block to design the layout which we can then export out now i'm not going to dive into too much detail on full site editing today i've done that in the past in previous videos which i will link to either up above here or down here in the description and i've done lots of tutorials on that so go and check those out all i'm going to do is design the the header so i'm going to go to template parts and then to header and then header and in here now you can see i can actually start to change the layout what's beautiful i'm using gutenberg to design the layout of my header which then i can export out as a theme now you can do anything you like in here but i'll just do something very simple let's move the group here the navigation so it's now next to the site title and tagline the social icons will be in their more normal place which is over on the right so let's just go and check out that's worked and here we go here's the finished result of my my brand new theme so far so i've got my nice new header along here with my menu items and my social icons the other thing that i've done this is the home page i've actually created a new page template called home page where i've removed the page title and again i cover full site editing in more detail in the other videos that i will link to but you'll see if i go to templates here in general templates i've got this new homepage template i've actually removed the page title because we don't want the page title to show on the home page all i've got is the post content and the header and actually a footer but you can go to town you can you can create any kind of layouts you like using gutenberg so you're designing your theme using gutenberg and full site editing so here's my finished theme admittedly i've come fairly quickly now it's time to export it out as a theme this is super easy because we're going to use the theme creator plugin you just go to dashboard and then you'll see this new option down here create block based theme click on that and then you've got a simple form to fill out with some fields this is where you could give your theme your name this leads just link to when you have the theme details uh so all that's me and again the url i'll put me and then you just click the blue crate block based theme button and that downloads down here as your new theme so it's super cool and exciting and then you just drag that to your desktop there's your brand new theme let's unzip it to have a quick look inside see what we've got here these are all the theme components that we now need so we can now upload that theme to a completely separate site and then it'll inherit the styles of that theme actually there's one more thing to mention here if you want to get really snazzy and have your very own thumbnail when you upload the theme like you get in normal wordpress themes then you just need to upload a file into your theme folder called screenshot which i've got one ready here let's delete the existing one and just upload that into the root folder of your theme files and then all i'm going to do is re-zip that to create it as my new theme delete the old one here on my desktop i will compress that one and now we're ready to upload it and see if it works right so here's the website completely different website that i'm going to upload my new theme on one thing to mention you will need the block based theme installed as your parent theme so what we're actually creating here is a child theme of the block based theme so you see i've got it installed so click upload find your theme this is highly exciting there's my jamie's new theme click open and install it press your fingers for a second time activate it there it is there's my cute little thumbnail which i uploaded and here it is here's my brand new theme working on this site so there we go i hope you enjoyed that now what we're seeing here we're right at the start of where i think this is all going to go because what's cool about this is we're using gutenberg to design themes now we can do these customizations for a number of technical reasons the most important one really is that themes now have been simplified because we're using full site editing and basically our themes are made up of blocks now i'm going to cover this in a future video but personally i think this has really profound implications for how themes are made who makes themes and also the theme ecosystem and also the type of themes we make but that's for a future video so i hope you found this useful if you did if you can hit the thumbs up button now that'd be amazing because it really really helps spread the word of the channel also every time you do hit the like button our cats get a little treat [Applause] [Applause] and if you want to see more videos like this hit the subscribe button as well because i'm producing more and more videos around wordpress and the block header so thank you so much and i'll see you soon

Channel: Jamie Marsland

Views: 1,346

Keywords: gutenberfg, gutenberg, block editor, wordpress themes, gutenberg themes, full site editing, automattic, theme generator, theme creator, theme plugin

Id: 27AXO1CFFlM

Length: 5min 59sec (359 seconds)

Published: Tue Nov 23 2021