How to integrate Elementor in WordPress theme

The Elementor page builder is the world's best WordPress page builder and is used by millions of people. Integrating Elementor in your WordPress theme is easy and free, and doing so brings your theme millions of potential customers.

This tutorials explains how to integrate Elementor with your WordPress theme in a few simple steps. I'm going to go over some basic concepts and techniques that are important when using Elementor in your theme. It also covers the most essential aspects of working with the page and post templates.

No complicated stuff, just two simple things you need to do:

making sure the plugin is available;
creating templates.

An edit button inside to WordPress Gutenberg editor to switch to the Elementor page builder.

Make Elementor available

First, you'll need to make the Elementor plugin available. The only requirement is that the plugin is installed and active.

Users can of course go and download the plugin themselves. For most cases, this is not the ideal scenario. Using the TGM Plugin Activation library for including plugins is usually the best idea. TGMPA is used in perhaps more than 80% of all WordPress themes that need plugins.

Below a code snippet for the TGM plugin:

PHP

[
    'name'      => 'Elementor Page Builder', //Full name of plugin
    'slug'      => 'elementor',        //Last part of the plugin repository - https://wordpress.org/plugins/elementor/
    'required'  => false,             //Can also be set true. This means that the notice prompting users to install Elementor can only be hidden by actually installing it. When set to false, users can hide the notice.
]

Adding a page.php & single.php template

Now that Elementor is available, we're going to assign the places where Elementor is needed. When that's done, Elementor will take care of the rest.

Elementor can be used on normal (static) pages and blog posts. (In fact, everywhere where the_content() is used.) When a user edits a page or post, Gutenberg is used by default. Elementor replaces the Gutenberg editor.

It can also be used in conjunction with Gutenberg, e.g. a user can choose for each individual page and post whether it uses Gutenberg or Elementor.

To demonstrate how to use Elementor in those places, we'll create an example page.php template for the static pages and a single.php template for the blog posts.

Creating the page.php

The page.php-template is the template responsible for displaying static pages. In most cases, you'll want to give the user/your client complete freedom to work with Elementor and therefore not include too much other code. You only need to do this when you have a very specific purpose in mind.

Usually the page.php template only gets the header and the footer and nothing more. The space between the header and footer can be filled by the user with content made in Elementor (or Gutenberg).

Our template file will therefore be a blank template, with only the header and the footer. The code is very simple:

PHP

<?php if (!defined('ABSPATH')) { exit; }?>
<?php
get_header();
while ( have_posts() ) : the_post();
    the_content();
endwhile; // End of the loop.
get_footer(); ?>

Lets break it down in pieces.

PHP

<?php if (!defined('ABSPATH')) { exit; }?>

This line at the top prevents people from accessing the PHP-file directly when typing in the URL. This is a general security measure. It will not impact the running of other code, so it's always advisable to add it.

PHP

get_header();

After that, we'll load the header with the get_header()-function. This gets your header.php-file. This is a basic function you've probably used before.

PHP

while ( have_posts() ) : the_post();
    the_content();
endwhile;

Then we'll get the loop (the part from while to endwhile).

The WordPress loop is, in short, responsible for pulling information out of the database and displaying it as HTML. In this case, it'll display the_content(). This function contains the HTML of the page. This HTML is generated by Gutenberg by default.

When Elementor is used to create a page, Elementor takes it over.

Elementor can be used in every template you add the the_content() function to and that can also be edited in the back-end.

What is the WordPress loop?

The loop is something specific WordPress. There are many tutorials on the internet about it, but when I learned about the loop, most tutorials left me even more confused after reading them, than I had been before. I'll try to explain it in short in my own way.

The loop is a simple piece of code which displays information from the database. It works the same way as a PHP foreach loop. Inside the loop, you'll place HTML. In that HTML, you can use functions like the_title() or the_content(). In this way you can output specific HTML with information from the loop.

For example, you can retrieve a list of all WordPress posts with links to each post. When doing this, you'll most likely use functions like the_title(), the_permalink(), the_excerpt() and the_post_thumbnail(). It can be very helpful to have a look at some code examples in the WordPress Codex. Try to understand them. Most code speaks for themselves.

Make sure to place the_content() inside the loop, just for safety. In some cases, omitting the while and endwhile may cause WordPress to throw an error.

The last part pulls in the footer, similar to how we get the header.

Creating the single.php

Let's now create the single.php file for our blog posts. The single.php file looks very similar to the page.php file. The loop works exactly the same as the page template, with the only difference that the single.php displays a blog post, rather than a page.

PHP

<?php if (!defined('ABSPATH')) { exit; }?>
<?php get_header(); ?>
 
<!-- Start page -->
<div <?php post_class(['rjs-single', 'override']); ?>>
    <?php if(have_posts()): while(have_posts()): the_post(); ?>
            <?php the_content(); ?>
       <?php endwhile;
          endif;
    ?>
</div>
<?php get_footer(); ?>

My single.php file is a bit more complicated than the page.php file. To be honest, you could use the same template as page.php and be fine. But I wouldn't advise this, because it is

considered bad practice (in fact, it really is bad practice);
most plugins won't be compatible with your theme (including Elementor).

It's also useful if you want for example to add a specific classname to container element.

Let's consider the post_class() function:

PHP

<div <?php post_class(['rjs-single', 'override']); ?>>

This function outputs the class attribute for the container element of a single post. It outputs something like this:

HTML

class="rjs-single override post-66 post type-post status-publish format-standard has-post-thumbnail hentry category-uncategorized"

So, why is this important? Because plugins can hook into this function to add some extra classes and provide things like styling.

Say that you've added a great plugin that allows you to add Elementor templates right inside Gutenberg (yes, that exists), the plugin should be able to target their things.

What about parameters?

The post_class accepts one optional parameter, an array container extra classes to add. Here I added two extra classes:

PHP

['rjs-single', 'override']

More about Elementor?

All in all, adding Elementor support to your theme is really quick and easy. It might not seem so at first though, especially if you are a beginner. It also surprised me at first how easy it was. In the coming tutorials I will focus on several more advanced Elementor tricks. Think of building your own Elementor blocks and adding custom CSS after each block. Stay tuned!

Published: 12 October 2020
Category: Elementor
Tags: Elementor, Guides, How-to, Page-builder

How to integrate Elementor in a WordPress theme