WordPress at a glance

wp_enqueue_style() WP 2.6.0

Adds a CSS stylesheet file to the page. Also registers the stylesheet file if it wasn't registered.

If the stylesheet file was previously registered with wp_register_style() then you can enqueue it just by using the style identifier - first $handle parameter.

If the stylesheet isn't registered then this function will register and enqueue it.

The enqueued stylesheet will be printed within the <head> tag.

Since version 3.3 can be called in the middle of the document — in this case the stylesheet file will be printed in the footer, before the closing </body> tag (where wp_footer() is called).

This function like wp_enqueue_script() need to be hooked on one of following actions:

Use wp_style_add_data() to add conditions for stylesheets loading.

To add custom CSS styles to the page use wp_add_inline_style()

If your theme doesn't have wp_head() or wp_footer() then this function may not work at all. It's because the styles are loaded on actions (hooks) created by these functions.

Is the basis for: wp_enqueue_code_editor()

No Hooks.

Return

Null. Nothing.

Usage

wp_enqueue_style( $handle, $src, $deps, $ver, $media );
$handle(string) (required)
Name of the stylesheet (identifier). A lowercase string. If the string contains a question mark (?): styleaculous?v=1.2, then the preceding part will be the name of the style, and all that text after the question mark will be added to the URL as request parameters. So you can, for example, specify the version of the style.
$src(string)
URL of the stylesheet. For example, http://example.com/css/style.css. There's no need to specify a hardcoded path, use the following functions: plugins_url() (for plugins) and get_template_directory_uri() (for themes). External domains can be specified with implicit protocol //example.com/css/style.css
Default: ''
$deps(array)
An array of identifiers of registered stylesheets this stylesheet depends on. These stylesheets will be loaded before the current one.
Default: empty array
$ver(string/true/false/null)
String specifying stylesheet version number. The version will be added to the end of the stylesheet's URL: ?ver=3.5.1. 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: false
$media(string)
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: 'all'

Examples

#1 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

#2 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
}

Notes

The function uses global variable $wp_styles that is an instance of WP_Styles class. Uses methods WP_Styles::add(), WP_Styles::enqueue().

Notes

  • See: WP_Dependencies::add()
  • See: WP_Dependencies::enqueue()

Changelog

Since 2.6.0 Introduced.

Code of wp enqueue style: wp-includes/functions.wp-styles.php WP 5.2.4

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

Related Functions

From tag: styles (include files)

More from category: Scripts and Styles

More from Template Tags: Main Functions

vladlu 100vlad.lu
Editors: kama 100
No comments
    Hello, !     Log In . Register