Skip to content

How To Create A WordPress Child Theme

Spread the love

Do you wanna create a WordPress child theme from scratch? In the past, you had to follow the WordPress Codex and have adequate coding knowledge in order to create a WordPress child theme theme.

Thanks to new WordPress theme generators, anyone can now create a fully custom WordPress theme in an hour (no programming skills required).

In this article, we will show you how to create a custom WordPress child theme without writing any code.

Create a WordPress child theme for beginners

Unlike static HTML sites, WordPress themes are a series of template files written in PHP, HTML, CSS, and JavaScript.

Under normal circumstances, if you need a custom WordPress theme, you’ll need to have a good mastery of these web design technologies or at least hire a web developer.

If you decide to hire a developer or agency, the cost of a custom WordPress theme can mount up to thousands of dollars depending on the complexity.

Also, since many small business owners can’t afford the high cost of a custom WordPress theme, many of them simply opted for the standard (free) themes available in the WordPress repository.

And those who wanted advanced customization used a WordPress drag and drop page builder or theme framework to create a custom theme.

While most WordPress theme frameworks have made it easy to create a WordPress theme, they are, however, a solution for the developer rather than the average website owner.

On the other hand, some WordPress plugins have made it very easy to build pages using a drag and drop interface. However, they are limited to layouts only. You can’t use it to create custom themes.

Beaver Builder, one of the best site builder plugins for WordPress, decided to solve this problem with their plugin called Beaver Themer.

Beaver Themer is a website building plugin that allows you to create custom design blueprints using a drag and drop interface without learning how to code.

Let’s take a look at how you can easily create a WordPress child theme using Beaver Themer.

beaver builder tutorial

If you don’t like the video or need further instructions, read on.

Configure Beaver Themer to create a custom design

Beaver Themer is an additional plugin for Beaver Builder, so you’ll need both plugins for this article.

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

Beaver Themer allows you to create a custom theme, but you still need a theme to get started. We recommend using a light theme that includes a full-width page template to act as the starting theme.

You can find many of such themes in the WordPress theme repository. Most modern WordPress themes come with a full-width template. Our best options are:

  • Astra – A free and lightweight all-purpose WordPress theme with built-in support for Beaver Builder.
  • OeanWP – Another popular free, multipurpose WordPress theme that offers full width page creation assistance.
  • StudioPress Themes: All of their themes are compatible with Beaver Builder and work great with Beaver Themer.

For this tutorial, we’ll be using Astra, which is a lightweight and easily customizable WordPress theme.

Check our Astra theme review.

Set up your theme for Beaver Themer

When creating a custom WordPress theme using Beaver Themer, it is important to ensure that Beaver Themer has access to the entire page width (from edge to edge).

This is the standard Astra layout. As you can see, this design includes a sidebar that will make it difficult to work with our Beaver Themer.

Astra default layout
Astra default layout

You can change this by visiting your website’s admin panel and then navigating to the Appearance »Customize page. From here you should switch to Design »Side Bars.

Astra full width
Astra full width

From there, just select “No Sidebar” in the default layout option and click the “Publish” button to save the changes.

Your theme now uses a design with no sidebar. This is the best design for beaver themer.

Ideal Astra layout for beaver builder
Ideal Astra layout for beaver builder

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 come with a template file for full-width pages. If you’re using a different theme, you will probably find an option to remove the sidebars in your theme settings.

If you can’t find it, contact your theme developers they should be able to help you with that.

Once you’ve set up your theme to a full-width layout, Beaver Themer is ready to help you create your custom WordPress theme.

The basics Beaver Themer

Beaver Themer works with Beaver Builder.

Beaver Builder, as an add-on to the page builder, lets you drag and drop items onto a page to create custom layouts.

It contains the following elements that you can use in your designs:

  • Template – A collection of columns, rows, and modules that make up a complete page layout.
  • Columns – vertical layout modules that can be used to align content horizontally.
  • Lines: a horizontal collection of several modules
  • Module: An element that generates certain information such as title, text block, table, gallery, etc.

Just edit a page in Beaver Builder and then click the Add button in the top right corner. You can then drag and drop columns, rows, and modules onto your page and start editing immediately.

beaver builder
beaver builder

If you don’t want to start from scratch, first choose a list of pre-made templates.

beaver builder templates
beaver builder templates

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

For more information, see our article on How to Create a Custom Page Layout with Beaver Builder.

We don’t just want to create page layouts, but we want to create a complete custom theme.

This is where Beaver Themer comes in.

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

Themer layout
Themer layout

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

These are the building blocks of all WordPress themes. You can use these building blocks to create a custom theme that suits your needs.

Using Beaver Themer to create a WordPress child theme

In the instructions below, we’re going to walk you through the steps required to create the most popular custom theme elements. When you’re done, you’ll have your base theme completely converted into a fully customized WordPress child theme.

Create a custom header for your theme

Let’s start with the header section of your website. A custom header is an integral part of your site’s niche, and creating a header can be difficult using traditional methods.

Fortunately, Beaver Themer has built-in header functions. You can either use the pre-made template or use the menu and picture modules with a two-column layout.

To get to this header area, you first need to set up a header layout in Beaver Themer. Go to Beaver Builder »Add New page and provide a title for your header.

beaver themer header
beaver themer header

Then select “Themer Layout” as the type and “Header” as the layout option. When you’re done, click the “Add Themer Design” button to continue.

This will take you to the Layout configuration page. From here you need to select “Entire Site” as the location for the header template.

Adding layout
Adding layout

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

Beaver Builder starts with a simple base column and two-line header layout as a starting point.

Beaver themer generated header
Beaver themer generated header

You can use the same Beaver Builder drag and drop tools to change the background, colors, text, and more. You can also add other modules, load pre-made templates, and add rows/columns by clicking the Add button in the top right corner.

When you are happy with the design, click the Done button to save or publish your design.

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

header preview
header preview

There is still no content other than the header, and you will likely see the base layout of the footer area.

Let’s change that.

Create a custom footer for your WordPress theme

You can use Beaver Themer to create a custom footer for your theme, just like you did for a custom header.

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

beaver themer footer
beaver themer footer

Click the “Add Themer Design” button to continue.

This will take you to the Layout configuration page. From here you will need to select “Full Site” as the location for the template.

Adding footer layout
Adding footer layout

Then click the “Start Beaver Builder” button to open the generator interface.

Beaver Builder starts with a three-column footer layout. You can use this design as a starting point and start editing.

Beaver themer generated footer
Beaver themer generated footer

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

When you are happy with the design, click the Done button to save or publish your design.

Create a content area for posts and pages

Now that we’ve created headers and footers for every page and post on the website, it’s time to create the post or the body of the page (the content area).

We start the same way we created the header and footer, adding the Singular layout on the Add New page.

Beaver themer singular
Beaver themer singular

You then choose where to display this design. You can select Singular for all posts and individual pages, or you can select posts or pages only.

Adding page layout
Adding page layout

Then click the “Start Beaver Builder” button to open the generator interface.

Beaver themer generated page
Beaver themer generated page

Beaver Builder loads a unique sample layout with the post/page title at the top, followed by content, author’s 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’re satisfied with the design, click the Done button to save and publish your changes.

You can now visit the website to see them in action.

Full page preview
Full page preview

Create archive layouts for your custom child theme

After your custom theme is formed, you can still create layouts for other parts of your website. On archive pages, WordPress displays your categories, tags, authors, and monthly files.

Let’s create an archive page layout for your custom theme.

You start off with a visit to Beaver Builder »Add New page and provide a title for your archive layout.

creating archive layout
creating archive layout

Then select “Themer Layout” as the type and “Archive” as the layout option. Click the “Add Themer Design” button to continue.

This will take you to the Layout configuration page. From here, you need to select “All Archives” as the location to save the template. You can also create separate layouts for each individual archive type like date, search results, category, tags, etc.

beaver themer archives
beaver themer archives

Then click the “Start Beaver Builder” button to open the generator interface.

Beaver Builder starts with a simple single-column archive layout. The archive-title is shown at the top, followed by Posts.

Post page layout
Post page layout

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

Then click the “Done” button to save your changes and publish them.

Create other designs for your custom WordPress child theme

Beaver Themer also allows you to create layouts for other pages in the template hierarchy, such as: Page 404, Template Parts, Search Results Page, and more.

With Beaver Builder’s built-in drag and drop functionality, you can easily create your own WordPress design from scratch without writing any code. This really is the most beginner-friendly way to develop WordPress themes.

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

If you enjoyed this article, subscribe to our newsletter for more articles like this.

Finally, feel free to comment if you have any questions.

Newsletter SubscriptionYou don't wanna miss our exclusive guides

Get Exclusive Online Business Guides and Tips That I Only Share With Email Subscribers


Spread the love

Leave a Reply