How to Create a WordPress Theme without Coding (A Complete Guide)

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 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 the following parts:

• Header
• Footer
• Single post/blog post
• Page
• Archive pages (category pages, tag pages, authors’ archive pages, search results page)

A theme builder allows you to create custom templates — in a visual way — to replace the default template files of your theme.

Shortcuts ⤵️

• Creating the header
• Creating the footer
• Creating the single post template
• Creating the archive page templates

How a Theme Builder Works

As mentioned above, a theme builder works by replacing the default template files of your active theme. For instance, if you create a custom header template with a theme builder, the new header template will replace the default header of your currently active theme.

So are with the footer, single post template, 404 page, archive pages, and so on.

What is template file, by the way?

In case you didn’t know. A WordPress theme is made up of template files written in PHP and the supporting languages (JavaScript, HTML, CSS). Each theme developer may use different names for the template files, but it most cases, the naming is tailored with what a template is used for.

For instance:

• footer.php for the footer
• header.php for the header
• single.php for blog post
• page.php for page
• archive.php for archive pages

Each template above controls the layout of your site parts. For instance, the footer.php file controls the layout of the footer, the header.php file controls the header of your site, and so on.

Best Theme Builder Plugins for WordPress

There are a bunch of theme builder plugins for WordPress out there, but we strongly recommend the following plugins as they come with comprehensive features.

Elementor Pro

Elementor is the most popular page builder plugin for WordPress. Its pro version comes with a theme builder feature which you can use to create custom templates for your theme parts as follows:

• Header
• Footer
• Single post
• Single page
• Archive pages
• 404 page

If you use WooCommerce to create an e-commerce site, Elementor Theme Builder also allows you to create custom pages of WooCommerce such as the single product page, product archive pages, checkout page, cart page, and so on.

Furthermore, you can also use Elementor Theme Builder to create a custom template for a custom post type. On your custom template, you can add custom fields and default fields of WordPress.

Divi Builder

Divi Builder is another popular page builder that comes with a theme builder feature. It is available in two versions: as an integral part of the Divi theme and as a standalone plugin which you can on WordPress themes other than Divi.

The capability of Divi Theme Builder is identical to Elementor. It also allows you to create custom templates for the following site theme parts:

• Header
• Footer
• Single post
• Single page
• Archive pages
• 404 page

Divi Theme Builder also allows you to create custom pages for WooCommerce. Furthermore, you can also use it to create a custom template for a custom post type and add custom fields to your custom templates.

There are two advantages of Divi over Elementor: Advanced display condition and the ability to control the design of the elements on the single post template such as blockquote, list, headings, and body.

Creating a WordPress Theme without Coding with Elementor

In this example, we will show you how to create a custom theme using Elementor. You need to use the pro version to get started.

You can get the pro version of Elementor on its official website.

— Create the Header Template

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

• On the Theme Builder page, hover your cursor over the Header label on the left side and click the plus icon to create a new header template.

• 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 Template

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, hover your cursor over the Footer label on the left side and click the plus icon.

• 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, hover your cursor over the Single Post label on the left side and click the plus icon.

• A popup window 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.

— Create a Template for Archive Pages

In WordPress, an archive page refers to a page that displays a list of posts. Category pages (yoursite.com/category/category_name), tag pages (yoursite.com/tag/tag_name), and authors’ archive page (yoursite.com/author/author_name) are example of the archive pages.

Elementor Theme Builder allows you to create custom templates for these archive pages.

• On your WordPress dashboard, go to Templates -> Theme Builder
• On the Theme Builder page, hover your cursor over the Archive label on the left side and click the plus icon

• Select a premade template on the appearing library window if you want to create the custom template from a premade template. If you want to create the custom template from scratch, you can simply close the window.
  
  In this example, we will show you how to create the custom template from scratch.
• Add a section and drag the Archive Title widget to the canvas area.

• You can go to the Style tab to style up the archive title such as setting the font size, text color, and so on.
• Once done customizing the archive title, add the Archive Posts widget and place it beneath the Archive Title widget.

• To change the archive layout, you can open the Layout block under the Content tab on the settings panel. To set the pagination, you can open the open the Pagination block on the Content tab.

• To style up the archive, you can go to the Style tab on the settings panel. There are five setting blocks you can open here as below. You can play around on each block to style up the archive.

• Once you are done styling up the archive, you can click the PUBLISH button on the bottom side on the settings panel. On the appearing panel, you will be asked to add the display condition.
  
  Simply click the ADD CONDITION button to add one.

• Select the archive type want to assign the template to. If you want to assign it to category pages, for instance, you can select the Categories option and then select the category you want.
  
  Click the SAVE & CLOSE button to apply the condition.

Summary

Theme is a required component of WordPress. It controls the layout and design of a WordPress site. Since WordPress is written in PHP, you should have PHP knowledge as well to create theme. Also, you should also master other supporting languages such as JavaScript, HTML, and CSS.

A WordPress theme is made up of template files written in PHP. Each template has a specific role to control the layout of a particular site part. For instance, the header.php is a template file that controls the header of the website.

Today, the prerequisite of having PHP knowledge is no longer needed thanks to theme builders. A theme builder plugin allows you to create custom templates to replace the default template files of your theme in a visual way.

In other words, you can customize every single part of your website without coding. You can apply any design style you want. Elementor Pro and Divi Builder are two of the most popular page builder plugins for WordPress. They allow you to create custom templates for the following theme parts:

• Header
• Footer
• Single Post
• Single Page
• Archive Pages
• 404 Page
• Custom Post Type

Want to create a WooCommerce-based e-commerce site with your own design? Both Elementor Pro and Divi Builder also allow you to customize every single page of WooCommerce. From the single product page, product archive pages, checkout page, cart page, and so on.