How To Make Elementor Work With The Genesis Front Page

So I have decided to dabble a little with page builders. Seeing that Beaver Builder is all the hype, I decided to try something else….namely Elementor.

In order to get acquainted, i've decided to try to recreate some of my pages with Elementor.

My first project: The homepage.

Now my homepage was created with the front-page.php template and its associated widgets.

And from the outset I hit a snag!! When I went it to edit the front page with Elementor I got this message:

Video Tutorial

If you prefer not to watch the video or need more instructions, then continue reading.

What To Do?

So let's think this through. How do we make Elementor work with the Genesis front page? Two thoughts:

1. The 'the_content' function must be called on the current template. What is the current template?
2. The current template is front-page.php. (If you are unsure of your template, then go and download the Show Current Template plugin in WordPress.)

Let's take a look at the code:

The Front Page

The code we need to zoom in on is right at the top of the front-page.php template. It looks like this:

add_action( 'genesis_meta', 'executive_home_genesis_meta' );
/**
 * Add widget support for the front page. If no widgets active, display the default loop.
 *
 * @since 3.0.0
 */
function executive_home_genesis_meta() {
	if ( is_active_sidebar( 'home-slider' ) || is_active_sidebar( 'home-top' ) || is_active_sidebar( 'home-top-2' ) || is_active_sidebar( 'home-top-3' ) || is_active_sidebar( 'home-top-4' ) || is_active_sidebar( 'home-portfolio' ) || is_active_sidebar( 'home-cta' ) || is_active_sidebar( 'home-middle' ) ) {
		remove_action( 'genesis_loop', 'genesis_do_loop' );
		add_action( 'genesis_loop', 'executive_home_sections' );
		add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );
		add_filter( 'body_class', 'executive_add_home_body_class' );
	}
}

This function essentially states that if any of the front page's widgets are active, then remove the default genesis loop, and add the widgets in its place. It is the genesis loop that calls the_content() function, and since this loop is being removed, Elementor is unable to find the content area.

(The two add filters correlate with the default page layout (full) and the option of adding a class to the body (both of which are found in the Genesis settings). So these are not important to keep either as we will be using Elementor to build the page.)

Since we are going to be building the page with Elementor, we do not need the widgets and can bring back our loop.

So there are two options:

1. We can remove the widgets. This is a "no" for me as I have a lot of info there and if I decide to revert I would not want to have to manually insert and populate these again.
2. We can disable the function. This way we can keep our widgets in place and just not use them.

Option #2 it is!

Make Elementor Work With the Genesis Front Page

The solution is simple. Just disable the function from being hooked into the page. Here is how to do it with this one line of the above code:

//Disable this one line of code with /* and */ on the ends
/*add_action( 'genesis_meta', 'executive_home_genesis_meta' );*/

Now if you update the template and look at your front page, it will be blank and all set to build. And this is how you make Elementor work with the Genesis front page.

Do you use Elementor with Genesis? How have you or how do you make Elementor work with the Genesis front page? I would love to hear your thoughts in the comments below!