Create WordPress theme without coding πŸ‘‰πŸ» Instructions 2022

In this tutorial, I’ll show you step by step how to set up a quick and easy create your own WordPress theme can. Completely without programming knowledge – simple by dragging and dropping.

It all works with Elementor’s WordPress Theme Builder. But more on that in a moment.

How to create a WordPress theme yourself

Basically there is two possibilitieshow to create a WordPress theme yourself:

  1. Programming a theme with HTML, CSS and PHP yourself (complex and time-consuming)
  2. Create a theme with a theme builder (just drag and drop)

I will not go into detail about the first possibility (programming a theme yourself) in this article. You can find a very extensive tutorial on akademie.de and t3n.de.

If I had to program my own WordPress theme myself, I would probably go crazy. Thank God there is an easier way πŸ™‚

I’ll show you simpler variant.

With the Theme Builder from elementor you can create your theme simply by drag & drop. You can even use countless templates and then easily adapt them.

You can create your own theme in less than an hour – completely without HTML, CSS or PHP knowledge!

What is Elementor Theme Builder?

Elementor is one of the most popular page and theme builders for WordPress. You can find a very comprehensive review of this ingenious tool here in my Elementor test report.

Elementor is a plugin that you can install for free via the WordPress backend.

the Paid Pro version from Elementor has a theme builder functionality in addition to many other features. You can get Elementor Pro from about 45 euros (49 dollars) buy here on the official website*.

This website was also made entirely with Elementor

Elementor is a drag and drop page builder. The Pro version includes an ingenious theme builder functionality that allows you to push the boundaries of WordPress. This website was also created entirely with Elementor.

This is how the Elementor theme builder works

I would like to make one thing clear right away: Elementor is a plugin and always needs a real WordPress theme as a basis for it to work at all. So you can’t create a “real WordPress theme” with Elementor.

However, it is possible that you use the Elementor Theme Builder to overwrite almost every area of ​​the theme you are using.

So you can create your entire WordPress website with Elementor: the header area including the menu, the blog layout, archive or category pages, the page where internal search results are displayed, etc.

All areas where layout and design are dictated by your theme can be created and replaced with Elementor Pro.

So the principle behind the Theme Builder is that self-created Templates replace the actual theme layout.

Which (basic) theme should you use?

Elementor itself offers the free one for this purpose Hello Elementor Theme. This is a completely reduced, even “naked” theme without functions and without a real layout.

In combination with the Elementor Theme Builder, this is of course the perfect choice to achieve the best possible performance. The Hello Theme is so reduced that only 17kB to be loaded with data.

Two other WordPress themes that also work great with Elementor GeneratePress and astra. The two themes are also optimized for maximum performance.

Theme style function

In addition to the Theme Builder, Elementor Pro also offers the Theme Style function. This can be used to define global styles for fonts (body text, H1, H2…), buttons, links, etc.

The Theme Style feature is comparable to the customizer options of good WordPress themes.

If you use GeneratePress or Astra, you can skip this feature and set the global styles in the Customizer options. If you’re using the Hello theme, you should use the theme style feature, as there aren’t any options in the customizer for that.

What pages/sections do you need to create?

Before I start with the (simple) step-by-step instructions, let’s quickly clarify which pages and areas need to be created.

Basically, we need to create the following templates to get a complete theme:

  • headers
  • footer
  • Standard page layout
  • Single blog post layout
  • Archive Layout (Category Page)
  • search results page
  • 404 page

Step by step guide

If you have never used Elementor, then now you will be surprised how easy you can use it to create your own theme layout:

1. Buy Elementor Pro

To be able to use the Theme Builder function, you need the Pro version of Elementor. If you don’t already have these, you can buy here*.

2. Install a lightweight base theme

As mentioned earlier, I recommend this Elementor Hello Theme to use. With this completely blank theme only 17kB loaded with data. So you also have the perfect substructure for your website in terms of performance.

But also GeneratePress, astra and other themes are perfectly compatible with Elementor and also very slim.

3. Create headers and footers

First create your header and footer. You can find the option to do this in the WordPress backend:

Templates – Theme Builder – Add New – Header
Templates – Theme Builder – Add New – Footer

After clicking the Add New button, this window will open. Here you can select an area (header in this case) and create a corresponding template.

To speed up your workflow, you can use existing header and footer templates and easily adapt them.

The quickest way to create your own header: Choose a header template template

After saving, you can still specify where your header or footer should be displayed. Usually you will select the option “entire website” (Entire Site).

However, it is also possible to create and display different headers depending on the page type etc. For example, you can display a different header in your posts than on your home page, for example.

4. Create your blog layout

You can also use existing templates and adapt them to the blog layout.

One of many blog templates (single post). However, I completely redesigned the template for this blog (and therefore also for this post you are reading).

Here you can set the layout for your blog posts:

Templates – Theme Builder – Add New – Single – Post

Here you can set the layout for your archive or category pages:

Templates – Theme Builder – Add New – Archive

You can of course write your blog posts as usual in the WordPress editor (e.g. Gutenberg). That’s how I do it here on this blog.

I created the blog and category layout with Elementor, but I write the blog posts in WordPress’ Gutenberg editor. However, it is also possible to write and style the individual blog posts with Elementor.

5. Create a standard page layout

Here you can lay out a regular page:

Templates – Theme Builder – Add New – Single – Page

You could also save yourself the step if you create all other pages directly with the Elementor Page Builder anyway.

6. Create your 404 and search results page

The 404 page is the page that is displayed when a page cannot be found (e.g. due to a broken link or redirect). You can create the page as usual.

Templates – Theme Builder – Add New – Single – 404 Page

Thanks to some nice templates, creating the 404 page takes less than 5 minutes

For the search results page, simply create another archive page:

Templates – Theme Builder – Add New – Archive

In the display conditions, simply select β€œSearch results”:

Optional: Create the remaining pages of your website

I always proceed in such a way that I create my theme layout in the first step. We have already done that after these 6 simple steps.

Then I create the start page and the remaining pages of my website with Elementor (e.g. an About me page / Services page, etc.).

Simply create a new page in the WordPress backend and create it as usual with Elementor. You can specify which page is your start page as usual in the WordPress Customizer.

Done – now you have created not only your theme layout but also your entire website with Elementor Pro!

Buy a theme or create one yourself? My conclusion

I now prefer a theme builder over a premium theme as the benefits are obvious:

  • With a theme builder I have full control over the layout of my website.
  • Thanks to a theme builder, I am completely independent of the theme used
  • With a theme builder I can improve the user experience in a targeted way-
  • Elementor Pro saves me a lot of time because pages and templates are created simply by drag & drop-
  • I really enjoy implementing my layouts with Elementor. I wouldn’t enjoy coding it myself or having to customize every detail via CSS.

Of course, Elementor Pro comes with an annual (albeit manageable) cost. However, Elementor Pro is not just a theme builder, but above all a page builder high functionality. The investment is therefore always worthwhile if you want to implement a decent online project based on WordPress.

Additional information:

My Elementor test to read

Elementor is available from around 45 euros. Here you can find the current prices on the official website*

Here you can find free Elementor templates

My review of the Astra Theme (works great with Elementor)

My review of the Generatepress Premium Theme (also a great choice)

The free Hello Theme in the WordPress Theme Directory

Questions or additions?

Do you have questions about the Elementor Theme Builder or other additions to the article? If so, just write now a comment!