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

Enqueue a CSS stylesheet.

Registers the style if source provided (does NOT overwrite) and enqueues.

Source file: wp-includes/functions.wp-styles.php

View source


Parameters

$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: false

$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'


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!

Used by

Uses


Source

function wp_enqueue_style( $handle, $src = false, $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 );
}


Changelog


User Contributed Notes

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

You must log in before being able to contribute a note.