wpLovr white logo

Frontend Init

How to use Elementors JS Hook - Frontend/Init

Step 1. Create a script file in your theme folder such as /js/frontendinit.js

folders

Step 2. Enqueue your scripts via your theme functions.php with proper dependencies

1
2
3
4
5
6
7
// Theme Scripts & Styles
function elementor_hello_theme_scripts_styles() {
    if(is_page( 'frontend-init')){
	    wp_enqueue_script( 'frontend-init', get_stylesheet_directory_uri() . '/js/frontendinit.js', array('jquery'), time(), true );
	}
}
add_action( 'wp_enqueue_scripts', 'elementor_hello_theme_scripts_styles' );

Step 3. Wrap your script in an private function and initialize jquery

1
2
3
4
5
6
(function($){
    
    //doc ready
    console.log('doc ready');
    
})(jQuery);

Step 4. Initialize the hook “elementor/fronend/init”

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
(function($){
    
    //doc ready
    console.log('doc ready');
    
    //elementor init
    jQuery(window).on('elementor/frontend/init', function(){
        console.log('elementor init');
    });
    
})(jQuery);

FIN

p.s. check the console of this page and see it in action