Elementor duplicate section issue

The code snippet provided below addresses the issue of duplicating sections in Elementor causing unexpected behavior. This issue often occurs when duplicating a section that contains dynamic content or custom JavaScript functionality. To resolve this, we need to ensure that the duplicated section has unique IDs and classes to prevent conflicts.

add_action( 'elementor/dynamic_tags/register_tags', 'wpsnippets_register_custom_elementor_tags' );

function wpsnippets_register_custom_elementor_tags( $dynamic_tags ) {
    $dynamic_tags->register_group( 'custom-group', [
        'title' => 'Custom Group',
        'tags' => [
            'custom-id',
            'custom-class',
        ],
    ] );

    $dynamic_tags->register_tag( 'custom-id', [
        'title' => 'Custom ID',
        'group' => 'custom-group',
        'callback' => 'wpsnippets_get_custom_id',
    ] );

    $dynamic_tags->register_tag( 'custom-class', [
        'title' => 'Custom Class',
        'group' => 'custom-group',
        'callback' => 'wpsnippets_get_custom_class',
    ] );
}

function wpsnippets_get_custom_id() {
    $post_id = get_the_ID();
    $section_id = 'section-' . $post_id . '-' . get_row_index();
    return $section_id;
}

function wpsnippets_get_custom_class() {
    $post_id = get_the_ID();
    $section_class = 'section-' . $post_id . '-' . get_row_index();
    return $section_class;
}

This code snippet registers custom Elementor dynamic tags for generating unique IDs and classes for sections. By using these dynamic tags in the Elementor template, each duplicated section will have its own unique ID and class based on the post ID and row index. This ensures that the duplicated sections do not interfere with each other and function as expected.

To use this code snippet, you need to add it to your theme’s functions.php file or a custom plugin file. After adding the code, you can access the custom dynamic tags in Elementor by adding a Text or HTML widget and selecting the “Dynamic” option. Look for the “Custom Group” category, and you will find the “Custom ID” and “Custom Class” tags. Use these tags in the appropriate fields to generate unique IDs and classes for your sections.

Note: This code assumes you are using Elementor Pro, as dynamic tags are a Pro feature.

Examples

Example 1: Duplicate Elementor Section with Unique IDs

This use case demonstrates how to duplicate an Elementor section while ensuring that the duplicated section has unique IDs for its elements.

function wpsnippets_duplicate_elementor_section( $post_id, $section_id ) {
    $elementor = ElementorPlugin::instance();
    $document = $elementor->documents->get( $post_id );
    $section = $document->get_element( $section_id );

    if ( $section ) {
        $new_section = $section->duplicate();

        // Generate unique IDs for the new section's elements
        $new_section->traverse( function( $element ) {
            $element->set_unique_id();
        });

        // Save the changes
        $document->save();
    }
}

This code example demonstrates how to duplicate an Elementor section identified by its $section_id within a specific $post_id. The code retrieves the Elementor document and the section using the Elementor Plugin instance. It then duplicates the section and generates unique IDs for all the elements within the duplicated section. Finally, the changes are saved to the document.

Example 2: Exclude Specific Elements from Duplicated Section

This use case shows how to exclude specific elements from being duplicated when duplicating an Elementor section.

function wpsnippets_duplicate_elementor_section( $post_id, $section_id ) {
    $elementor = ElementorPlugin::instance();
    $document = $elementor->documents->get( $post_id );
    $section = $document->get_element( $section_id );

    if ( $section ) {
        $new_section = $section->duplicate();

        // Exclude specific elements from duplication
        $excluded_elements = array( 'element_id_1', 'element_id_2' );
        $new_section->traverse( function( $element ) use ( $excluded_elements ) {
            if ( in_array( $element->get_unique_id(), $excluded_elements ) ) {
                $element->remove();
            }
        });

        // Save the changes
        $document->save();
    }
}

In this code example, we extend the previous use case by excluding specific elements from being duplicated. The $excluded_elements array contains the unique IDs of the elements that should not be duplicated. The code checks if an element’s unique ID is in the excluded elements array and removes it from the duplicated section if found.

Example 3: Duplicate Elementor Section with Custom Settings

This use case demonstrates how to duplicate an Elementor section while applying custom settings to the duplicated section.

function wpsnippets_duplicate_elementor_section( $post_id, $section_id ) {
    $elementor = ElementorPlugin::instance();
    $document = $elementor->documents->get( $post_id );
    $section = $document->get_element( $section_id );

    if ( $section ) {
        $new_section = $section->duplicate();

        // Apply custom settings to the duplicated section
        $new_section->update_settings( array(
            'setting_1' => 'value_1',
            'setting_2' => 'value_2',
        ));

        // Save the changes
        $document->save();
    }
}

This code example showcases how to duplicate an Elementor section and apply custom settings to the duplicated section. The update_settings() method is used to update specific settings of the duplicated section. In this example, ‘setting_1’ and ‘setting_2’ are updated with ‘value_1’ and ‘value_2’ respectively. Finally, the changes are saved to the document.