Beginner's Guide for WordPress / Start your WordPress Blog in minutes

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

Do you 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 WordPress theme generators, now anyone can create a completely custom WordPress theme within an hour (no coding knowledge needed).

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

Creating a custom WordPress theme without writing any code

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 a 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 Builder best WordPress page builder plugin

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.

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

Video Tutorial

Subscribe to WPBeginner

If you don’t like the video or need more instructions, then continue reading.

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.

For the sake of this tutorial, we will be using Astra, which is light-weight and easy to customize 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.

Default theme layout with a sidebar

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.

Turning off sidebars in your theme

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.

Theme layout with no sidebars

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.

Using Beaver Builder

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

Beaver Builder templates

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

To learn more see our article on 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 comes in.

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

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

In the following instructions, we’ll walk you through the steps it takes to build the most popular custom theme elements. 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

Let’s start with your website’s header area. 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.

Creating a custom header layout

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.

Layout settings

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.

Header layout

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

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

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

Custom header in your custom theme

Aside from the header, it will not you show any content yet, and you will likely see your base theme’s footer area.

Let’s change this.

Building a Custom Footer for Your Theme

You can create a custom footer for your theme using the Beaver Themer just like you created a custom header.

Head over to Beaver Builder » Add New page and provide a title for your footer layout. Next, select ‘Themer Layout’ as the type and ‘Footer’ as the layout option.

Footer layout

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 that the template will be displayed on.

Footer layout settings

After that click on the ‘Launch Beaver Builder’ button to open the builder interface.

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

Editing your footer layout

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

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

Building Content Area for Post and Pages

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

We’ll start off in much the same way that we built the header and footer by adding the ‘Singular’ layout in the Add New page.

Creating posts and page layouts

Next, you will choose where to display this layout. You can choose singular to use it for all single posts and pages, or you can choose posts or just the pages.

Singular layout settings

After that click on the ‘Launch Beaver Builder’ button to open the builder interface.

Editing singular layout

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

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

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

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

Theme layout with content

Creating Archive Layouts for Your Custom Theme

Now that your custom theme has started to shape up, you can move on to creating layouts for other parts of your website. Archive pages are where WordPress displays your categories, tags, author, and monthly archives.

Let’s create a layout for archive pages in your custom theme.

You’ll start by visiting Beaver Builder » Add New page and providing a title for your archive layout.

Creating an archive layout for your custom theme

After that, select ‘Themer Layout’ as type, and ‘Archive’ as the layout option. Click on the ‘Add Themer Layout’ button to continue.

This will bring you to the layout settings page. From here you need to select ‘All Archive’ as the location that the template will be displayed on. You can also create separate layouts for each individual archive type like date, search results, category, tags, etc.

Archive layout settings

After that click on the ‘Launch Beaver Builder’ button to open the builder interface.

Beaver Builder will launch with a basic single column archive layout. It will display archive title at the top, which is followed by posts.

Editing Archives layout for your theme

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

After that, click on the ‘Done’ button to save and publish your changes.

Creating Other Layouts for Your Custom WordPress Theme

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.

We hope this article helped you learn how to create a custom WordPress theme without learning to code. You may also want to see our guide on how to speed up your WordPress website for better SEO and user experience.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit – a collection of WordPress related products and resources that every professional should have!

Reader Interactions

39 CommentsLeave a Reply

    • You would want to manually code a theme instead of using this method if you wanted to sell a theme.

      Admin

    • While you don’t need the Beaver Themer at the moment, you can use Beaver Builder for creating a landing page

      Admin

  1. Thanks for the tutorial. Quick question : can I also re-add my side bars after building a new costum theme with beaver. If so how can I do that Pls.

    • It differs based on what it edits, Beaver Builder is for editing the content area while Beaver Themer is for locations other than the content area

      Admin

    • At the moment, it would require Beaver Builder to work on other sites as well.

      Admin

  2. Bit of a newbie question ..what happens to all my existing content as in pages and widgets (currently using the Asta theme) etc whilst I’m doing this or am I first building a separate website first inside wordpress and if so how then do I transfer it over?
    Thanks

    • Your posts and pages would remain, you would normally need to readd the widgets for the new widget areas :)

      Admin

  3. Haven’t tried Beaver builder, but does it work like divi? Are they similar? If it is, then I’d say so far, no matter what kind of theme, I haven’t found a theme that will give a total 0% coding.

    Yes it is possible to build a page or a theme with 0% coding. BUT, normally there are features that a theme does not posses but the client would require for his site and therefore would need to code.

    • If you visit the Beaver Builder site there is the option for you to try the live demo to see how it works :)

      Admin

  4. Hello,
    I am a newbie and a fan of WP Beginner site. I don’t know any code, so this post is an eye opener for me!

    A quick question- I have been trying to get a handle on Generate Press. It seems to me that I need to learn some coding to play with the layout or create buttons. Do you have any advice for me?

    Thank you for helping WP Beginner community!
    Best.

    • If you go to the Generate Press site, they have a documentation page to help you for a starting point for their plugin.

      Admin

  5. currently i am using Adobe Muse to build multiple client websites, because it is fast and easy, and wysiwyg.
    but, Adobe has killed it. I need to convert ALL of my client sites over to another software. my hosting has C-panel, so I can get wordpress app and publish on the domains.
    will this process let me recreate the designs I have already built that the customers want, and how complex can a site get using this?

    i play in WordPress, i don’t WORK in WP.

    • You would want to reach out to Beaver Builder’s support for specifics on the design depending you your needs :)

      Admin

  6. Another great post! Thank you.

    Just wondering why WPBeginner always seems to avoid Elementor?

    Building a theme with Elementor is very similar to building it with Beaver Builder, but Elementor is quicker and you have way more options with styling and elements/modules.

    Love your content!

    • Elementor pro not being GPL compliant is one of the larger concerns with recommending it depending on the use case for the user.

      Admin

  7. Thanks for teach me about this plugin which is very helpful for me. This web is very helpful for me. Thanks again

  8. I’m considering taking on a project migrating a site from WordPress.com to the self-hosted version and to use Divi to overhaul it.

    Following on from reading your article on best WordPress page builders, what would you recommend Beaver Builder or Divi?

    With Divi, you get a range of themes and plugins from ElegantThemes but I’ve read negative reviews about theme lock-in and being too restrictive. Have you any personal experience with it?

    With Beaver Builder, it seems the page builder functionality is spot on though it seems more complex with all the options spread throughout multiple pages and you don’t get any themes or plugins with the subscription.

    • Both are excellent options, and they’re in our top 5.

      The Divi Page Builder plugin works with other themes as well, so you’re not locked in with ElegantThemes. However as with any theme, if you do switch from one theme to another, you may lose certain features. But that’s why you have to make sure the new theme has comparable feature set.

      As long as you’re using the Divi Page Builder plugin, you’ll retain the drag & drop features.

      The benefit of Divi is the added themes / layouts that ElegantThemes offer. However the benefit of Beaver Builder is the advanced customization options.

      Admin

      • Not to mention the fact Beaver Builder doesn’t use shortcodes to populate the content areas.

        • Is not using short codes to populate content is a good thing? Be gentle, I’m a newbie :)

        • @Chris Nieass, yes not using shortcodes is a great bonus of Beaver. Just occasionally even in the best of installations, a page builder like Divi or Beaver breaks. When Divi breaks you end up with page content which looks dead ugly with shortcodes rendered literally all over the page. If the same was to happen to Beaver, you just get your content stacked and readable in series of blocks down the page instead of pretty columns.

          Divi is for designers who love its easy to use colourful interface and the fact that all their mates use it. Beaver is for people who care about how well the site runs, ease of deeper customisations etc etc

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.