do_action( 'wp_enqueue_scripts' )

Fires when scripts and styles are enqueued.

Contents

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.

Top ↑

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' );

Top ↑

Source

File: wp-includes/script-loader.php. View all references 

do_action( 'wp_enqueue_scripts' );

View on Trac View on GitHub

Top ↑

Top ↑

Changelog

Changelog
Version Description
2.8.0 Introduced.

Top ↑

User Contributed Notes

  1. Skip to note 1 content
    You must log in to vote on the helpfulness of this noteVote results for this note: 8You must log in to vote on the helpfulness of this note
    Contributed by Drew Jaynes —

    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' );
  3. Skip to note 3 content
    You must log in to vote on the helpfulness of this noteVote results for this note: 1You must log in to vote on the helpfulness of this note
    Contributed by thejaydip —

    If you want to add dynamic inline styles.

    function wpdocs_enqueue_custom_style() {
	$theme = wp_get_theme();

	wp_register_style(
		'wpdocs-style',
		get_theme_file_uri( 'css/style.css' ),
		array(),
		$theme->get( 'Version' ),
	);

	wp_enqueue_style( 'wpdocs-style' );


	$custom_css = ".navbar-nav ul li { list-style: none; }";
	wp_add_inline_style( 'wpdocs-style', $custom_css );

}

add_action( 'wp_enqueue_scripts', 'wpdocs_enqueue_custom_style' );
  4. Skip to note 4 content
    You must log in to vote on the helpfulness of this noteVote results for this note: 1You must log in to vote on the helpfulness of this note
    Contributed by Chigozie Orunta —

    Selectively load JS files into specific pages like so:

    function wpdocs_selective_js_loading() {
	if ( is_page( ['home', 'about', 'contact'] ) ) {
		wp_enqueue_script( 'your-script', get_template_directory_uri() . '/js/your-script.js', array(), '1.0.0', true );
	}
}
add_action( 'wp_enqueue_scripts', 'wpdocs_selective_js_loading' );
  5. Skip to note 5 content
    You must log in to vote on the helpfulness of this noteVote results for this note: -16You must log in to vote on the helpfulness of this note
    Contributed by abdessamad idrissi —

    This actions passes an argument $hook that 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' );

You must log in before being able to contribute a note or feedback.