Have you ever found yourself wishing you had a WordPress theme that was custom-made just for your website? Sure, the WordPress.com theme directory offers tons of options to suit all types of sites. In addition, you can upload any theme or plugin you’d like on the Business plan and higher. But in the end that’s still something pre-made and not unique to your site.
So, what if you could create your own theme and tailor it to exactly what you need? Alas, I hear you say, I am not a web developer! I don’t know how to code, how would I ever make something like that?
To that I say, fear not! As it turns out, you can absolutely learn how to create a WordPress theme without any coding skills. Thanks to the Create Block Theme plugin and the WordPress Site Editor, anyone can do it and in this post we will show you how. Step by step you will learn how to go from blank canvas to readymade block theme that you can export and use on any WordPress site.
In this article:
First, let’s talk about a tool that makes creating your own theme in WordPress much easier. The Create Block Theme plugin is available free of charge in the WordPress directory. As the name suggests, it helps you build your own themes, even without technical skills.
Here’s what it can do:
Export your active theme with custom settings – Download your currently active theme with any changes you have made for reuse elsewhere.
Create a child theme – Set up a child theme where you can make changes to your site without modifying the main theme directly.
Clone your theme – You can also make a copy of your current theme and export it, including any customizations you have made, as a new theme.
Overwrite the current theme – This makes your changes permanent by overwriting the default theme settings with yours.
Create a blank theme – The plugin can also set up a boilerplate theme as a blank starting point for creating your own design.
Save your changes as a style variation – Instead of creating a whole new theme, the plugin can also save your customizations as a style variation of the existing design.
Embed Google Fonts – Do you like a typeface on Google Fonts that you want to use for your theme or website? The Create Block Theme plugin can embed it on your site with just a few clicks.
Embed a local font – A similar option as above but for fonts that you have the files for. The plugin supports the .ttf, .woff, and .woff2 formats and makes uploading to and embedding them on your site easy.
Alright, let’s see how this works in practice. Below, we will create a brand new theme in the Site Editor and then export and use it on a live website with the help of Create Block Theme.
Note: It’s best to do the theme building and customization in a local development environment or staging site, meaning away from the public eye. It’s not a good idea to do it on your live site where your visitors can see the results of your trial and error.
For this tutorial, we will use the Blockbase theme as an example. The theme was made to provide a neutral starting point for your own ideas.
We have also filled it with dummy content to better see how the changes affect the design. You can use any other block-enabled WordPress theme in the same way as below.
The very first thing to do to create a WordPress theme using Create Block Theme is to install the plugin. For that, go to your existing (staging) site, then to Plugins > Add New.
Here, search for it by name and install and activate the plugin when it pops up in the list.
Once you’ve done that, you will find a few new menu items under Appearance.
Here, the theme provides all the options we talked about above. We will get into the particulars when we need them.
With the base theme established, the logical next step is to make the modifications you want. Here, you have two basic choices depending on the kind of theme you have chosen as your base.
First, there is the WordPress Customizer (under Appearance > Customize).
This is available for non-block themes. Depending on your theme, you will find options to change font settings, modify background colors or images, add a header image, and more. However, for more fundamental changes to the theme look you need to know how to use a code editor.
On the other hand, if you are using a full-fledged block theme, you get access to the Site Editor (located under Appearance > Editor) where you can make almost unlimited changes to your theme’s design.
Here’s what the Blockbase theme looks like out of the box:
With the help of the Site Editor, we can very quickly change it quite dramatically.
One of the most basic ways to create a whole new WordPress theme is to use Global Styles. It’s where you can control basic settings like colors, layout, and typography. You find them in the Styles menu inside the Site Editor.
A quick way to modify the way your theme looks is to use pre-configured style variations that a lot of block themes ship with. You find them under Browse styles in the Global Styles menu.
A click on any of the options available here instantly applies them to the site preview.
This is a great way to create a baseline for your custom theme. For example, in this case we will stick with the Charcoal variant that Blockbase offers.
A second thing we want to do to this theme is to increase the content width. Right now it’s a bit too narrow. Plus, it’s very easy to accomplish.
You can simply go to the Layout section and modify the values for Content and Wide. Again, the site preview adjusts instantly, showing how much more space you now have for your content.
Next up, we want to modify some of the typography on the page. Unsurprisingly, you find a lot of the settings for that under a menu of the same name.
Here, you have the option to modify the look of your general site text, links, headings, and buttons. Let’s start with Text, where you find the following options:
The first thing we want to do is change the typeface. The options here depend on the theme you are using. If you are not satisfied with the range of choices, you can use the Create Block Theme plugin to add more fonts to your site. It provides easy options for that.
In this case, that’s not necessary. The Blockbase theme already ships with a large number of fonts to choose from, so there’s no need to add more. We can simply use the drop-down menu to choose new typefaces for both the normal website text and our headings.
Together with changes to the font size, appearance, and line height, this already has a notable effect on the theme’s design.
The final touch we want to do via Global Styles is to play with the colors. You find the options for this, you guessed it, in the Colors menu.
Here, you can modify the hue of a number of different elements, from the background to all sorts of text-based elements.
In this case, we mainly want to change the colors of the links, including the blog post title. The options for that are in the Links menu. You can click on the rectangle at the top to set a custom color.
Do the same under Hover and we are done with Global Styles for the moment.
After that, it’s time to make changes to the elements on the page. Quick wins here are to swap out the header and footer. It’s very easy to do. Simply click on them in the editor, use the three-dot icon in the settings bar that appears, then choose the Replace option.
This will open up a new menu with different header or footer options that the theme ships with or that are otherwise present on your site.
Scroll or use the search bar to find something that you like. A click on any of them automatically replaces the default header on the page.
If there is something you want to modify about your choice, you can always hit the Edit button and work on it separately.
When this is done, it’s time to deal with the main content on the page.
The final change we want to do on the homepage is to change the look of the list of posts on it. For that, open up the Patterns menu on the left and pick Query from the drop-down options.
When you find something that you like, input it into the page (remember to remove the old Query Block). We can further modify it until it looks the way we want.
In addition, we added some dividers and spacing at the top and bottom for good measure. Here is the result of everything we have done so far:
It’s slowly coming together, don’t you think? Don’t forget to save any changes you make!
We’ve included a speed video here that demonstrates the process you’ve just learned. It’s run in double-time, so pause it at any point if you need to. This should give enough orientation to continue on with the rest of the text tutorial below.
Now it’s time to turn to the page templates. In case you are not familiar with this term, these are the blueprints that control the design of your pages and other content, similar to custom post types. Technically, when working on the homepage, you are also modifying a template named Index.
You can access the page templates for the rest of your site by clicking the logo in the Site Editor (upper left corner) and then choosing Templates.
When you do, you find a list of all templates available on your site:
With their help, we can get a bit more granular in our quest to create a custom WordPress theme without code.
For example, in this case, we want to change the Single template. It’s responsible for controlling the layout of single blog posts and currently looks like this:
A click on its name in the list of templates takes us to the Template Editor:
Here, besides generally cleaning up the layout and adding the same header and footer as for the homepage to make the theme more cohesive, we want to do a single thing: put the featured image as a banner on top with the post title on top of it.
This is as easy as replacing the Featured Image block with a Cover block and setting it to use the featured image.
We can also put an overlay onto the cover in order to make sure that any text on it remains legible and adjust its height while we are at it.
The next step is creating a Row block inside the Cover block and then moving the Site Title block into it.
Why not place the site title directly into the cover? Because the Row block allows us to center it both horizontally and vertically.
All that’s left after that is adjusting the design and alignment so that everything looks good. Here is the end result:
While we are at it, we can do the same for the Page template. Don’t forget to save your changes!
Finally, we want to work on the Archive template, which currently looks like this:
Here, besides changing the header and footer, we aim to make one major change, which is to display all the posts available in the archive in the form of a grid.
This, too, isn’t too difficult. Choose the Query Loop block, which is responsible for displaying posts. Then, in the settings bar, switch it from list to grid display.
After that, the template has the look we were going for:
Once again, make sure to save to make your changes permanent!
Once satisfied with how your theme looks, it’s time to export it. The Site Editor actually has an option for that built in. Click on the three-dot icon in the upper right corner to access the Options menu, then choose Export.
This will download your modified theme files with all the style and template changes you have made as a zip file.
If you want more sophisticated options, turn to the Create Block Theme plugin. You find all export options mentioned on the outset under Appearance > Create Block Theme.
To move your theme from one site to another, you can either straight up export your theme or clone it. The latter option allows you to pick your own theme name and provide a description, author name, and other information that will show up in WP Admin. Note that only the theme name is mandatory.
Both of these options allow you to use what you have created as a standalone theme elsewhere. Make your choice, input any information that the plugin asks of you and click Generate to start the download. Then, move on to the last step.
Naturally, when you create your own custom WordPress theme and want to use it on another website, you first have to upload it. This is as easy as going to Appearance > Themes.
Here, choose Install theme in the upper right corner and then Upload Theme in the next screen.
Doing so will open an upload form where you can use the Browse button to find your downloaded theme on your hard drive and then click Install Now to upload it. As mentioned, you can do this on any Business plan or higher.
If you choose to activate your theme in the next screen, your site will start using it right away.
Congratulations, you just learned how to create a custom WordPress theme and install it on another website without touching a single line of code!
With your new theme present and active on your site, WordPress will automatically use it for the design. That means, you can start building a site with your desired look right away.
One of the best things about this method is that the global theme styles automatically apply and show up in the Page Editor. So, when you are creating post or page content, you can see right what the content will look like on your site.
In addition, it will also use the templates you have created. For example, when you preview a post you are working on you will see the featured image as its header background with the title inside it.
Same if you start creating pages. Here’s what a basic about page looks like:
Fill in your content as needed, create a navigation menu, add widgets, and do whatever else you need to end up with a full-fledged website. And if it turns out that you don’t like something about how the theme looks on your live site, you already have all the knowledge you need to make the necessary changes.
Learning how to create a custom WordPress theme can feel like something out of reach for people without development skills. After all, in the past you needed some serious technical chops to customize web pages and do web design. Fortunately, WordPress offers powerful tools so you can not only create your own custom theme but also export it and re-use it elsewhere.
Above we have gone over the process of building a theme that suits your needs with the help of the Site Editor and Template Editor. By working with Global Styles and arranging template parts and page elements, you can quickly set up a custom theme design and layout. After a quick export, you can then use it as a standalone theme wherever you want.
WordPress.com plugin-enabled plans come with built-in social sharing, in-depth stats, and SEO tools.
Want more tips? Get new post notifications emailed to you.
Nick Schäferhoff is writer, entrepreneur, and online marketer. He has been building websites and writing about digital marketing for more than a decade. Outside of work, you can most often find him at the gym, the dojo, or traveling with his wife. Get in touch with him via nickschaeferhoff.com.
More by Nick Schäferhoff
Whether you need a landing page or a full ecommerce site, an online learning academy or an interactive informational site for your business, we can build it for you.
Invent the world’s greatest cat food, save a rainforest, start a needlepoint club. Whatever it is, it’s going to need a website—that’s where we come in.
Leave a Reply