skip to Main Content

I wrote a WordPress theme, I want to let it compatible with Elementor, where can I start my work?

2

Answers


  1. To make your theme compatible with the Elementor page builder plugin, you need to take care of few things.

    • We normally use container class after main content. If the page/post is using the Elementor template, you need to remove the container class
    • Most of the theme designers use padding on the content of the theme. You can remove content padding if the page is an Elementor template.
    • It is very important to make styles of your main theme easily overridable by styles of Elementor. So, Do not use !important
    Login or Signup to reply.
  2. There are few things to consider before making a theme compatible with Elementor:

    First you need to register location in functions.php
    Locations are organized in groups:Header, Footer, Single, Archive.
    To register all location:

    function theme_prefix_register_elementor_locations( $elementor_theme_manager ) {
    
         $elementor_theme_manager->register_all_core_location();
    
    }
    add_action( 'elementor/theme/register_locations', 'theme_prefix_register_elementor_locations' );
    

    Second, Display locations in the Theme: We use elementor_theme_do_location()
    Example, displaying Archive location:

    <?php
    get_header();
    
    // Elementor `archive` location
    if ( ! function_exists( 'elementor_theme_do_location' ) || ! elementor_theme_do_location( 'archive' ) ) {
        get_template_part( 'template-parts/archive' );
    }
    
    get_footer();
    

    Then, make sure to remove container if using elemntor template:

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

    Remember always to use conditionnal tags to test in case elementor is not installed, otherwise it will throw errors.
    More detail: Elementor Theme location API

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search