wp_enqueue_style()
Correctly adds a CSS style file. Registers the style file if it has not been registered yet.
If the style file has been previously registered via wp_register_style(), it can be enqueued by specifying the name (identifier) in the first parameter $handle.
If the file has not been previously registered, this function will register the file and enqueue it.
The enqueued style file is output in the <head> part of the document.
Since version 3.3, it can be called in the middle of the document. In this case, the file will be output in the footer, before the </body> tag (where wp_footer() is called).
This function, like wp_enqueue_script(), is typically called during actions:
- wp_enqueue_scripts — for the front end of the site.
- admin_enqueue_scripts — for the admin panel.
- login_enqueue_scripts — for the login page (wp-login.php).
- Use wp_style_add_data() to add conditions for loading styles.
- Use wp_add_inline_style() to insert the CSS styles themselves into the document, rather than the style file.
A mistake made by beginner developers. The function will not output anything if wp_head() or wp_footer() is not used in the theme. It is at the moment of calling these functions that the hook is triggered, which adds the styles.
- Uses the global variable $wp_styles, which contains an instance of the class WP_Styles - WP_Dependencies.
- Uses methods: WP_Dependencies::add(), WP_Dependencies::enqueue().
No Hooks.
Returns
null. Returns nothing.
Usage
wp_enqueue_style( $handle, $src, $deps, $ver, $media );
- $handle(string) (required)
- The name of the style file (identifier). A lowercase string. If the string contains a question mark (?): styleaculous?v=1.2, then the preceding part will be the style name, and everything after will be added to the URL as query parameters. This allows you to specify the version of the enqueued style.
- $src(string)
- URL to the style file. For example, http://example.com/css/style.css. You should not hardcode the path; use functions: plugins_url() (for plugins) and get_template_directory_uri() (for themes). External domains can be specified with an implicit protocol //example.com/css/style.css.
Default: '' - $deps(array)
- An array of identifiers of other styles that the enqueued style file depends on. The styles specified here will be loaded before the current one.
Default: array() - $ver(string/bool)
- A string that defines the version of the styles. The version will be added to the end of the file link:
?ver=3.5.1. If not specified (set to false), the WordPress version will be used. If set to null, no version will be set.
Default: false - $media(string/bool)
- Sets the value of the media attribute. Media specifies the type of device for which the current style will work. It can be:
all,screen,handheld,printorall (max-width:480px). For a complete list, see here.
Default: 'all'
Examples
#1 Loading styles for plugin submenu page
add_action( 'admin_menu', 'my_plugin_admin_menu' );
function my_plugin_admin_menu() {
// Register plugin page
$page = add_submenu_page(
'edit.php',
__( 'My Plugin', 'myPlugin' ),
__( 'My Plugin', 'myPlugin' ),
'administrator',
__FILE__,
'my_plugin_manage_menu'
);
// Connect to a needed hook using the plugin page identifier
add_action('load-'. $page, 'my_plugin_admin_styles');
}
// This function will be called only on the page of the plugin
function my_plugin_admin_styles() {
wp_enqueue_style( 'myPluginStylesheet', plugins_url('stylesheet.css', __FILE__) );
}
// The page
function my_plugin_manage_menu() {
// page code
}
#2 Basic Usage
In this example, we will register and enqueue styles and scripts using the 'wp_enqueue_scripts'action.
// The right way for adding styles and scripts to the page
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
// add_action('wp_print_styles', 'theme_name_scripts'); // use can use this hook too
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 );
}
Paste this code into the theme file function.php or into the plugin, before the function wp_head() is called in header.php
Notes
Changelog
| Since 2.6.0 | Introduced. |
wp_enqueue_style() wp enqueue style code WP 7.0
function wp_enqueue_style( $handle, $src = '', $deps = array(), $ver = false, $media = 'all' ) {
_wp_scripts_maybe_doing_it_wrong( __FUNCTION__, $handle );
$wp_styles = wp_styles();
if ( $src ) {
$_handle = explode( '?', $handle );
$wp_styles->add( $_handle[0], $src, $deps, $ver, $media );
}
$wp_styles->enqueue( $handle );
} 