Question

wp_enqueue_style( string $handle,  string $src = '',  array $deps = array(),  string|bool|null $ver = false,  string $media = 'all' )

Enqueue a CSS stylesheet.

---

description

Registers the style if 源代码 provided (does NOT overwrite) and enqueues.

---

参数

$handle

(string) (Required) Name of the stylesheet. Should be unique.

$src

(string) (Optional) Full URL of the stylesheet, or path of the stylesheet relative to the WordPress root directory.

Default value: ''

$deps

(array) (Optional) An array of registered stylesheet handles this stylesheet depends on.

Default value: array()

$ver

(string|bool|null) (Optional) String specifying stylesheet version number, if it has one, which is added to the URL as a query string for cache busting purposes. If version is set to false, a version number is automatically added equal to current installed WordPress version. If set to null, no version is added.

Default value: false

$media

(string) (Optional) The media for which this stylesheet has been defined. Accepts media types like 'all', 'print' and 'screen', or media queries like '(orientation: portrait)' and '(max-width: 640px)'.

Default value: 'all'

---

源代码

File: wp-includes/functions.wp-styles.php

function wp_enqueue_style( $handle, $src = '', $deps = array(), $ver = false, $media = 'all' ) {
	_wp_scripts_maybe_doing_it_wrong( __FUNCTION__ );

	$wp_styles = wp_styles();

	if ( $src ) {
		$_handle = explode('?', $handle);
		$wp_styles->add( $_handle[0], $src, $deps, $ver, $media );
	}
	$wp_styles->enqueue( $handle );
}

---

更新日志

Version	description
2.6.0	Introduced.

---

More Information

Usage

A safe way to add/enqueue a stylesheet file to the WordPress generated page.

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

Notes

• If you are going to use some jQuery UI features you might have to provide your own CSS file: WordPress core does not have a full jQuery UI theme!
• Default styles that are loaded via WordPress Core can be discerned via the 源代码 code on the default styles page.

---

相关函数

Uses

• wp-includes/functions.wp-styles.php: wp_styles()

---

Used By

• wp-includes/class-wp-editor.php: _WP_Editors::enqueue_default_editor()
• wp-includes/widgets/class-wp-widget-media-audio.php: WP_Widget_Media_Audio::enqueue_admin_scripts()
• wp-includes/widgets/class-wp-widget-media-video.php: WP_Widget_Media_Video::enqueue_preview_scripts()
• wp-includes/widgets/class-wp-widget-media-audio.php: WP_Widget_Media_Audio::enqueue_preview_scripts()
• wp-includes/embed.php: enqueue_embed_scripts()
• wp-includes/class-wp-customize-nav-menus.php: WP_Customize_Nav_Menus::enqueue_scripts()
• wp-admin/includes/class-wp-press-this.php: WP_Press_This::html()
• wp-login.php: login_header()
• wp-admin/includes/class-wp-internal-pointers.php: WP_Internal_Pointers::enqueue_scripts()
• wp-admin/includes/template.php: iframe_header()
• wp-admin/includes/media.php: wp_iframe()
• wp-admin/custom-header.php: Custom_Image_Header::css_includes()
• wp-admin/custom-background.php: Custom_Background::admin_load()
• wp-includes/class-wp-customize-manager.php: WP_Customize_Manager::customize_preview_init()
• wp-includes/general-template.php: wp_admin_css()
• wp-includes/general-template.php: add_thickbox()
• wp-includes/functions.php: wp_auth_check_load()
• wp-includes/class-wp-admin-bar.php: WP_Admin_Bar::initialize()
• wp-includes/media.php: wp_enqueue_media()
• wp-includes/media.php: wp_video_shortcode()
• wp-includes/media.php: wp_playlist_scripts()
• wp-includes/media.php: wp_audio_shortcode()
• wp-includes/customize/class-wp-customize-color-control.php: WP_Customize_Color_Control::enqueue()
• wp-includes/class-wp-customize-widgets.php: WP_Customize_Widgets::enqueue_scripts()
• wp-includes/class-wp-editor.php: _WP_Editors::enqueue_scripts()
Show 20 more used by Hide more used by

---

User Contributed Notes

1. Skip to note content You must log in to vote on the helpfulness of this noteVote results for this note: 5You must log in to vote on the helpfulness of this note Contributed by Codex

   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() {
   	 // ...
   }
   

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

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>

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

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

For proper versioning based on the file’s last modified time, you can use something similar to:

wp_enqueue_style('main-styles', get_template_directory_uri() . '/css/style.css', array(), filemtime(get_template_directory() . '/css/style.css'), false);

When the style.css file is updated on the server, WP will append the appropriate timestamp.

Note: You shouldn’t ever use time() as the 4th parameter or append it to the file, as this will break caching in almost all cases.

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.css', array(), '', true );
if ( is_page_template( 'template-name.php' ) ) {
	wp_enqueue_style( $handle );
}

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

Override all stylesheets in queue

/* adds stylesheet file to the end of the queue */
function wpdocs_override_stylesheets()
{
    $dir = plugin_dir_path(__FILE__);
    wp_enqueue_style('theme-override', $dir . '/theme-overrides.css', array(), '0.1.0', 'all');
}
add_action('wp_enqueue_scripts', 'wpdocs_override_stylesheets', PHP_INT_MAX);

See Also:

wp_enqueue_script