Function Reference/wp enqueue style

This page redirects to an external site: https://developer.wordpress.org/reference/functions/wp_enqueue_style/

Languages: English • 日本語 Русский • (Add your language)

1 Description
2 Usage
3 Parameters
4 Return Values
5 Examples
- 5.1 Using a Hook
- 5.2 Load stylesheet only on a plugin's options page
6 Notes
7 Change Log
8 Source File
9 Resources
10 Related

Description

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

Usage

<?php wp_enqueue_style( $handle, $src, $deps, $ver, $media ); ?>

Parameters

$handle

(string) (required) Name used as a handle for the stylesheet. As a special case, if the string contains a '?' character, the preceding part of the string refers to the registered handle, and the succeeding part is appended to the URL as a query string.

Default: None

$src

(string|boolean) (optional) URL to the stylesheet. Example: 'http://example.com/css/mystyle.css'. This parameter is only required when WordPress does not already know about this style. You should never hardcode URLs to local styles, use plugins_url (for Plugins) and get_template_directory_uri (for Themes) to get a proper URL. Remote assets can be specified with a protocol-agnostic URL, i.e. '//otherdomain.com/css/theirstyle.css'.

Default: false

$deps

(array) (optional) Array of handles of any stylesheet that this stylesheet depends on; stylesheets that must be loaded before this stylesheet. false if there are no dependencies.

Default: array()

$ver

(string|boolean) (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: false

$media

(string|boolean) (optional) String specifying the media for which this stylesheet has been defined. Examples: 'all', 'screen', 'handheld', 'print'. See this list for the full range of valid CSS-media-types.

Default: 'all'

Return Values

(void): This function does not return a value.

Examples

Using a Hook

Scripts and styles from a single action hook

/**
 * Proper way to enqueue scripts and styles
 */
function 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', 'theme_name_scripts' );

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', 'my_plugin_admin_init' );
   add_action( 'admin_menu', 'my_plugin_admin_menu' );
   
   function my_plugin_admin_init() {
       /* Register our stylesheet. */
       wp_register_style( 'myPluginStylesheet', plugins_url('stylesheet.css', __FILE__) );
   }
   
   function my_plugin_admin_menu() {
       /* Register our plugin page */
       $page = add_submenu_page( 'edit.php', 
                                 __( 'My Plugin', 'myPlugin' ), 
                                 __( 'My Plugin', 'myPlugin' ),
                                 'administrator',
                                 __FILE__, 
                                 'my_plugin_manage_menu' );
  
       /* Using registered $page handle to hook stylesheet loading */
       add_action( 'admin_print_styles-' . $page, 'my_plugin_admin_styles' );
   }
   
   function my_plugin_admin_styles() {
       /*
        * It will be called only on your plugin admin page, enqueue our stylesheet here
        */
       wp_enqueue_style( 'myPluginStylesheet' );
   }
   
   function my_plugin_manage_menu() {
       /* Output our admin page */
   }

Notes

Uses global: (WP_Styles) $wp_styles - See WP_Styles::add(), WP_Styles::enqueue().
Tip: print_r( $wp_styles );
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!

Change Log

3.3: wp_enqueue_style() can now be called mid-page (in the HTML body). This will load styles in the footer.
Since: 2.1 (BackPress version: r79)

Source File

wp_enqueue_style() is located in wp-includes/functions.wp-styles.php.

Resources

Enqueue Styles

Enqueue Scripts

Front-End Hooks

Admin Hooks

Login Hooks

login_enqueue_scripts

See also index of Function Reference and index of Template Tags.

Codex