wp_enqueue_style ( string $handle, string|bool $src = false, array $deps = array(), string|bool $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.

$src

(string|bool) (Optional) Path to the stylesheet from the root directory of WordPress. Example: '/css/mystyle.css'.

Default value: false

$deps

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

Default value: array()

$ver

(string|bool) (Optional) String specifying the stylesheet version number, if it has one. This parameter is used to ensure that the correct version is sent to the client regardless of caching, and so should be included if a version number is available and makes sense for the stylesheet.

Default value: false

$media

(string) (Optional) The media for which this stylesheet has been defined. Accepts 'all', 'aural', 'braille', 'handheld', 'projection', 'print', 'screen', 'tty', or 'tv'.

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

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