Elementor custom JavaScript snippet not executing

If you’re using Elementor and have added a custom JavaScript snippet that is not executing, there are a few possible reasons for this issue. One common reason is that the JavaScript code is not properly enqueued or loaded in the correct order. To ensure that your custom JavaScript snippet is executed correctly in Elementor, you can follow these steps:

1. Create a new file for your custom JavaScript code. You can name it anything you like, but it’s recommended to use a descriptive name related to your code’s purpose. For example, let’s name it custom-script.js.

2. Open the custom-script.js file in a text editor and add your JavaScript code. Make sure your code is valid and follows the JavaScript syntax rules.

(function($) {
    // Your custom JavaScript code here
    // For example, let's log a message to the browser console
    console.log('Custom JavaScript code executed!');
})(jQuery);

3. Save the custom-script.js file.

4. In your WordPress theme or child theme’s functions.php file, enqueue the custom JavaScript file using the wp_enqueue_script() function. This function ensures that your script is loaded in the correct order and follows WordPress best practices.

function wpsnippets_enqueue_custom_script() {
    // Enqueue the custom JavaScript file
    wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/custom-script.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'wpsnippets_enqueue_custom_script' );

In the code example above, we’re using the wp_enqueue_script() function to enqueue the custom-script.js file. The function takes several parameters:

• The first parameter is the handle or name of the script. In this case, we’re using 'custom-script' as the handle.
• The second parameter is the URL of the script file. We’re using the get_stylesheet_directory_uri() function to get the URL of the current theme’s directory and concatenate it with the custom-script.js file name.
• The third parameter is an array of dependencies. In this case, we’re specifying 'jquery' as a dependency, which means that jQuery will be loaded before our custom script.
• The fourth parameter is the version number of the script. You can change it to a different value if needed.
• The fifth parameter is a boolean value indicating whether the script should be loaded in the footer (true) or in the header (false). Setting it to true ensures that the script is loaded after the page content, which is usually recommended.

1. Save the functions.php file.

By following these steps, your custom JavaScript snippet should now be properly enqueued and executed in Elementor. Remember to clear any caching plugins or server caches to ensure that the changes take effect.

Examples

Example #1: Adding a Custom JavaScript Snippet to Elementor

This use case demonstrates how to add a custom JavaScript snippet to an Elementor page. The code example below shows how to enqueue a JavaScript file and register a custom Elementor widget that executes the JavaScript code.

function wpsnippets_enqueue_scripts() {
    wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/custom-script.js', array( 'jquery' ), '1.0', true );
}

add_action( 'wp_enqueue_scripts', 'wpsnippets_enqueue_scripts' );

function wpsnippets_register_custom_widget() {
    ElementorPlugin::instance()->widgets_manager->register_widget_type( new ElementorWidget_Custom_Snippet() );
}

add_action( 'elementor/widgets/widgets_registered', 'wpsnippets_register_custom_widget' );

class Widget_Custom_Snippet extends ElementorWidget_Base {
    public function get_name() {
        return 'custom-snippet';
    }

    public function get_title() {
        return 'Custom Snippet';
    }

    public function get_script_depends() {
        return array( 'custom-script' );
    }

    protected function _register_controls() {
        // Widget controls registration
    }

    protected function render() {
        // Widget rendering code
    }
}

The code registers a custom JavaScript file custom-script.js using the wp_enqueue_script() function. It also registers a custom Elementor widget Widget_Custom_Snippet that depends on the custom-script script. The widget can be added to any Elementor page and will execute the custom JavaScript code.

Example #2: Executing a Custom JavaScript Snippet on Elementor Page Load

This use case demonstrates how to execute a custom JavaScript snippet when an Elementor page loads. The code example below shows how to use the elementor/frontend/after_enqueue_scripts action hook to enqueue a JavaScript file and execute the custom code.

function wpsnippets_enqueue_scripts() {
    wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/custom-script.js', array( 'jquery' ), '1.0', true );
}

add_action( 'elementor/frontend/after_enqueue_scripts', 'wpsnippets_enqueue_scripts' );

The code uses the wp_enqueue_script() function to enqueue a custom JavaScript file custom-script.js that contains the desired code. The elementor/frontend/after_enqueue_scripts action hook ensures that the script is enqueued after Elementor’s scripts, allowing the custom code to execute on page load.

Example #3: Adding Inline Custom JavaScript Snippet to Elementor

This use case demonstrates how to add an inline custom JavaScript snippet directly to an Elementor page. The code example below shows how to use the elementor/frontend/before_render action hook to add the JavaScript code inline.

function wpsnippets_add_inline_script( $elementor_instance ) {
    echo '<script>
        // Custom JavaScript code here
    </script>';
}

add_action( 'elementor/frontend/before_render', 'wpsnippets_add_inline_script' );

The code uses the elementor/frontend/before_render action hook to add an inline JavaScript snippet directly to the rendered Elementor page. The custom JavaScript code can be added within the <script> tags, allowing for dynamic functionality or modifications specific to the page.