Elementor header/footer not updating

If you are using Elementor to create your WordPress website and you notice that the header or footer sections are not updating when you make changes, there could be a caching issue. To resolve this, you can add a code snippet to disable caching for the header and footer sections.

function wpsnippets_disable_elementor_header_footer_cache() {
    if ( defined( 'ELEMENTOR_VERSION' ) ) {
        $elementor = ElementorPlugin::instance();
        $elementor->frontend->add_no_cache_html();
    }
}
add_action( 'wp', 'wpsnippets_disable_elementor_header_footer_cache' );

This code snippet checks if Elementor is active and then adds a no-cache HTML tag to the frontend. This will prevent caching for the header and footer sections created with Elementor.

Use case: This code snippet is useful when you are using Elementor to design your website’s header and footer, but the changes you make are not reflected on the frontend due to caching. By adding this code snippet to your theme’s functions.php file, you can disable caching for the Elementor header and footer sections, ensuring that any updates you make are immediately visible to your visitors.

Examples

Example #1: Updating Elementor Header/Footer Using Custom PHP Function

This use case demonstrates how to update the Elementor header/footer using a custom PHP function. The code example below shows how to create a custom function that updates the header/footer content using the Elementor API.

function wpsnippets_update_elementor_header_footer() {
    $header_id = 123; // Replace with the actual header ID
    $footer_id = 456; // Replace with the actual footer ID

    $header_content = '<div>New header content</div>'; // Replace with the new header content
    $footer_content = '<div>New footer content</div>'; // Replace with the new footer content

    ElementorPlugin::$instance->db->update_content($header_id, $header_content);
    ElementorPlugin::$instance->db->update_content($footer_id, $footer_content);
}

The code above defines a custom PHP function wpsnippets_update_elementor_header_footer() that updates the header and footer content in Elementor. It uses the Elementor API to update the content by providing the header/footer ID and the new content. Replace the placeholder values with the actual header/footer IDs and the new content.

Example #2: Updating Elementor Header/Footer Using Elementor Hooks

This use case demonstrates how to update the Elementor header/footer using Elementor hooks. The code example below shows how to use the elementor_theme_do_location hook to update the header/footer content.

function wpsnippets_update_elementor_header_footer() {
    add_action( 'elementor_theme_do_location', function( $location ) {
        if ( 'header' === $location ) {
            echo '<div>New header content</div>'; // Replace with the new header content
        } elseif ( 'footer' === $location ) {
            echo '<div>New footer content</div>'; // Replace with the new footer content
        }
    });
}

The code above defines a custom PHP function wpsnippets_update_elementor_header_footer() that uses the elementor_theme_do_location hook to update the header and footer content. Inside the hook callback function, check the $location parameter to determine whether it is the header or footer location, and echo the new content accordingly.

Example #3: Updating Elementor Header/Footer Using Elementor Templates

This use case demonstrates how to update the Elementor header/footer using Elementor templates. The code example below shows how to create a new Elementor template for the header/footer and assign it to the respective location.

function wpsnippets_update_elementor_header_footer() {
    $header_template_id = 123; // Replace with the actual header template ID
    $footer_template_id = 456; // Replace with the actual footer template ID

    ElementorPlugin::$instance->theme_builder->register_location( 'header', [
        'title' => 'Header',
        'template_id' => $header_template_id,
    ]);

    ElementorPlugin::$instance->theme_builder->register_location( 'footer', [
        'title' => 'Footer',
        'template_id' => $footer_template_id,
    ]);
}

The code above defines a custom PHP function wpsnippets_update_elementor_header_footer() that creates new Elementor templates for the header and footer. It uses the Elementor API to register the templates to the respective locations by providing the template IDs. Replace the placeholder values with the actual template IDs.