 Hey, welcome everybody! In this video I will show you how to create a block-based theme without having to code using the Create Block Theme plugin and Gutenberg. This plugin will allow you to create a new theme, blank theme, chart theme and style variations. It also has a pretty cool feature which lets you upload fonts or you can choose from the Google library. In this video we are only going to cover the creation of the theme and exploring some of the options. I will be creating a full site using the Create Block themes in another video. Hey, welcome everybody! Before we start, for those wondering what web server I'm using locally for this example, I'm on Windows and I'm using LaraGon. As long as you have an up-to-date WordPress website that supports blocks then you should be good to go. I've already created a brand new WordPress website and as you can see this is using the default theme which is 2023. To jump to the dashboard, the first thing that we need to do is go to plugins and then add new. From here we need to search for Create Block theme and install the first one in here which is the one with the blue icon that was created by WordPress.org. So install now and click activate. Next we need to install Gutenberg so add new and then Gutenberg we can get from here from the first page. Install now. So Gutenberg is actually going to unlock some of the latest features that we can use and I'm going to show you this in a second. Now the first thing that we need to do is go to appearance and then themes. From here as you can see these are the three themes that we have currently installed and we need to create a new one with all block theme plugin. So if you go to appearance create block theme from here you will see that we have a couple of options. For example, export 2023 create a child theme clone override create blank theme and create a style variation. For this tutorial I'm going to be creating a blank theme. So select that and then I'm going to give it a name of ready. The rest is not required. So I'm just going to click generate. As you can see all blank theme was created and now if we go to appearance you should be able to see inside here. It doesn't have a thumbnail but that's not a big deal. So let's click activate and now all theme should be active. If we go back to the website and if we refresh you should be able to see that all theme just changed. So we have a very basic header. We have the content here and we have a very basic putter. If we go back to the dashboard and if we go to appearance and then manage theme fonts from here is where we can add custom fonts. Now you can either choose to add local fonts so you can click on this and browse the font from your computer and upload that. It has to be in those formats specified in here and all you need to do is give it a name and a font style and just upload the font. For this tutorial I'm going to be using Google Fonts. I'm going to go to manage theme fonts and then click add Google font. Now since I'm using LaraGon some of you might get a permission error and I want to show you what it is and how to fix it super quickly. It's only going to take a second. So if I select the font it doesn't really matter which one it is. Select the variant and then add Google Fonts to theme. You will see that I'm getting an error and the error is WordPress lack permissions to write assets. This is basically saying that WordPress doesn't have permissions to write the font assets into the folder. In order to fix this on Windows with LaraGon all you need to do is open LaraGon stop all the services close it and now search for LaraGon in your applications and then right click and run as administrator. Press yes and then start everything. Okay, click back on manage theme fonts and that should fix your issue. Now if you go back to add Google Fonts and we can select the font style you want. I'm going to select IBM and the one that I want is going to be the IBM Plex Sans and from here we can select the variations that we want. For example I can choose regular and bold and extra bold in here and just add this font to your team. I'm going to add one more for this example. So let's select and this one is going to be called quicksand this one here and this is going to be the font for the headings with the extra bold in here and add Google Font to your team. If we go back to manage team font you should be able to see that we have the system font. We are the IBM font and we have the quicksand and now we can have a look at how we can change the appearance of our team. In order to do this go to appearance editor. This will open the full site editing editor. Inside here we have a template and inside here we have the template parts for example the filter and the header. That's not something I'm gonna look into now. Today what I want to show you is the global style. If we click here on edit and then here on the right side you will see that we have two icons. One is settings that toggles the settings bar and the block settings in here and the other one is the style. So if you click on styles from here you'll be able to change some of the global styles. For example, topography, colors and layout. Now let's start from the bottom and I'm going to show you why super quickly. So for the layout if we click on this you will see that you can change the width of your content area. For example, as you can see it's quite constrained in here. So I can change this to 1400 like so and for the white maybe I can just put it as 1600 instead. You can also mess around with your padding and the block padding from here. As you can see it changes everything. I'm gonna control and set this to 24 pixels and I will go back and let's have a look at the colors. For the colors we have a default palette in here. So if I click on it you'll see that we have a couple of default colors that we can use throughout our website and the same with the gradients. There are a couple of gradients but if you look below this you'll see that you can add custom colors. So for example, I can click add color and from here let's start with a yellowy color for example like so and I can give it a name. Then let's create two more. For example, this can be like a slightly less darker black color. I'm gonna color almost black and then I'm gonna do one more which is gonna be a red color and this is gonna be pretty much red. Now before you leave this page you need to click done and this will add the custom colors and now we can use them throughout all layout. If I go back inside here you will see that we have elements such as the background. So I can change the background killer from here if I wish to. Let's go back. We have the text but the text maybe I can change it to the one that I just added. It won't make much of a difference because it was already black I think and then we have the links. For the links maybe we can just go with black like so but as you can see if I change the color the links change as well which is pretty cool. I'm gonna leave as black and then we also have headings. For the headings I'm gonna click black in here but you're getting the point you can select whatever heading you wish for example h1, h2, h3, h4 and select the color that you wish and then you can do the same thing for the buttons. Now one really cool thing that I wanted to show you before I change the buttons is that if you toggle here on styles you can click on this icon here and this is gonna show you the style book which they have created and this is pretty awesome. Now the reason this is awesome is because if I wanted to change the buttons obviously I want to see how they look like and what I could do is if I click on the second tab here you will see that we get in different media then we have design tab. So on the design tab we have the buttons. In this case I can go to the styles of buttons and from here I can change the colors to whatever I like for example the red ones and then we can also change the actual text inside you can make it black or whatever is more contrasty like so. Now let's go back and let's have a look at the rest of the stuff. Let's go back one more time and once you go back to this style screen let's go to the topography here and we can do exactly the same thing that we've done with the colors for example we can change the topography from here to the topography that I added earlier. So in this case I'm gonna go with IBM Black Sands as you can see they change and they look really nice. We can change the size appearance and so on and that's the text then we have links this is just gonna use the default one so I'm gonna leave it and for the headings first of all let's make sure that we see them so I'm gonna click on headings here and let's click on text so we have a couple of headings here and now let's choose the font I'm gonna choose quicksand and as you can see this changes the font straight away appearance we can set to extra both or both I don't know which one I downloaded but as you can see you can mess around from here and make your font look the way you want as you can see we can make it larger and so on let's go back and let's have a look at the buttons now for the buttons if I go to design one more time from here we can change the font to whatever we like for example the quicksand looks pretty cool we can put it as IBM Black Sands and so on the last thing that I wanted to show you is that if you go back to styles and if we click on blocks from here you can actually edit a lot of the blocks not all of them have options but what you can do is you can either select one of them like so and this will go to the right page here for example it selects the buttons but let me show you another example I can go to media and I can select this image here and as you can see it has one option here for border so potentially I could change the border like so you have to mess around let's go to the cover here if I click on this you'll see that for the cover we can change the topography maybe I can change the quicksand we can change the layout maybe want to add some pannings and margins and so on so you can literally go around here select whatever element you like for example the button you can go to the border here and change here if you wish so let's make it square save this color you can change the background color if you wish and so on now that we've done some changes to our theme I can click save save and then if I go back to the team refresh you will see that our team has changed and we have some of the tiles in here and now just like that you can start building your page with good and back and the last thing that I wanted to show you super quickly is that if I go back to the dashboard if I click on appearance create block team from here I can export the team like so and if we super quickly have a look at the team files I click on team.json you should see that it has similar the options that we created for example the yellow color that I added the almost black color the pretty much red color and the fonts and so on so this is pretty awesome I hope and before I finish with this video we can definitely remove this plugin from here so we can deactivate Gutenberg and we can deactivate the block team and our website will be totally working just like so because we created the team we don't really need that anymore anyways thank you very much for watching I hope that you found this useful consider subscribing to my channel like this video and comment below