do_action( 'wp_enqueue_scripts' )
Fires when scripts and styles are enqueued.
Description
Source
Changelog
| Version | Description |
|---|---|
| 2.8.0 | Introduced. |
More Information
wp_enqueue_scripts is the proper hook to use when enqueuing scripts and styles that are meant to appear on the front end. Despite the name, it is used for enqueuing both scripts and styles.
Usage
function themeslug_enqueue_style() {
wp_enqueue_style( 'my-theme', 'style.css', false );
}
function themeslug_enqueue_script() {
wp_enqueue_script( 'my-js', 'filename.js', false );
}
add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_style' );
add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_script' );
Basic Example
/** * Proper way to enqueue scripts and styles. */ function wpdocs_theme_name_scripts() { wp_enqueue_style( 'style-name', get_stylesheet_uri() ); wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true ); } add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );Instead of this Action, use ‘admin_enqueue_scripts’ for Admin pages and ‘login_enqueue_scripts’ for the login page.
This actions passes an argument
$hookthat is handy when for example to prevent the script from loading on certain pages;function wpdocs_enqueue_scripts( $hook ) { // Load only in add new post page if ( is_admin() && 'post-new.php' !== $hook ) { return; } // rest of your code here.. } add_action( 'wp_enqueue_scripts', 'wpdocs_enqueue_scripts' );