What to Do If Elementor Is Not Loading? Step-by-Step Fix

Recently, I encountered an issue while trying to use Elementor with my custom WordPress theme. Whenever I attempted to edit a page with Elementor, I got the following error message in the console:

Refused to display 'https://mywebsite.com/' in a frame because it set 'X-Frame-Options' to 'deny'.
        

Additionally, Elementor was unable to load properly, getting stuck on the loading screen. However, when I switched to a default WordPress theme, Elementor worked fine. This indicated that the problem was related to my custom theme.

Step 1: Understand the Issue

Elementor loads its editor inside an iframe to provide a seamless editing experience. However, if the server or the theme sets the X-Frame-Options header to DENY, the browser prevents Elementor from loading inside an iframe. This usually happens due to security settings applied via .htaccess, a server configuration, or a caching plugin.

Step 2: Fix Theme Conflicts

Since my issue was caused by a custom theme, I had to ensure that Elementor could work properly within it. Here are the changes I made:

1. Modify functions.php

I disabled certain scripts and styles when Elementor was active to prevent conflicts.

function disable_theme_scripts_on_elementor() {
    if ( function_exists('elementor_load_plugin_textdomain') && \Elementor\Plugin::$instance->documents->get_current() ) {
        // Dequeue JavaScript files
        wp_dequeue_script( 'custom' );
        wp_dequeue_script( 'jquery' );
        wp_dequeue_script( 'slick' );
        wp_dequeue_script( 'appear' );
        wp_dequeue_script( 'isotop' );
        wp_dequeue_script( 'bootstrap' );
        wp_dequeue_script( 'webpack' );
        wp_dequeue_script( 'modules' );
        wp_dequeue_script( 'frontend' );

        // Dequeue CSS files
        wp_dequeue_style( 'bootstrap' );
        wp_dequeue_style( 'style' );
        wp_dequeue_style( 'custom' );
        wp_dequeue_style( 'lite-css' );
        wp_dequeue_style( 'post-css' );
        wp_dequeue_style( 'slick' );
    }
}
add_action( 'wp_enqueue_scripts', 'disable_theme_scripts_on_elementor', 20 );
        

Additionally, I disabled Swiper scripts separately:

function disable_swiper_on_elementor() {
    if ( function_exists('elementor_load_plugin_textdomain') && \Elementor\Plugin::$instance->documents->get_current() ) {
        wp_dequeue_style( 'swiper-css' );
        wp_dequeue_script( 'swiper-js' );
        wp_dequeue_script( 'custom-swiper-init' );
    }
}
add_action( 'wp_enqueue_scripts', 'disable_swiper_on_elementor', 20 );
        

2. Modify page.php

Another potential issue was ensuring that Elementor could load the page properly. I updated my page.php file to include the_content() so Elementor could inject its editor correctly:

<?php
get_header(); ?>

<Style>
    p { font-size:16px; }
</Style>

<?php the_content(); ?>

<?php get_footer(); ?>
        

This ensures that Elementor can take over the page without any issues.

Step 3: Try Changes in .htaccess

If none of the above steps work, you may need to modify .htaccess settings related to X-Frame-Options. Try making adjustments in .htaccess to resolve iframe restrictions and allow Elementor to load properly.

Final Thoughts

This issue was a great learning experience for me. It reinforced the importance of understanding server-level configurations and how they interact with WordPress themes and page builders. By tweaking my theme’s functions, scripts, and .htaccess settings, I was able to make my custom theme fully compatible with Elementor.

If you're facing a similar problem, I hope this solution helps you! Have you ever encountered such an issue? Let’s discuss in the comments! ??