Categories
Articles

How To Develop WordPress Themes Compatible With Elementor

I am working as a WordPress Programmer since 2010. I have 5+ years of experience in designing and developing WordPress themes. I used to develop themes using theme options, customizer or widgets in the past. However, when I started using Elementor page builder I found my themes too static and difficult to use for end users. Thus I started building themes compatible with Elementor an amazing page builder plugin. In this article, I will share my experience with the key approaches we need to develop WordPress themes compatible with Elementor.

1. Getting Started

We can start with a starter theme like Underscores. It is the best starter theme accepted by wordpress.org, ThemeForest and other marketplaces. Underscores generates all the files we need like index, 404, template parts, and other folders/files required for the standard WordPress themes.

  • Design/ Develop your theme like normal WordPress themes following required and recommended rules by official WordPress theme review team.
  • Import theme unit test data from here and check if all the elements are styled and functioning correctly.
  • You can find instructions to import demo data on Codex page.
  • Check your theme with Theme Check and Theme Sniffer plugins

2. Making Compatible With Elementor

To make your theme compatible with Elementor page builder plugin, you need to take care of few things which are described below.

2.a. Do Not Include Container

Most of the theme use container class on their theme. If you are using a container inside the main content of a theme, remove it if the Elementor template is used.

We normally use container class after main content like this:

<div id="content" class="site-content">
    <div class="container">

If the page/post is using Elementor template, you need to remove container class as shown below.

<?php  
if( !is_page_template('elementor_header_footer')) ){ ?>
    <div class="container">
    <?php 
} ?>

In the above code, we are loading container if the template is not Elementor template.

Similarly, add same condition to closing tag of container div which looks like:

<?php  
if( !is_page_template('elementor_header_footer')) ){ ?>
    </div>
    <?php 
} ?>

2.b. Remove Space

Most of the theme designer use padding on content of the theme. You can remove content padding if the page is Elementor template.

At style.css file you can add CSS for elementor template like show here:

.elementor-template-full-width #content{
    padding: 0;
}

3. Make Style Overridable

It is very important to make styles of your main theme easily overridable by styles of Elementor. An example of this can be, Do not use !important on CSS of your theme. For Ex:

#content p{
    font-size: 16px !important;
}

#page #content .widget-area .widget .title{
    color: #555555;
}

Avoid using !important or long style selector. You can style above-mentioned elements like shown below:

p{
    font-size: 16px ;
}

.widget .title{
    color: #555555;
}

4. Check Elementor templates and Elements

Elementor comes with 2 types of templates, Elementor Canvas and Elementor Full Width. Create a new page and assign it Elementor Canvas or Elementor Full Width template. Click on Edit with Elementor button at top of the page edit section.

edit-with-elementor

Drag and drop each and every element of the Elementor and test them properly. Elementor comes with different elements that are shown with a red mark in the screenshot below. You can find them on the left side of your page edit window. If you need to develop WordPress themes compatible with Elementor, you need to check and test all these elements one by one.

elementor-elements

5. Reference Themes

I have developed several themes for Elementor. I have recently released 2 Elementor compatible WordPress theme which are available free. You can download theme and check their code or install them in your site and check how they look like.

Wrapping it Up:

If you are a WordPress theme developer, it is not so complex to develop WordPress themes compatible with Elementor or make your existing theme work perfectly with Elementor. I have tried to explain the method I use to develop Elementor compatible WordPress themes.

However, this method might not be applicable for all. Feel free to contact me here if you need any help to make your existing theme compatible with Elementor or if you want to develop WordPress themes compatible with Elementor from scratch.

Leave a Reply

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