Do you want to create a custom WordPress theme from scratch?
In the past, you had to follow WordPress codex and have good coding knowledge to build custom WordPress themes. But thanks to the new WordPress theme generator, anyone can now create a fully customized WordPress theme in an hour (without coding knowledge).
In this article, we will show you how to easily create a custom WordPress theme without writing any code.
Create a custom WordPress theme for beginners
Unlike static HTML websites, WordPress themes are a set of template files written in PHP, HTML, CSS and JavaScript. Usually, you need to have a correct understanding of all these Web design languages, or hire Web developers to create custom WordPress themes.
If you hire a developer or agent, the cost of customizing WordPress themes may reach thousands of dollars.
Because many small business owners can’t afford the high cost of customizing WordPress themes, many of them have just decided to use the default theme that comes with WordPress.
Those who don’t want to solve the problem and want to customize it either use the drag-and-drop WordPress page builder or use the theme framework to build a custom theme.
Although WordPress theme frameworks make it easier to build WordPress themes, they are solutions for developers, not ordinary website owners.
On the other hand, WordPress Page Builder plug-ins can easily create custom page layouts using drag-and-drop interfaces, but they are limited to layouts. You can’t use it to build custom themes.
Until Beaver Builder, one of the best WordPress page builder plug-ins, decided to use their add-on Beaver Themer to solve this problem.
Beaver Themer is an add-on to Site Builder that allows you to create custom theme layouts using a drag-and-drop interface without learning coding.
Let’s see how to easily create WordPress themes using Beaver Themer.
Set Beaver Themer to build a custom theme.
Beaver Themer is an add-on to Beaver Builder, so this article needs two plug-ins.
First, you need to install and activate Beaver Builder and Beaver Themer plug-ins. For more details, please refer to the step-by-step guide on how to install WordPress plug-ins.
Beaver Themer allows you to create a custom theme, but you still need a theme to start with. We recommend using a lightweight theme with a full-width page template as your first theme.
You can find many such topics in the WordPress.org Topics Catalogue. Most modern WordPress themes include full-width templates. Our first choice is:
Astra–Free lightweight universal WordPress theme with built-in support for Beaver Builder.
OEANWP–Another popular free multi-purpose WordPress theme with full page builder support.
StudioPress Themes–All their themes are compatible with Beaver Builder and can be used with Beaver Themer.
For the purpose of this tutorial, we will use Astra, which is light and easy to customize WordPress themes.
Set your theme for the beaver
When building a custom WordPress theme with Beaver Themer, it is very important to ensure that Beaver Themer can access the whole body of the page (from edge to edge).
This is the default Astra layout. As you can see, this layout contains a sidebar, which is difficult to handle when using Beaver Themer.
You can visit the administration panel of the website to make changes, and then navigate to the appearance customization page. From here, you need to switch to the Layout»Sidebars tab.
There, just select “Boundless Bar” under the default layout options, and then click the “Publish” button to save the changes.
Your theme will now start using a layout without a sidebar. This is the best layout for use with Beaver Themer.
This full-page layout allows Beaver Themer to use every inch of the screen, so you can create a beautiful end-to-end visual experience.
Most WordPress themes include template files for full-width pages. If you are using another theme, you may find the option to delete the sidebar in the theme settings.
If you can’t find it, please contact your theme developers, who may help you.
After you set the theme to a full-width layout, you can use Beaver Themer to create a custom WordPress theme.
Fast beaver Themer Fundamentals
Beaver Themer works on Beaver Builder. As a page builder plug-in, Beaver Builder allows you to drag and drop items onto a page to create a custom layout.
It has the following items that can be used in the layout:
Template: a collection of columns and rows, and modules that make up the whole page layout.
Column: vertical layout module, which helps to align content horizontally.
Row: a horizontal collection of multiple modules.
Module: projects that output specific information, such as titles, text blocks, tables, galleries, etc.
Just edit the page in Beaver Builder and click the Add button in the upper right corner. Then, you can drag and drop columns, rows and modules into the page and start editing them immediately.
If you don’t want to start from scratch, please choose from the list of pre-made templates.
Beaver Builder also allows you to save a layout and then use it as a template.
To learn more, see the article about how to create a custom page layout using Beaver Builder.
However, we don’t just want to create page layouts. We want to create a complete custom theme.
This is when Beaver Themer came in.
It added another project named “Themer Layout” to Beaver Builder.
These layouts allow you to create custom layouts for headers, footers, content areas, 404 pages, and other template parts.
These are the building blocks of all WordPress themes, and by using them, you will be able to create custom themes that suit your needs.
Create a custom WordPress theme using Beaver Themer templates.
In the following instructions, we will guide you through the steps required to build the most popular custom theme elements. When you are finished, you will completely convert the basic theme into a fully customized WordPress subtopic.
Build a custom title for your theme.
Let’s start with the title area of your website. A custom title is a necessary component of a theme, and it is very tricky to build one that can use traditional methods.
Fortunately, Beaver Themer has a built-in title function. You can use pre-created templates, or you can use menu and image modules with a two-column layout.
In order to enter this title area, first of all, we need to set the title layout in Beaver Themer. Visit Beaver Builder» to add a new page and provide a title for the title.
After that, select “Themer Layout” as the type and “Header” as the layout option. When finished, click the “Add Themer Layout” button to continue.
This will take you to the layout settings page. From here, you need to select “entire site” as the location where the title template will be displayed.
Next, click the “Launch Beaver Builder” button to open the builder interface.
Beaver Builder will start with the basic single-column and double-row header layout.
You can use the same Beaver Builder drag-and-drop tool to change the background, color, text, etc. You can also add other modules, load prefabricated templates and add row/column corners by clicking the Add button in the upper right corner.
When you are satisfied with the design, click the Finish button to save or publish the layout.
You can now visit your website to view your custom theme titles. As you can see, we have applied the title layout to the custom theme.
You will not display anything except the title, and you may see the footer area of the basic theme.
Let’s change that.
Build a custom footer for your theme.
You can use Beaver Themer to create a custom footer for your theme, just as you create a custom header.
Go to Beaver Builder» to add a new page and provide a title for the footer layout. Next, select’ theme layout’ as the type and ‘Footer’ as the layout option.
Click the “add Themer Layout” button to continue.
This will take you to the layout settings page. From here, you need to select “entire site” as the location where the template will be displayed.
After that, click the Start Beaver Builder button to open the builder interface.
Beaver Builder will use three columns to start the footer layout. You can use this layout as a starting point and start editing.
You can add modules, text blocks or anything else you want. You can change colors, fonts, and add background images at any time.
When you are satisfied with the design, click the Finish button to save or publish the layout.
Build content areas for posts and pages
Now that we have created a header and footer for each page and published it on the website, it’s time to build a post or page body (content area).
We will start in the same way as building headers and footers by adding a ‘Singular’ layout to the Add New page.
Next, you will choose where to display this layout. You can use the singular form for all individual posts and pages, or you can select posts or just pages.
After that, click the Start Beaver Builder button to open the builder interface.
Beaver Builder will load a sample single layout with post/page title at the top, followed by content, author bio-box and comment area.
You can point and click to edit any of these items, or add new modules, columns and rows as needed.
When you are satisfied with the layout, click the Finish button to save and publish the changes.
You can visit your website now to see its actual effect.
Create an archive layout for a custom theme
Now that your custom theme has begun to take shape, you can continue to create layouts for other parts of the website. The archive page is where WordPress displays your categories, tags, authors and monthly files.
Let’s create a layout for the archive page in your custom theme.
You will first visit Beaver Builder» to add a new page and provide a title for your archive layout.
After that, select “Themer Layout” as the type and “Archive” as the layout option. Click the “add Themer Layout” button to continue.
This will take you to the layout settings page. Here, you need to select “All Archives” as the location where the template is displayed. You can also create a separate layout for each archive type, such as date, search results, categories, labels, etc.
After that, click the Start Beaver Builder button to open the builder interface.
Beaver Builder will start with a basic single-column archive layout. It will display the archive title at the top, followed by the post.
You can point to and click any item to edit its properties. You can also add new modules, rows and columns as needed.
After that, click the Finish button to save and publish the changes.
Create additional layouts for custom WordPress themes
Beaver Themer also allows you to create layouts for other pages in the template hierarchy, such as 404 pages, template parts, search results pages, and so on.
With Beaver Builder’s built-in drag-and-drop function, you can easily create your own custom WordPress theme from scratch without writing code. This is really the friendliest WordPress theme development method.