title: "Frontend Scripts" post_status: publish comment_status: open taxonomy: category: - elementor-developers-docs post_tag: - Scripts Styles - Src - Repos

Frontend Scripts

Some addons have custom frontend scripts loaded on pages built with Elementor. Use elementor/frontend/before_enqueue_scripts or elementor/frontend/after_enqueue_scripts action hooks, which are fired when Elementor frontend scripts are registered and enqueued.

Registering Frontend Scripts

In the example below, we'll register and enqueue custom scripts before Elementor frontend scripts are registered and enqueued:

```php {6,12} function my_plugin_register_frontend_scripts() { wp_register_script( 'frontend-script-1', plugins_url( 'assets/js/frontend-script-1.js', FILE ) ); wp_register_script( 'frontend-script-2', plugins_url( 'assets/js/frontend-script-2.js', FILE ), [ 'external-library' ] ); wp_register_script( 'external-library', plugins_url( 'assets/js/libs/external-library.js', FILE ) ); } add_action( 'elementor/frontend/before_register_scripts', 'my_plugin_register_frontend_scripts' );

function my_plugin_enqueue_frontend_scripts() { wp_enqueue_script( 'frontend-script-1' ); wp_enqueue_script( 'frontend-script-2' ); } add_action( 'elementor/frontend/before_enqueue_scripts', 'my_plugin_enqueue_frontend_scripts' );

Now we'll register and enqueue custom scripts **after** Elementor frontend scripts are registered and enqueued:

```php {6,12}
function my_plugin_register_frontend_scripts() {
    wp_register_script( 'frontend-script-1', plugins_url( 'assets/js/frontend-script-1.js', __FILE__ ) );
    wp_register_script( 'frontend-script-2', plugins_url( 'assets/js/frontend-script-2.js', __FILE__ ), [ 'external-library' ] );
    wp_register_script( 'external-library', plugins_url( 'assets/js/libs/external-library.js', __FILE__ ) );
}
add_action( 'elementor/frontend/after_register_scripts', 'my_plugin_register_frontend_scripts' );

function my_plugin_enqueue_frontend_scripts() {
    wp_enqueue_script( 'frontend-script-1' );
    wp_enqueue_script( 'frontend-script-2' );
}
add_action( 'elementor/frontend/after_enqueue_scripts', 'my_plugin_enqueue_frontend_scripts' );

::: warning Please Note Those scripts will be loaded on all pages built with Elementor. To reduce performance impact, make sure you minify the files. :::