How to Create a WordPress Theme without Coding in 3 Simple Steps

Before the page builder era, it’s only a dream for a WordPress user without programming skills to create a theme. To create a WordPress theme, you have to at least master PHP, HTML, and CSS. If you want to create a complex WordPress theme (like the ones sold on Themeforest), it’s also a prerequisite to master JavaScript.

That was then.

Today, you can create a WordPress theme even if you have no coding knowledge at all. Some WordPress page builder plugins — including Elementor — come with a theme builder feature to allow you to create a WordPress theme without writing any single line of code. You can create a WordPress theme using a drag-and-drop visual editor.

Before going further, there is something you need to know first. A WordPress theme typically consists of three main parts: header, footer, and a single post template. The Theme Builder feature of Elementor allows you to create these three parts. In addition, you can also create a custom 404 page, archive pages, author page, and so on.

Note: Theme Builder is only available on Elementor Pro.

How the Theme Builder of Elementor works

The Theme Builder feature of Elementor works by replacing the parts of your active theme. For instance, if you create a header with Elementor and publish it, this new header will replace the header of your currently active theme. So are with the footer, single post template, 404 page, archive pages, and so on.

Normally, a website has the same header and footer template on all posts and pages. In Elementor, you can set the display condition to set a header/footer template to only apply it on specific page(s) or post(s). Of course, you can set a header/footer template to apply it to the entire website.

One thing.

You won’t be able to save the WordPress theme you created with Elementor into single ZIP like WordPress themes at large. If you want to save your theme, you can export every part and put them together into a single folder. Elementor will store your theme parts (and other templates) in a JSON format.

How to create a WordPress theme without coding with Elementor

As mentioned earlier above, a WordPress typically consists of three main parts: header, footer, and single post template. We will walk you through the steps to create those parts. Let’s get started.

# Create the header template

  • First off, login to WordPress dashboard and go to Templates -> Theme Builder.

  • On the Theme Builder page, click the Header tab followed by the Add New button to create a new header template.

  • Give your header template a name and click the CREATE TEMPLATE button.

  • Elementor offers several ready-to-use header templates you can choose from. Simply select the one you want and click the INSERT button to use it.

  • If you want to start from scratch instead of using a template, you can simply close the template library to go directly to the Elementor editor. In this tutorial, we will create the header from scratch. The header we are going to create consists of two parts; the sub-header — which lies above the main header — and the main header itself. We will use the sub-header to place things like social media icons, contact info and so on. While the main header will be used to display the site logo and menu.

## Sub-header

  • The sub-header we are going to create consists of two columns. So, on the Elementor editor, click the plus button to create a new section and choose the two-column structure option.

  • If you want, you can change the background of the section by clicking the Style tab. You can change the background on the Background section.

  • To add a widget, simply drag the widget you want from the left panel to the canvas area. The first widget we want to add in this example is Icon List. We will use this widget to display the phone number and email address.

  • You can edit the widget you have just added from the left panel. You can change the layout, change the default icon or change the text color/style. Switch to the Style tab every time you want to customize the text or icon. (To turn a widget into editing mode, you can click the widget handle). You can also click the widget on the Navigator.

  • Add another widget on the second column. In this example, we add the Social Icons widget.

  • Again, you can edit this widget via the left panel on the left side. Play around with this panel to customize your social media icons.

## The main header

  • We will also use two columns for the main header. The first column (the left one) to place the site logo and second column (the right one) to place the site menu. Click the plus button on the Elementor editor to add a new section and select the two-column structure option.

  • Drag the Site Logo widget from the left panel to the canvas area. You can find this widget (Site Logo) on the SITE section. Elementor will automatically load your site logo.

  • Set the alignment and size. To set the size, you can switch to the Style tab and change the width value.

  • Add another widget (Nav Menu) to the second column. You can find this widget on the SITE section as well.

  • Again, you can also play around with the left panel to customize your menu. You can set things like the text color, hover color, hover width and so on. Elementor itself will automatically load the main navigation to this menu. If you have more than one menus on your WordPress site, you can set which one you want to display by clicking the dropdown menu on the Menu section under the Content tab.

  • If you want, you can also set your menu to be sticky. To do so, select the top section (sub-header) and go to the ​Advanced​ tab. You can find the Sticky​ option on the ​Motion Effects option.

  • Repeat the steps above on the second section (the main header). If you want, you can also add other widgets like a search box. Just play around until you get satisfied with the result. Once you are done, click the PUBLISH button. You can also preview the result by clicking the eye icon.

  • You will be asked to add a display condition. Simply click the ADD CONDITION button to add one.

  • If you want to enable your header to the entire website, you can simply click the SAVE & CONTINUE button since by default your header template will be applied to the entire website. Conversely, if you want to apply your header only on a specific page (or post), you can choose the page you want via the dropdown menu. Once done, click the SAVE & CONTINUE button.

# Create the footer

Same as the header, Elementor also provides ready-to-use footer templates to save you time. In this example, we are going to create the footer from scratch. The footer we going to create consists of a single section. We will add social media icons as well as pages like about page, contact page, terms of use, and privacy policy.

  • To get started, go to Templates – >Theme Builder.

  • On the Theme Builder page, select the Footer tab and click the Add New button.

  • Give your template a name and click the CREATE TEMPLATE button.

  • Since we want to create the footer from scratch, close the template library to open the Elementor editor.

  • Click the plus button on the canvas area to add a new section. Select the two-column structure option.

  • Drag the Social Icons widget from the left panel to one of the columns on the editor. Once added, you can play around with the left panel to customize the icons.

  • To display the site pages (about page, contact page, terms of use and privacy policy) we are going to use the Icon List widget. So, drag this widget to another column on the editor.

  • In this example, we change the layout to Inline. This will turn the icon list to the horizontal mode.

  • Replace the default text on the Text field with the navigation label you want (like “about”, “contact” “terms of use”, and so on) and add the link on the Link field. You can also remove the icon if you want. We don’t use icon in this example.

  • Play around with the left panel to customize the Icon List widget. Once you are done, you can click the PUBLISH button.

  • Click the ADD CONDITION button to set where you want to apply the footer template.

  • If you want to enable your footer template to the entire website, you can simply click the SAVE & CONTINUE button since by default your footer template will be applied to the entire website. Conversely, if you want to apply your footer only on a specific page (or post) you can choose the page you want via the dropdown menu. Once done, click the SAVE & CONTINUE button.

# Create the single post template

Elementor also allows you to create a custom template of single post. In this example, we are going to create a single post template that consists of four sections.

  1. Section one: to place the featured image and post meta.
  2. Section two: to pace the post content, social share buttons, author box, and the sidebar.
  3. Section three: to place the email subscription form.
  4. Section four: to place the post navigation and the post comment.

Follow the steps below to start creating the single post template.

  • On the WordPress dashboard, go to Templates -> Theme Builder.

  • On the Theme Builder page, go to the Single tab and click the Add New button.

  • Give your template a name. On the Select Post Type section, select Post. Click the CREATE TEMPLATE button to go to the Elementor editor.

  • A popup will appear, offering some of the ready-to-use templates you can choose from. Since we want to create the single post template from scratch, simply close this popup.

## Section one

  • Click the plus button on the Elementor editor to create a new section. Select the single-column structure option.

  • Click the Style tab on the left panel. On the Background Type option under the Background section, select Classic. Set image to Featured Image.

  • Set the size to Cover. On the Repeat option, select No-repeat.

  • Drag the Post Title widget to the editor.

  • Go to the Style tab to customize it. You can also go the Advanced tab to make advanced settings like margin and padding. In this example, we set the left margin to 30.

  • Drag the Post Info widget to the editor.

  • Remove the unnecessary items and go to the Style tab to customize it. Go to the Advanced tab as well to set its left margin to 30.

## Section two

  • Click the plus button on the editor to add a new section. Select the two-column structure option. Set the width of the columns with a comparison of about 68:32 %.

  • Drag the Share Buttons widget to the left column on the section you have just added.

  • Go to the Advanced tab and set the margin. Set the top margin to 30, the left margin to 20, and the right margin to 50 (you can use the different values).

  • You can go to the Style tab to customize the button. Just play around to get the buttons you want.
  • Drag the Post Content widget to the left column and place it beneath the Share Buttons.

  • Go to the Advanced tab and set the margin. Set the top margin to 15, the left margin to 20, and the right margin to 50 (you can use the different values).

  • You can go to the Style tab to set the typography style (like font style, font color, and font size).
  • Drag the Author Box widget to the second column (the right one).

  • Go to the Advanced tab and set the margin. Set the top margin to 20, the left margin to 15, and the right margin to 15 (you can use the different).

  • Again, you can go to the Style tab to customize this widget. You can set things like image size, typography, and so on. Just play around.
  • Drag the Sidebar widget to the second column and place it beneath the Author Box.

  • Return to the left panel and select a sidebar (a WordPress sidebar) you want to display.

  • Go to the Advanced tab and set the margin. Set the left margin to 15, and the right margin to 15 (you can use the different values).

  • Activate (select) the right column and go to the Style tab (you can use the Navigator to ease your job). Change its background to white.

  • Still on the second column, switch to the Advanced tab and set the top margin to -85.

## Section three

  • Click the plus button on the Elementor editor and select the single-column structure option.
  • Drag the Inner Section widget to the section you have just added and set the width of the columns with a comparison of about 68:32 %.

  • Activate (select) the first column (the left one) and go to the Style tab to change its background to grey (or any color you want).

  • Drag the Form widget to the left column. Since we want to use this form as an email subscription form, remove all of the form items but the email.

  • With the Form widget selected, go to the Advanced tab to set the margin. Set the right margin to 15, the left margin to 15, and the bottom margin to 15 (you can use the different margin values if you want).

  • Go to the Style tab to customize your form. Play around until you get satisfied with the result.
  • Drag the Heading widget to the first column and place it above the form and write a title like “Enjoyed this article? Stay informed by joining our newsletter!​”.

  • With the Heading widget selected, go to the Advanced tab to set its margin. Set the top margin to 15, the right margin to 15, and the left margin to 15.

  • Again, you can also go to the Style tab to customize your heading.

## Section four

  • Click the plus button on the Elementor editor and select the single-column structure option.

  • Drag the Inner Section widget to the section you have just added and set the width of the columns with a comparison of about 68:32 %.

  • Drag the Post Navigation widget to the first column (the left one).

  • With the Post Navigation selected, go to the Advanced tab to set its margin. Set the top margin to 10 and the bottom margin to 10.

  • Drag the Post Comments widget to the first column and place it below the Post Navigation.

  • Once you are done, click the PUBLISH button to publish your template.

  • By default, your single post template will be applied to all posts of your website. If you want it to be applied to a certain post or category, you can set the display condition by clicking the dropdown menu. Once done, click the SAVE & CLOSE.

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Share This