wp_enqueue_scripts
Allows you to enqueue scripts and styles for loading on the front end.
Stylesheets and script files are normally loaded through this hook. See:
This event fires during the wp_head hook at priority 1:
add_action( 'wp_head', 'wp_enqueue_scripts', 1 );
See this link for the list of WordPress bundled scripts.
Usage
add_action( 'wp_enqueue_scripts', 'wp_kama_enqueue_scripts_action' );
/**
* Function for `wp_enqueue_scripts` action-hook.
*
* @return void
*/
function wp_kama_enqueue_scripts_action(){
// action...
}
Examples
#1 Enqueue theme styles and scripts
For a theme/plugin, styles and scripts should be enqueued through the wp_enqueue_scripts hook:
// The correct way to enqueue theme styles and scripts
add_action( 'wp_enqueue_scripts', 'theme_add_scripts' );
function theme_add_scripts() {
// Enqueue the theme stylesheet
wp_enqueue_style( 'style-name', get_stylesheet_uri() );
// Enqueue the theme JS file
wp_enqueue_script( 'script-name', get_template_directory_uri() .'/js/example.js', array(), '1.0', true );
}Changelog
| Since 2.8.0 | Introduced. |
Where the hook is called
wp_enqueue_scripts
wp-includes/script-loader.php 2340
do_action( 'wp_enqueue_scripts' );
Where the hook is used in WordPress
wp-includes/block-supports/block-style-variations.php 270
add_action( 'wp_enqueue_scripts', 'wp_enqueue_block_style_variation_styles', 1 );
wp-includes/block-supports/custom-css.php 155
add_action( 'wp_enqueue_scripts', 'wp_enqueue_block_custom_css', 1 );
wp-includes/block-supports/duotone.php 50
add_action( 'wp_enqueue_scripts', array( 'WP_Duotone', 'output_block_styles' ), 9 );
wp-includes/block-supports/duotone.php 51
add_action( 'wp_enqueue_scripts', array( 'WP_Duotone', 'output_global_styles' ), 11 );
wp-includes/class-wp-customize-nav-menus.php 1351
add_action( 'wp_enqueue_scripts', array( $this, 'customize_preview_enqueue_deps' ) );
wp-includes/class-wp-customize-widgets.php 1213
add_action( 'wp_enqueue_scripts', array( $this, 'customize_preview_enqueue' ) );
wp-includes/customize/class-wp-customize-selective-refresh.php 144
add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_preview_scripts' ) );
wp-includes/default-filters.php 378
add_action( 'wp_enqueue_scripts', 'wp_enqueue_emoji_styles' );
wp-includes/default-filters.php 614
add_action( 'wp_enqueue_scripts', 'wp_localize_jquery_ui_datepicker', 1000 );
wp-includes/default-filters.php 615
add_action( 'wp_enqueue_scripts', 'wp_common_block_scripts_and_styles' );
wp-includes/default-filters.php 616
add_action( 'wp_enqueue_scripts', 'wp_enqueue_classic_theme_styles' );
wp-includes/default-filters.php 651
add_action( 'wp_enqueue_scripts', 'wp_enqueue_global_styles' );
wp-includes/default-filters.php 655
add_action( 'wp_enqueue_scripts', 'wp_enqueue_stored_styles' );
wp-includes/default-filters.php 717
add_action( 'wp_enqueue_scripts', 'wp_enqueue_admin_bar_bump_styles' );
wp-includes/default-filters.php 718
add_action( 'wp_enqueue_scripts', 'wp_enqueue_admin_bar_header_styles' );
wp-includes/default-filters.php 779
add_action( 'wp_enqueue_scripts', 'wp_enqueue_block_template_skip_link' );
wp-includes/deprecated.php 5886
add_action( 'wp_enqueue_scripts', $fn_generate_and_enqueue_styles );
wp-includes/widgets/class-wp-widget-media.php 117
add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_preview_scripts' ) );
wp-includes/widgets/class-wp-widget-text.php 60
add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_preview_scripts' ) );