This snippet runs custom footer JavaScript on the frontend while preventing it from executing inside the Elementor Editor.
It is useful for footer accordions, toggles, animations, and other jQuery-based scripts that manipulate the page DOM. By detecting the elementor-editor-active class, the script exits early when the Elementor Editor is active, helping prevent unnecessary JavaScript execution and potential editor-side conflicts.
Benefits
1. Elementor Editor Safe
Prevents the custom footer JavaScript from executing while editing a page in Elementor.
2. Reduces JavaScript Conflicts
Helps prevent custom accordion, animation, toggle, or DOM-manipulation scripts from interfering with the Elementor editing interface.
3. Frontend-Only Functionality
The JavaScript runs where it is actually needed—the live website frontend.
4. Useful for jQuery Scripts
Works well with custom jQuery-based footer interactions such as accordions, dropdowns, toggles, and animations.
5. Simple and Lightweight
Uses a straightforward body-class check and does not require an additional plugin or complex configuration.
6. Easy to Customize
You can place your actual footer accordion functionality inside the footerAccordion() function.
<?php
/* Prevent Footer JavaScript from Running in Elementor Editor */
function footer_accordion_script() {
?>
<script>
jQuery(function ($) {
// Do not run inside the Elementor Editor.
if ($('body').hasClass('elementor-editor-active')) {
return;
}
function footerAccordion() {
// Add your footer accordion code here.
}
footerAccordion();
});
</script>
<?php
}
add_action( 'wp_footer', 'footer_accordion_script', 100 );
