do_action( ‘wp_enqueue_scripts’ )

User Contributed Notes

1. Skip to note 6 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 7 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 8 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 9 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 10 content

   abdessamad idrissi 10 years ago

   You must log in to vote on the helpfulness of this noteVote results for this note: -18You 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 4 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