How to Easily Create a Custom WordPress Theme

In the past, you had to follow the WordPress codex and have a decent coding knowledge to build a custom WordPress theme. But thanks to new WordPress theme generators. Now anyone can create a completely custom WordPress theme within an hour (no coding knowledge needed).

Creating a Custom WordPress Theme for Beginners

Unlike static HTML sites, WordPress themes are a set of template files written in PHP, HTML, CSS, and JavaScript. Typically, you would need to have a decent understanding of all these web design languages. Or hire a web developer to create a custom WordPress theme.

If you hired a developer or agency, then the cost of a custom WordPress theme can reach thousands of dollars.

Since many small business owners couldn’t afford the high costs of a custom WordPress theme, a lot of them just settled for the default themes that came with WordPress.

Those who didn’t want to settle and wanted customizations either used drag & drop WordPress page builder. Or they used a theme framework to build a custom theme.

While WordPress theme frameworks made building a WordPress theme easier, they are a solution for developers, not an average website owner.

On the other hand, WordPress page builder plugins made it super easy to create custom page layouts using a drag & drop interface. But they were limited to layouts only. You couldn’t build custom themes with it.

Until Beaver Builder, one of the best WordPress page builder plugins decided to solve this problem with their add-on called Beaver Themer.

Beaver Themer is a site builder add-on that allows you to create custom theme layouts using a drag and drop interface and without learning to code.

Setting up Beaver Themer to Build a Custom Theme

Beaver Themer is an add-on plugin for Beaver Builder, so you will need both plugins for this article.

First, you need to install and activate the Beaver Builder and Beaver Themer plugins. For more details, see our step by step guide on how to install a WordPress plugin.

Beaver Themer allows you to create a custom theme, but you will still need a theme to start with. We recommend using a light-weight theme that includes a full-width page template to act as your starter theme.

You can find many such themes in WordPress.org theme directory. Most modern WordPress themes include a full-width template. Our top picks are:

• Astra – A free light-weight all-purpose WordPress theme that comes with built-in support for Beaver Builder.
• OeanWP – Another popular free multi-purpose WordPress theme that comes with full page builder support.
• StudioPress themes – All of their themes are compatible with Beaver Builder and would work great with Beaver Themer.

Here we will use Astra, which is light-weight and easy to customize a WordPress theme.

Setting up Your Theme for Beaver Themer

When building a custom WordPress theme with Beaver Themer, it’s important to make sure that Beaver Themer has access to the full body of the page (from edge to edge).

This is the default Astra layout. As you can see that this layout includes a sidebar which can be difficult to work with when using Beaver Themer.

You can change that by visiting the admin panel of your website and then navigate to Appearance » Customize page. From here, you need to switch to the Layout » Sidebars tab.

Once there, simply select ‘No Sidebar’ under the default layout option and click on the Publish button to save your changes.

Your theme will now start using a layout with no sidebars. This is the best layout to 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 a template file for full-width pages. If you are using some other theme, then you may find an option to remove sidebars in your theme settings.

If you cannot find it, then contact your theme developer and they may be able to help you with that.

Once you have set up your theme to a full-width layout, you are ready to create your custom WordPress theme using Beaver Themer.

Quick Beaver Themer Fundamentals

Beaver Themer works on top of Beaver Builder. As a page builder plugin, Beaver Builder allows you to drag and drop items to a page to create custom layouts.

It has the following items that you can use in your layouts:

• Template: A collection of columns rows, and modules that make up an entire page layout.
• Columns: Vertical layout modules that help align content horizontally.
• Rows: Horizontal collection of multiple modules
• Module: An item that outputs specific information such as title, text block, table, gallery, etc.

Simply edit a page in Beaver Builder and then click on the add button at the top right corner. You can then drag and drop columns, rows, modules, to your page and start editing them right away.

If you don’t want to start from scratch, then select from a list of pre-made templates to begin with.

Beaver Builder also allows you to save your layouts and then use them later as templates.

It adds another item to Beaver Builder called ‘Themer Layout’.

Themer layouts allow you to create custom layouts for the header, footer, content areas, 404 page, and other template parts.

These are the building blocks of all WordPress themes and by using them you’ll be able to create a custom theme that fits your needs.

Using Beaver Themer Templates to Create a Custom WordPress Theme

By the time you’re done, you’ll have completely transformed your base theme into a fully custom WordPress child theme.

Building a Custom Header for Your Theme

A custom header is an essential component of a theme and building one can be tricky using traditional methods.

Luckily, Beaver Themer has header features built in. You can either use the pre-created template or use the menu and image modules with a two-column layout.

In order to get to this header area, first, we’ll need to set up a header layout in Beaver Themer. Visit Beaver Builder » Add New page and provide a title for your header.

After that, select ‘Themer Layout’ as the type and ‘Header’ as the layout option. Once you’re done click on the ‘Add Themer Layout’ button to continue.

This will bring you to the layout settings page. From here you need to select ‘Entire Site’ as the location where the header template will be displayed on.

Next, click on the ‘Launch Beaver Builder’ button to open the builder interface.

Beaver Builder will launch with a basic single column and two-row header layout as a starting point.

Conclusion

Beaver Themer also allows you to create layouts for other pages in template hierarchy, for example, 404 page, template parts, search results page, and more.

Using the built-in drag and drop functionality of Beaver Builder, you can easily create your own custom WordPress theme from scratch without ever writing code. This is truly the most beginner friendly WordPress theme development method in existence.