1. Skip to note content

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

   Contributed by Codex — 1 year ago

   Using a Hook

   Scripts and styles from a single action hook

   /**
    * 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 content

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

   Contributed by Codex — 1 year ago

   Load stylesheet only on a plugin’s options page:

   /**
    * This example will work at least on WordPress 2.6.3, 
    * but maybe on older versions too.
    */
   add_action( 'admin_init', 'wpdocs_plugin_admin_init' );
   add_action( 'admin_menu', 'wpdocs_plugin_admin_menu' );
      
   /**
    * Register our stylesheet.
    */
   function wpdocs_plugin_admin_init() {
   	wp_register_style( 'wpdocsPluginStylesheet', plugins_url( 'stylesheet.css', __FILE__ ) );
   }
   
   /**
    * Register our plugin page and hook stylesheet loading.
    */
   function wpdocs_plugin_admin_menu() {
   	$page = add_submenu_page( 'edit.php', 
   		__( 'Wpdocs Plugin', 'textdomain' ), 
   		__( 'Wpdocs Plugin', 'textdomain' ),
   		'administrator',
   		__FILE__, 
   		'wpdocs_plugin_manage_menu' );
     
   	add_action( "admin_print_styles-{$page}", 'wpdocs_plugin_admin_styles' );
   }
   
   /**
    * Enqueue our stylesheet.
    */
   function wpdocs_plugin_admin_styles() {
   	wp_enqueue_style( 'wpdocsPluginStylesheet' );
   }
   
   /**
    * Output our admin page.
    */
   function wpdocs_plugin_manage_menu() {
   	 // ...
   }
   

   Expand full source codeCollapse full source code

3. Skip to note content

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

   Contributed by alucard001 — 7 months ago

   How to remove ver in URL?

   If you want to remove the ver parameter in URL (for example, to intentionally cache the file), you pass in null instead of false to remove that. For example:

   wp_enqueue_script('oxfam_js_cookie', 'https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.0/js.cookie.min.js', array(), null, true);

   By doing that, you will get:

   <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.0/js.cookie.min.js'></script>

4. Skip to note 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 spectrus — 6 months ago

   Load an IE-specific stylesheet:

   add_action( 'wp_enqueue_scripts', 'enqueue_my_styles' );
   function enqueue_my_styles() {
       
       global $wp_styles;
       
       // Load the main stylesheet
       wp_enqueue_style( 'my-theme', get_stylesheet_uri() );
       
       /**
        * Load our IE-only stylesheet for all versions of IE:
        * <!--[if IE]> ... <![endif]-->
        * 
        * NOTE: It is also possible to just check and see if the $is_IE global in WordPress is set to true before 
        * calling the wp_enqueue_style() function.  If you are trying to load a stylesheet for all browsers 
        * EXCEPT for IE, then you would HAVE to check the $is_IE global since WordPress doesn't have a way to 
        * properly handle non-IE conditional comments.
        */
       wp_enqueue_style( 'my-theme-ie', get_stylesheet_directory_uri() . "/css/ie.css", array( 'my-theme' )  );
       $wp_styles->add_data( 'my-theme-ie', 'conditional', 'IE' );
   }

   Expand full source codeCollapse full source code

   Found here (more code samples for version-specific IE stylesheets): https://gist.github.com/wpscholar/4947518#file-functions-php

5. Skip to note content

   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

   Contributed by Al — 7 months ago

   This is a conditional loading of css file by page template (css will be loaded on on the pages with tamplate-name.php).
   You can change the condition by another one.
   The code should be used in your theme’s function.php.
   Notice: The code works for child themes. If you want to use it in a parent theme replace get_stylesheet_directory_uri() with get_stylesheet_uri().

   $handle = 'wpdocs';
   wp_register_style( $handle, get_stylesheet_directory_uri().'/relative/path/to/stylesheet.js', array(), '', true );
   if ( is_page_template( 'template-name.php' ) ) {
   	wp_enqueue_style( $handle );
   }

6. Skip to note 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 Juhi Saxena — 6 months ago

   Enqueues should not be protocol specific, remove https. I have update code as below

   wp_enqueue_script('oxfam_js_cookie', '//cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.0/js.cookie.min.js', array(), null, true);
   

Have a note or feedback to contribute?