How to get your theme ready for Elementor

Introduction

Overview

Many of our customers here at MemberFix use Elementor as their main page builder on their WordPress websites.

Elementor is a great page builder tool that comes as a plugin (as opposed to a full theme) and has some really great features. One of these features is the ability to have a template for the website header and footer. Elementor also has many other many templates which can be used, of course, but I would like to focus on the header template in this article.

The reason I’m doing this is because many themes are actually not ready for Elementor out of the box. So I would like to show you how can make your theme work smoothly with the templates offered by Elementor.

If I had to pick a question that describes this article, it would be: “Why is my page blank after I have activated the Elementor header?“

Video tutorial

How to create a header template in Elementor?

1. Log in to WordPress Dashboard and go to Elementor > My Templates and click on the Add New button.

2. Select “Header” from “Select the type of template you want to work on” and add a name for this header template.

3. You will be redirected to the Elementor builder page where you can start to build the header template just like you would any other page (add your logo, menu, phone number etc.)

4. When you finish the work on the header and click on the bottom-left “Publish” button, you will see a popup asking you: “Where Do You Want to Display Your Header?” Click on the “Add Condition” button.

5. If you want to show the header on a specific page just select Singular > All Pages > add page title. Click again on the “Add Condition” button if you want to add the header to other pages.

6. Click on “Publish” and the header will be added to all of the pages that you selected.

I think you’ve already guessed that when this header template is updated, it will be updated on all the pages to which it was assigned. That is a cool thing, right? 🙂

Now, if you check one of the pages to which you have assigned the header template you created and you are able to see the header but see a huge blank space under it and nothing else—even though you have a lot of text on the page—that means that your theme it is not ready for Elementor.

Introducing Elementor Locations

To fix the above problem and show the content on your page, we will need to add some PHP programming to the theme. But first we need to get familiar with “Elementor locations”.

Elementor locations are basically like WordPress template parts. But they are different in the sense that they are used to insert custom Elementor templates in to various locations. The “Header” location, for instance, is one of the default Elementor locations.

Add Elementor locations code to functions.php

To use “Header” as an Elementor location and make the page work properly, we need to add, first of all, some custom code to the functions.php file which can be found in your theme folder.

IMPORTANT: I highly recommend that you first create a child theme, or use the My Custom Functions WordPress plugin whenever you add custom code to your theme files. Otherwise, any time you update your theme your changes will get wiped out.

So, you need to open the functions.php file and, at the end of it, add the below code:

function threg_elem_locations( $elementor_theme_manager ) {

	$elementor_theme_manager->register_all_core_location();

}
add_action( 'elementor/theme/register_locations', 'threg_elem_locations' );

Add PHP code to header.php file

Then you will need to open your header.php file which can be also found in your WordPress theme folder and where you have the current header code (the part which generates the current header on your website) and embed your current header code inside the following PHP “if” statement:

<?php if ( ! function_exists( 'elementor_theme_do_location' ) || ! elementor_theme_do_location( 'header' ) ) { ?>

<?php
// Elementor `header` location
if ( ! function_exists( 'elementor_theme_do_location' ) || ! elementor_theme_do_location( 'header' ) ) { ?>

//your current header code here

<?php endif; } ?>

After all the code is added, please reload the page which uses the Elementor header and you will be able to see that the blank space problem is gone.

Please let me know if you have any questions or suggestions.