How to Easily Create a Custom WordPress Theme (without Any Code)

Advertisement

Want to create a custom WordPress theme from scratch?

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 generators theme WordPress, now everyone can create a completely customized WordPress theme in an hour (no coding knowledge required).

In this article, we’ll show you how to easily create a custom WordPress theme without writing code.

Creating a custom WordPress theme without writing any code

Creating a custom WordPress theme for beginners
Unlike static HTML websites, WordPress themes are a set of written template files in PHP, HTML, CSS and JavaScript. Generally, you must have a decent understanding of these web design languages ​​or hire a web developer to create a custom WordPress theme.

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

Like many small business owners could not afford the high costs of a custom WordPress theme, many of them just moved to the default themes included with WordPress.

Those who will not be satisfied and wanted customisations used a drag and drop builder WordPress page, or they used a thematic framework for building a custom theme.

Although WordPress theme frameworks built a WordPress theme easier they are a solution for developers, not an average website owner.

On the other hand, WordPress plugins manufacturer of super easy that page to create custom layouts with a drag & drop interface, but they were limited to layouts only. You can build custom themes with it.

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

Beaver Builder best WordPress page builder plugin

Beaver Themer add-on is a website builder that lets you create customized thematic page set using a drag and drop interface and without learning how to code.

Let’s take a look at how to use Themer Beaver to easily create a WordPress theme.

Implementation Beaver Themer build a custom theme
Beaver Themer is an add-on plugin for Beaver Builder, you’ll need two plugins for this article.

First, you must install and activate the plugin Builder Beaver and Beaver Themer. 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’ll still need a theme to start. We recommend using a lightweight theme that includes a page template full width to act as a starting theme.

You can find many of these themes in the WordPress.org themes directory. Most modern WordPress themes include a full-width model. Our top picks are:

Astra – A free lightweight all purpose WordPress theme that comes with integrated support for Beaver Builder.
OeanWP – Another popular free WordPress theme multipurpose comes with support for full page builder.
StudioPress Theme – All themes are compatible with the manufacturer and would work with great Beaver Beaver Themer.
For the sake of this tutorial, we will use Astra, which is light and easy to customize WordPress theme.

Setting your theme Beaver Themer
When building a custom WordPress theme with Beaver Themer, it is important to ensure that Beaver Themer has access to the entire body of the page (edge ​​to edge).

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

Default theme layout with a sidebar

You can change this by visiting the admin panel of your website and navigate to the appearance “Customize page. From there, you have to switch to Page Layout tab “Sidebars.

Turning off sidebars in your theme

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

Your theme will now start using a layout without sidebars. This is the best layout for use with Beaver Themer.

Theme layout with no sidebars

This page allows full provision Beaver Themer to use every inch of the screen, so you can create a great visual experience from start to finish.

Most WordPress themes include a template file for full width pages. If you use a different theme, you may have an option to remove sidebars find in your theme settings.

If you can not find it, then contact your theme developer and they may be able to help you.

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

Fast Fundamentals Beaver Themer
Beaver Themer works over Beaver Builder. As page builder plugin, Beaver Builder allows you to drag and drop items to a page to create custom layouts.

It has the following elements you can use in your layouts:

Model: A collection of column lines, and the modules included in a layout of whole page.
Columns: layout modules that help align content horizontally.
Lines horizontal collecting multiple modules
Module: An element that generates specific information such as title, text block, painting, gallery, etc.
Simply edit a page Builder Beaver, then click the Add button in the upper right corner. You can then drag and drop columns, rows, modules, to your page and start editing right away.

Using Beaver Builder

If you do not want to start from scratch and select from a list of predefined templates to start.

Beaver Builder templates

Beaver Builder also lets you save your layouts and use them later as models.

For more information see our article on how to create a custom layout using Beaver Builder.

However, we do not just want to create layouts. We want to create a complete custom theme.

This is when Beaver Themer comes.

It adds another element to Beaver Builder called “Themer layout.”

Themer Layout

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

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

Use Beaver Themer templates to create a custom WordPress theme
In the instructions that follow, we will guide you through the steps it takes to build the most popular custom theme elements. By the time you finish, you will have completely transformed your basic theme in a completely child theme WordPress measure.

Building a custom header for your theme
Let’s start with the header area of ​​your website. A custom header is an essential element of a theme and the construction can be difficult using traditional methods.

Fortunately, Beaver Themer integrated header characteristics. You can use the pre-created template or use menu modules and image with a layout in two columns.

To reach this area header, first, we must put in place a header layout in Beaver Themer. Visit Builder Beaver “Add new page and provide a title for your head.

Creating a custom header layout

After that, select “Layout Themer” as the type and “header” as layout option. Once you’re done, click the “Add Themer layout to continue.

This will take you to the page layout settings. From there, you select “The entire site” as the place where the header model will be displayed on.

Layout settings

Then click on the “Launch Beaver Builder” button to open the interface builder.

Beaver Builder will launch with a single base column and header layout as two-row start.

Header layout

You can use the same tools to drag Beaver Builder to change the background color, text, etc. You can also add other modules, load pre-defined templates, and add rows / columns by clicking on the Add button in the upper right corner.

Once you are satisfied with the design, click the Done button to save or publish your page layout.

You can now visit your site to see your custom theme header action. As you can see, we applied the header layout on our custom theme.

Custom header in your custom theme

Apart from the header, it will not show you yet content, and you’ll probably see the footer area of ​​your basic theme.

We will change that.

Build a foot custom page for your theme
You can create a custom footer for your theme using the Themer Beaver as you create a custom header.

Visit Beaver Builder “Add new page and provide a title for your footer layout. Then select “Layout Themer” as the type and “Footer” as layout option.

Footer layout

Click the “Add Themer layout to continue.

This will take you to the page layout settings. From there, you select “The entire site” as the location that the model will be displayed on.

Footer layout settings

After that, click the “Launch Beaver Builder” button to open the interface builder.

Beaver Builder will launch a low layout page with three columns. You can use this provision as a starting point and start editing.

Editing your footer layout

You can add modules, blocks of text, or anything you want. You can always change the colors, fonts, add a background image, and more.

Once you are satisfied with the design, click the Done button to save or publish your page layout.

Build the content area of ​​Posts and Pages
Now that we have created headers and footers for each page and post on the site, it’s time to build the body post or page (the content area).

We will start in much the same way we built the header and footer by adding Layout “Singular” in the Add new page.

Creating posts and page layouts

Then you can choose where to display this provision. You can choose singular use for all single posts and pages, or you can choose the messages or only pages.

Singular layout settings

After that, click the “Launch Beaver Builder” button to open the interface builder.

Editing singular layout

Beaver Builder will load a layout with the singular title example post / page at the top, followed by the content, author bio box and comment box.

You can point and click to change any of these items or add new modules, columns and rows as needed.

Once you are satisfied with the layout, click the Done button to save and publish your changes.

You can now visit your site to see it in action.

Theme layout with content

Creating layouts Archive for your custom theme
Now that your custom theme began to take shape, you can move on to creating models for other parts of your website. The archive pages are where WordPress displays your categories, tags, author and monthly archives.

We will create a layout for the archive pages in your custom theme.

You will start by visiting Builder Beaver “Add a new page and provide a title for your set archive page.

Creating an archive layout for your custom theme

After that, select “Layout Themer” as the type and “Archive” as layout option. Click the “Add Themer layout to continue.

This will take you to the page layout settings. From there, you select “All Archive” as the location that the model will be displayed on. You can also create layouts separate page for each individual archive as the date, the results of research, category, tags, etc.

Archive layout settings

After that, click the “Launch Beaver Builder” button to open the interface builder.

Beaver Builder will launch a set of single archive database column page. It will display the title archives above, which is followed by posts.

Editing Archives layout for your theme

You can point and click on an item to edit its properties. You can also add new modules, rows and columns as needed.

After that, click the “Done” button to save and publish your changes.

Creating other models for your custom WordPress theme
Beaver Themer also allows you to create layouts for other pages within the model hierarchy, for example, page 404, model parts, the search results page, and more.

Using the high-drag and drop functionality Beaver Builder you can easily create your own custom WordPress theme from scratch without writing code. This really is the most friendly for beginners WordPress theme development method in existence.

We hope this article has helped you learn how to create a custom WordPress theme without learning code. You can also check out our guide on how to speed up your WordPress site for better SEO and user experience.

Leave a Reply