Custom Theme Elementor Compatibility

—

### 1. **Set Up the Theme for Elementor**
Ensure your theme has the required templates (`header.php`, `footer.php`, `index.php`, etc.) and a properly defined `functions.php` file.

—

### 2. **Add Theme Support for Elementor**
Add the following code to your theme's `functions.php` file to declare support for Elementor:

function mytheme_elementor_support() {
    // Enable Elementor Theme Compatibility
    add_theme_support('elementor');
}
add_action('after_setup_theme', 'mytheme_elementor_support');

—

### 3. **Create Custom Elementor-Compatible Templates**
– **Page Template:** Create a `page.php` or `template-fullwidth.php` file with minimal markup. Here's an example:

<?php
/* Template Name: Full Width */

get_header(); ?>

<div id="primary" class="content-area">
    <main id="main" class="site-main">
        <?php
        while (have_posts()) :
            the_post();
            the_content();
        endwhile;
        ?>
    </main>
</div>

<?php get_footer(); ?>

—

### 4. **Add Support for Elementor Locations**
Define areas like headers, footers, and archives as editable in Elementor. Add this to your `functions.php`:

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

—

### 5. **Style Compatibility**
Ensure your theme's CSS does not conflict with Elementor's styles:
– Remove or reset unnecessary global styles.
– Use Elementor’s default colors and fonts by disabling your theme's defaults:

add_action('wp_enqueue_scripts', function () {
    wp_dequeue_style('your-theme-css'); // Replace with your theme's CSS handle.
}, 20);

– Alternatively, allow Elementor to override your theme's styles by disabling default settings in Elementor settings under **Settings > Style**.

—

### 6. **Enqueue Elementor Scripts**
Enqueue Elementor's CSS and JS files in your theme. In `functions.php`:

function mytheme_enqueue_scripts() {
    if (did_action('elementor/loaded')) {
        wp_enqueue_style('elementor-frontend');
        wp_enqueue_script('elementor-frontend');
    }
}
add_action('wp_enqueue_scripts', 'mytheme_enqueue_scripts');

—

### 7. **Elementor Editor Preview Compatibility**
Ensure Elementor's editor works well with your theme by adding the following snippet:

add_action('elementor/frontend/after_enqueue_styles', function () {
    if (is_admin() && ElementorPlugin::$instance->editor->is_edit_mode()) {
        wp_enqueue_style('my-theme-editor-style', get_template_directory_uri() . '/editor-style.css', [], '1.0.0');
    }
});

—

### 8. **Test and Debug**
– Enable Elementor and test your pages.
– Fix issues like improper layouts or spacing by ensuring your theme’s styles (CSS) are compatible.

—

### 9. **Optional: Add Custom Widgets**
You can register custom widgets for Elementor by creating a plugin or extending the theme. Example:

– Create a new folder `elementor-widgets` in your theme.
– Add custom widget logic using Elementor's API.

For example, register a widget:

function mytheme_register_custom_widgets($widgets_manager) {
    require_once(__DIR__ . '/elementor-widgets/custom-widget.php');
    $widgets_manager->register(new MyThemeCustom_Widget());
}
add_action('elementor/widgets/register', 'mytheme_register_custom_widgets');

—

### 10. **Package Your Theme**
Once all steps are complete, package your theme and test its compatibility with Elementor in various scenarios.

Let me know if you want help with custom widget development or advanced integration!