do_action( ‘wp_enqueue_scripts’ )

User Contributed Notes

1. Skip to note 7 content

   Drew Jaynes 9 years ago

   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

   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' );
2. Skip to note 8 content

   jon 9 years ago

   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

   Instead of this Action, use ‘admin_enqueue_scripts’ for Admin pages and ‘login_enqueue_scripts’ for the login page.
3. Skip to note 9 content

   thejaydip 4 years ago

   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

   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 10 content

   Chigozie Orunta 3 years ago

   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

   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 11 content

   tripflex 10 months ago

   You must log in to vote on the helpfulness of this noteVote results for this note: 0You must log in to vote on the helpfulness of this note

   do_blocks() is called before wp_enqueue_scripts so if you are correctly registering scripts and only enqueuing on pages it’s needed on (which most developers do not seem to do), keep in mind that if you use something like wp_localize_script, it will not work if you’re registering your script in wp_enqueue_scripts hook and enqueueing it from some kind of trigger generated by content, shortcode, template files, or something else that could be loaded by do_blocks.

   This will result in javascript errors saying XYZ variable is not defined

   I had a lot of plugin clients report issues because of this, as my call to wp_enqueue_script is normally triggered by a template file or something that now gets loaded in do_blocks() (like a shortcode), which is BEFORE wp_enqueue_scripts action is triggered, meaning the script is not registered yet.

   The solution for me in this situation was to create a conditional check before calling wp_localize_script and then wp_enqueue_script, to see if the script has been registered already, and if not, make sure to call wp_register_script first.
6. Skip to note 12 content

   abdessamad idrissi 11 years ago

   You must log in to vote on the helpfulness of this noteVote results for this note: -19You must log in to vote on the helpfulness of this note

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

   • This is not true for the wp_enqueue_scripts action, however, it does apply for the admin_enqueue_scripts action.

     thelevicole 5 years ago
   • That is not true. You are thinking of the admin part. Check https://developer.wordpress.org/reference/functions/wp_enqueue_scripts/, and https://developer.wordpress.org/reference/hooks/admin_enqueue_scripts/ As you can see only the admin_ part has the $hook_suffix.

     Anonymous User 4 years ago