How to Create a Custom WordPress Theme (without Code)

Key Takeaways

do you want to create your own custom WordPress theme all without writing any code we'll keep watching in this video I'll walk you through exactly how you can set up your own theme so if you're ready let's dive in to get this going quickly and easily we're going to use a couple of plugins we need to use beaver builder and a beaver theme er they work together perfectly beaver builder lets you customize pages and widgets areas and things like that and the beaver theme er takes it even a step farther and lets you customize things like your header your footer and say your single blog post pages so to get started let's go ahead and install the beaver builder and the beaver theme or plugin to get going now these are premium plugins but the cost of them is much less than hiring a developer to do your own site once you download the two plugins to your computer we can upload them first by going to our dashboard area we'll go to plugins add new and we need to upload the plugin once you find you want to go ahead and click install now and then once it installs you also want to click activate and then you'll want to add your license key to make sure that it's good to go along with the builder we also want to go back to the plugins area and we want to add the theme or plugin so let's go to plugins add new again we'll upload the plug-in we'll choose upload and we'll pick the theme builder or the beaver theme or plugin again activate it install now and activate it once you have those both installed and activated and then we can get started now you could go and go from the very basic and build it up from there but a lot of times there are theme packs or theme starters that can really set you up a little bit closer to what you're wanting it to be there are a few full-width templates that you can choose from the one that we like to work with is called the Astra it's a free lightweight all-purpose theme there's a free version that comes and it supports the beaver builder really nicely so what we want to do is we want to install that theme let me just close that out and we want to go appearance themes and you see right now we have the 2019 if you're watching this a later time by default WordPress downloads with a particular theme and this year were at the 2019 theme so we'll click add new and from here we want to look for Astra this is the one we want and don't worry about the look of it because it's going to all change but it gives us a real great foundation to go with so we're not having to do absolutely everything from the beginning so I want to install that and I want to activate that and what that means is now that it's activated that is our theme that we're using you see down here it shows active this was the one that we had it's still there but it's not active so I want to show you what this site looks like right now with just the default Astra installed and we'll make some tweaks to it I'm going to go up and visit in a new tab and we'll see what it looks like now this is Astra by default in you have the sidebar on by default and we actually for the beaver themer to work as well as we want it to we want to remove the sidebar area we're going to do real quick is we're going to go to appearance and we want to customize and there are all of these customizations that you can do with for right now we want to do the layout and we want the default layout it's currently with the right sidebar we want to do new sidebar and what that'll do is it'll bring it full width like you see here that's all we want to do for this right now so let's go ahead and click publish and now that's live on our site and then I'm going to exit out of here and then we can see what that just did by opening it up in a new window and you see it's a full width like that great okay so now we want to create a custom theme and then that's where the aimer part comes in so what we want to do is we want to go to beaver builder and from here you see all of these new items that we can choose from down here we want to click add new and this is where we want to make the changes so this we're wanting to set up a header that's usually this part up here and everything it's usually like the navigation menu your logo and anything else up here is usually by default we want to make that changes under the type we can choose Beamer layout because it's a particularly themer layout that we're wanting to work with and you see under the structure we have header and that's what we're wanting to use so let's go ahead and click Add theme or layout from here we have a few settings to choose from these sticky means that if you want it to stay if you want the header to stay as you're scrolling down then you can choose yes otherwise we'll choose no and then the overlay means if it'll overlay over other things then I will show transparency over it and for that we'll say no as well for location you want to choose where you want it to go you can either choose it to be on one specific area or you can choose it to be on all of your pages since we're doing this for our whole site we want we want to show this header on entire site so we'll choose that one and now you could even down here below you could add rule groups meaning you can choose to only show this to certain people who are logged in you can only choose to show it on certain posts or pages or certain authors again we'll choose to show it on the entire site okay and now we have all of that set up then we can go ahead and start building it so let's go ahead and click the launch beaver builder great this is where we can make changes you can see we can make the changes for where the menu is we can also make it change on how it looks either make it go make it vertical or accordion we're gonna keep it at horizontal scrolling down you also see that you can make changes for responsive meaning when a smartphone is viewing your site you can make it where a hamburger icon that's the typical standard menu item for smaller devices are looking at it then that's good and you can make those other changes here so we'll save our changes over here you see my garden blog and when I click on it the site title you see that that is what's coming in you can change it to any of these other items but since it's our header we probably want to just keep the site title here so we're fine with that over here we can change the look and feel of the navigation we can either do it as a fixed width and you see that I can change that here or we can put it back at full width scrolling down we want to take a look at the background color and we can make those changes for this color scheme so I'm gonna make changes to the background color so I can click on this here and choose the color that I want it to be and you see that makes changes in real time so that looks pretty good you can even make some different shapes to give a little bit more depth see when I change that for slanted edge it brings in a different look you know several other styles that you can choose from if you want we'll pick none under advanced this is where you can add a bit more margins or area and make it wider if you want under padding you can choose how thick or how wide you want the header to be we'll put it back down to where it was that looks good and you could even change it and add some animation when somebody clicks on it if you want so there are a lot of settings that you can do here and add to your header if you'd like so it's all pretty good we'll click Save Changes and you see this item up here this would be great for a freelancer or a contractor who needs this information now so like the social media but if you don't want that you can simply delete that I like how all those changes are so when we're done let's go ahead and click done and the publish and now those changes will be live on our entire site so once we've done the header now we don't have much in the content area and then you probably see the footer area this is the area that we can change next so we'll do that as well so we need to go back to our WordPress dashboard go down to beaver builder and click add new on the title to my footer area and the type will choose the theme layout and for the structure we're doing footer will add the theme layout and now down here same as with the header we can choose where to put it we want to do it on the entire site same thing here you can also add a group or just members or people who are logged in so click publish and you can also click lunch beaver builder from here alright so instead of doing the header now we're down here working on the footer area and this is what we have by default coming in and you can make changes to all of these it's like three columns that you can deal with so I've already shown you how to make changes to things so now what I want to do is I want to show you how you can add something so down here I want to add a map so what I want to do is go up here and click on the plus button and I need to find where the map part is so I'll find it here and I want to drag it down where I want it to go and now the map will open and we need to add an address for it I'll grab that address and put that in here because II here I can adjust the height and I'll make it just a little bit smaller I like that look there so that looks good there are a few other things that you could do to it but I think that looks pretty good the only other thing I want to do is I want to move it around a little bit so I'm going to grab the about Us and I'm going to move it above and I'm actually going to get rid of this text because I don't want that okay that looks pretty good so that is my footer area and that will show on all of my site now the only other thing I want to do is I want to make sure that the color scheme down here matches the color scheme on top so I need to go ahead and find the color to my top one to do that I'm going to quickly do inspect element to do inspect element just right-click on the area that you want to inspect and go down and find inspect and then I'll open up a new tab like this and find where that color hex is once I find that I'm going to grab the color and put it down here on my color picker great but that looks pretty good so we're going to click done and publish and now we have the header and the footer the next area that we want to do is we want to go ahead and deal with singular so basically any singular post and we want to change how that looks so go to beaver builder add new we want to give it a title do all singular for the type we're doing a theme or layout and this time we want to go down to the content area and we want to click on singular great now we can click Add theme or layout and choose where we want it to go we want it to go on all singular items and let's go ahead and launch beaver builder and this is what it looks like and these are all the areas that we can change for it when I click on the hello world this is pulling in the heading and that is the post title which is comes from the database so we want to keep that the same but you can make changes if you wanted to and then down here all of this meta information we can change this as well we could either show or hide the date right there and that is the publish date you can also change the default format so you choose something that looks a little bit better for you apparently I really like that once I'm going to keep that and then you see you also have modified date if you wanted to you could do modified date and if you've noticed a lot of people they've gotten to go in the recently updated or last updated date and that just gives great information for freshness but I don't want to have both of them so I need to go ahead and remove the publish date one so let me scroll back up and click hide and now I want to make some changes to the order in which they are so you can click on the orders tab and we can change which order these are in so I want to pull my modified date up and make that the top one and I like the look of that so it looks pretty good I'm going to go back and add the author because I want that one to come in as well I think that's great for branding and we could go under style and change the way this looks either make it left centered we either make it left adjusted or we'll keep it centered you can also change the typography here so if you want it to be different than your default font then you can choose that here show you what a couple of those look like and then that looks pretty good now that we're done with this area you can also customize all this area here you can change what you want to show you can change the look in feel of the comments section and everything if you want to make it smaller or or maybe you don't want it all up here maybe you want to move it down you can do that here I'll do that and we can move this underneath it if we wanted and if we want to remove this whole area we can exit out of there and then that pushes everything up so if you like that look then you can do that so make the changes that you want and however you want it to look and then once you're done go ahead and click done and click publish one final area that we can take a look at is the archive pages so we'll go back to our dashboard go to beaver builder let's click add new so choose archive so the archive pages can be pretty powerful they could be your category pages so you can have them layout in a certain way that's really beneficial to someone who clicks on your category page so we're going to click the layout of archives and then let's go ahead and click Add theme or layout and for this one we want to do post category archives so basically your category pages and then click Launch beaver builder and what this will do is it'll bring in by default it'll bring in the category name here you can change that but we actually like that there and then what you can do is choose how you're going to bring these in by default it'll list them out but from here you can do it in a column layout a way if you have multiples then I'll look in multiple columns here you can choose the columns here I only have one so it's only showing like that but that looks pretty good like that I'm going to click on the actual post and this is how we can change this as well I don't have a featured image on this one but we have it to show if there is one which I like that we have the image size will be 300 by 300 which is great as well and then you could have a fallback image where if your post doesn't have an image then you can choose one to fall back on and I'll show you what that looks like here great and so that would be the fallback but it'll also be when you have a featured image that's how it will look it'll come up like that and that would look really good if you have three in a row to really showcase your category page and this is showing on categories and categorized because that's the category that this is assigned to yours would look whatever category you have that's a very powerful you could set up your HUD pages or your Cornerstone content pages like this if you wanted to so we're going to click done and let's go ahead and click publish and now we have all of the main pieces to our theme set up exactly how we want it to look you'll definitely want to take some time to really change it up and make it look exactly how you want but this is how easy it is for you to create your own theme custom from scratch without writing any code and making it look exactly how you want and thanks for watching did you learn something from today's video if so subscribe to our YouTube channel and we'll send more helpful tips to help you manage your WordPress website and thanks for watching