Core class used to register styles.
WP_Styles
is a class that helps developers interact with a theme. It ensures registered stylesheets are output in the proper order, with dependent stylesheets coming after their dependencies. While more than one instance can be created, typically the global $wp_styles is used to enqueue stylesheets, which are then output by wp_print_styles
during the wp_head action. WP_Styles
extends WP_Dependencies
.
WP_Styles
handles both external and embedded stylesheets (though the latter must be associated with one of the former), outputting a <link> or <style> element as appropriate.
For any stylesheet, an additional stylesheet can be loaded for right-to-left text (triggered by setting $wp_styles->text_direction to ‘rtl’). The URL for this stylesheet is built by inserting ‘-rtl’ into the URL of the left-to-right stylesheet. Normally, ‘-rtl’ is inserted before the ‘.css’ extension. If ‘suffix’ is set in the stylesheet’s extra data (using WP_Dependencies::add_data()
or _WP_Dependency::add_data()
), ‘-rtl’ will be inserted before the suffix and ‘.css’ extension ("${suffix}.css"
).
When it comes time to output enqueued stylesheets, WP_Styles
can print them, or accumulate them in instance variables ($print_html for external and $print_code for embedded). This behaviour is controlled by the boolean instance variable $do_concat . If true, output is concatenated to the appropriate instance variable; if false, it’s printed.
Any unconditional , non-alternate stylesheet in a default directory (as determined by WP_Styles::in_default_dir()
) isn’t accumulated when $do_concat is true.
The media for a stylesheet is passed via the $args argument to WP_Dependencies ::add()
.
Note: Refer source code for the complete list of properties and hooks.
$base_url
The base URL for the site, it gets prepended to the URL for an enqueued sheet in most cases (see $content_url for an exception). Set to the site URL (as determined by site_url()
or wp_guess_url()
) by default.
$content_url
The URL for the wp-content directory. Set to WP_CONTENT_URL
by default. If a stylesheet URL begins with the content URL, the base URL isn’t prepended.
$default_version
Default value used when a version isn’t specified in a call to wp_enqueue_style() or wp_register_style() .
$text_direction = ‘ltr’
If ‘rtl’, an addtional stylesheet will be loaded, allowing custom styling targeting right-to-left.
$do_concat = false
If true, concatenate output to $print_html and $print_code member variables rather than printing it.
$print_html = “”
holds accumulated HTML (<link> elements and conditional comments).
$print_code = “”
holds accumulated embedded style rules.
$concat = “”
list of item handles that were accumulated, separated by commas.
$concat_version = “”
list of item handles & versions that were accumulated.
$default_dirs
Path or array of paths. Used by WP_Styles::in_default_dir()
. Compared directly to $src property of a stylesheet.
Note: Refer source code for the complete list of hooks.
wp_default_styles – Invoked when a WP_Styles is created. The instance is passed to action hooks.
print_styles_array – Filters list of stylesheets to be output. Called from WP_Styles::all_deps()
.
style_loader_src – Filter a stylesheet URL in preparation for output. Happens after $base_url has been prepended (if warranted).
style_loader_tag – Filter the <link> element for a stylesheet.
class WP_Styles extends WP_Dependencies {
/**
* Base URL for styles.
*
* Full URL with trailing slash.
*
* @since 2.6.0
* @var string
*/
public $base_url;
/**
* URL of the content directory.
*
* @since 2.8.0
* @var string
*/
public $content_url;
/**
* Default version string for stylesheets.
*
* @since 2.6.0
* @var string
*/
public $default_version;
/**
* The current text direction.
*
* @since 2.6.0
* @var string
*/
public $text_direction = 'ltr';
/**
* Holds a list of style handles which will be concatenated.
*
* @since 2.8.0
* @var string
*/
public $concat = '';
/**
* Holds a string which contains style handles and their version.
*
* @since 2.8.0
* @deprecated 3.4.0
* @var string
*/
public $concat_version = '';
/**
* Whether to perform concatenation.
*
* @since 2.8.0
* @var bool
*/
public $do_concat = false;
/**
* Holds HTML markup of styles and additional data if concatenation
* is enabled.
*
* @since 2.8.0
* @var string
*/
public $print_html = '';
/**
* Holds inline styles if concatenation is enabled.
*
* @since 3.3.0
* @var string
*/
public $print_code = '';
/**
* List of default directories.
*
* @since 2.8.0
* @var array
*/
public $default_dirs;
/**
* Holds a string which contains the type attribute for style tag.
*
* If the active theme does not declare HTML5 support for 'style',
* then it initializes as `type='text/css'`.
*
* @since 5.3.0
* @var string
*/
private $type_attr = '';
/**
* Constructor.
*
* @since 2.6.0
*/
public function __construct() {
if (
function_exists( 'is_admin' ) && ! is_admin()
&&
function_exists( 'current_theme_supports' ) && ! current_theme_supports( 'html5', 'style' )
) {
$this->type_attr = " type='text/css'";
}
/**
* Fires when the WP_Styles instance is initialized.
*
* @since 2.6.0
*
* @param WP_Styles $wp_styles WP_Styles instance (passed by reference).
*/
do_action_ref_array( 'wp_default_styles', array( &$this ) );
}
/**
* Processes a style dependency.
*
* @since 2.6.0
* @since 5.5.0 Added the `$group` parameter.
*
* @see WP_Dependencies::do_item()
*
* @param string $handle The style's registered handle.
* @param int|false $group Optional. Group level: level (int), no groups (false).
* Default false.
* @return bool True on success, false on failure.
*/
public function do_item( $handle, $group = false ) {
if ( ! parent::do_item( $handle ) ) {
return false;
}
$obj = $this->registered[ $handle ];
if ( null === $obj->ver ) {
$ver = '';
} else {
$ver = $obj->ver ? $obj->ver : $this->default_version;
}
if ( isset( $this->args[ $handle ] ) ) {
$ver = $ver ? $ver . '&' . $this->args[ $handle ] : $this->args[ $handle ];
}
$src = $obj->src;
$cond_before = '';
$cond_after = '';
$conditional = isset( $obj->extra['conditional'] ) ? $obj->extra['conditional'] : '';
if ( $conditional ) {
$cond_before = "<!--[if {$conditional}]>\n";
$cond_after = "<![endif]-->\n";
}
$inline_style = $this->print_inline_style( $handle, false );
if ( $inline_style ) {
$inline_style_tag = sprintf(
"<style id='%s-inline-css'%s>\n%s\n</style>\n",
esc_attr( $handle ),
$this->type_attr,
$inline_style
);
} else {
$inline_style_tag = '';
}
if ( $this->do_concat ) {
if ( $this->in_default_dir( $src ) && ! $conditional && ! isset( $obj->extra['alt'] ) ) {
$this->concat .= "$handle,";
$this->concat_version .= "$handle$ver";
$this->print_code .= $inline_style;
return true;
}
}
if ( isset( $obj->args ) ) {
$media = esc_attr( $obj->args );
} else {
$media = 'all';
}
// A single item may alias a set of items, by having dependencies, but no source.
if ( ! $src ) {
if ( $inline_style_tag ) {
if ( $this->do_concat ) {
$this->print_html .= $inline_style_tag;
} else {
echo $inline_style_tag;
}
}
return true;
}
$href = $this->_css_href( $src, $ver, $handle );
if ( ! $href ) {
return true;
}
$rel = isset( $obj->extra['alt'] ) && $obj->extra['alt'] ? 'alternate stylesheet' : 'stylesheet';
$title = isset( $obj->extra['title'] ) ? sprintf( " title='%s'", esc_attr( $obj->extra['title'] ) ) : '';
$tag = sprintf(
"<link rel='%s' id='%s-css'%s href='%s'%s media='%s' />\n",
$rel,
$handle,
$title,
$href,
$this->type_attr,
$media
);
/**
* Filters the HTML link tag of an enqueued style.
*
* @since 2.6.0
* @since 4.3.0 Introduced the `$href` parameter.
* @since 4.5.0 Introduced the `$media` parameter.
*
* @param string $tag The link tag for the enqueued style.
* @param string $handle The style's registered handle.
* @param string $href The stylesheet's source URL.
* @param string $media The stylesheet's media attribute.
*/
$tag = apply_filters( 'style_loader_tag', $tag, $handle, $href, $media );
if ( 'rtl' === $this->text_direction && isset( $obj->extra['rtl'] ) && $obj->extra['rtl'] ) {
if ( is_bool( $obj->extra['rtl'] ) || 'replace' === $obj->extra['rtl'] ) {
$suffix = isset( $obj->extra['suffix'] ) ? $obj->extra['suffix'] : '';
$rtl_href = str_replace( "{$suffix}.css", "-rtl{$suffix}.css", $this->_css_href( $src, $ver, "$handle-rtl" ) );
} else {
$rtl_href = $this->_css_href( $obj->extra['rtl'], $ver, "$handle-rtl" );
}
$rtl_tag = sprintf(
"<link rel='%s' id='%s-rtl-css'%s href='%s'%s media='%s' />\n",
$rel,
$handle,
$title,
$rtl_href,
$this->type_attr,
$media
);
/** This filter is documented in wp-includes/class-wp-styles.php */
$rtl_tag = apply_filters( 'style_loader_tag', $rtl_tag, $handle, $rtl_href, $media );
if ( 'replace' === $obj->extra['rtl'] ) {
$tag = $rtl_tag;
} else {
$tag .= $rtl_tag;
}
}
if ( $this->do_concat ) {
$this->print_html .= $cond_before;
$this->print_html .= $tag;
if ( $inline_style_tag ) {
$this->print_html .= $inline_style_tag;
}
$this->print_html .= $cond_after;
} else {
echo $cond_before;
echo $tag;
$this->print_inline_style( $handle );
echo $cond_after;
}
return true;
}
/**
* Adds extra CSS styles to a registered stylesheet.
*
* @since 3.3.0
*
* @param string $handle The style's registered handle.
* @param string $code String containing the CSS styles to be added.
* @return bool True on success, false on failure.
*/
public function add_inline_style( $handle, $code ) {
if ( ! $code ) {
return false;
}
$after = $this->get_data( $handle, 'after' );
if ( ! $after ) {
$after = array();
}
$after[] = $code;
return $this->add_data( $handle, 'after', $after );
}
/**
* Prints extra CSS styles of a registered stylesheet.
*
* @since 3.3.0
*
* @param string $handle The style's registered handle.
* @param bool $display Optional. Whether to print the inline style
* instead of just returning it. Default true.
* @return string|bool False if no data exists, inline styles if `$display` is true,
* true otherwise.
*/
public function print_inline_style( $handle, $display = true ) {
$output = $this->get_data( $handle, 'after' );
if ( empty( $output ) ) {
return false;
}
$output = implode( "\n", $output );
if ( ! $display ) {
return $output;
}
printf(
"<style id='%s-inline-css'%s>\n%s\n</style>\n",
esc_attr( $handle ),
$this->type_attr,
$output
);
return true;
}
/**
* Determines style dependencies.
*
* @since 2.6.0
*
* @see WP_Dependencies::all_deps()
*
* @param string|string[] $handles Item handle (string) or item handles (array of strings).
* @param bool $recursion Optional. Internal flag that function is calling itself.
* Default false.
* @param int|false $group Optional. Group level: level (int), no groups (false).
* Default false.
* @return bool True on success, false on failure.
*/
public function all_deps( $handles, $recursion = false, $group = false ) {
$r = parent::all_deps( $handles, $recursion, $group );
if ( ! $recursion ) {
/**
* Filters the array of enqueued styles before processing for output.
*
* @since 2.6.0
*
* @param string[] $to_do The list of enqueued style handles about to be processed.
*/
$this->to_do = apply_filters( 'print_styles_array', $this->to_do );
}
return $r;
}
/**
* Generates an enqueued style's fully-qualified URL.
*
* @since 2.6.0
*
* @param string $src The source of the enqueued style.
* @param string $ver The version of the enqueued style.
* @param string $handle The style's registered handle.
* @return string Style's fully-qualified URL.
*/
public function _css_href( $src, $ver, $handle ) {
if ( ! is_bool( $src ) && ! preg_match( '|^(https?:)?//|', $src ) && ! ( $this->content_url && str_starts_with( $src, $this->content_url ) ) ) {
$src = $this->base_url . $src;
}
if ( ! empty( $ver ) ) {
$src = add_query_arg( 'ver', $ver, $src );
}
/**
* Filters an enqueued style's fully-qualified URL.
*
* @since 2.6.0
*
* @param string $src The source URL of the enqueued style.
* @param string $handle The style's registered handle.
*/
$src = apply_filters( 'style_loader_src', $src, $handle );
return esc_url( $src );
}
/**
* Whether a handle's source is in a default directory.
*
* @since 2.8.0
*
* @param string $src The source of the enqueued style.
* @return bool True if found, false if not.
*/
public function in_default_dir( $src ) {
if ( ! $this->default_dirs ) {
return true;
}
foreach ( (array) $this->default_dirs as $test ) {
if ( str_starts_with( $src, $test ) ) {
return true;
}
}
return false;
}
/**
* Processes items and dependencies for the footer group.
*
* HTML 5 allows styles in the body, grab late enqueued items and output them in the footer.
*
* @since 3.3.0
*
* @see WP_Dependencies::do_items()
*
* @return string[] Handles of items that have been processed.
*/
public function do_footer_items() {
$this->do_items( false, 1 );
return $this->done;
}
/**
* Resets class properties.
*
* @since 3.3.0
*/
public function reset() {
$this->do_concat = false;
$this->concat = '';
$this->concat_version = '';
$this->print_html = '';
}
}
View all references View on Trac View on GitHub
Version Description 2.6.0 Introduced.
Adding a Right-to-Left Stylesheet
To specify a stylesheet to add, set ‘rtl’ to the URL:
To have WordPress create the URL for the rtl stylesheet, set ‘rtl’ to TRUE and (optionally) set a suffix for the stylesheet in the extra data:
Examples
Dependent Stylesheet
Embedded Style
An embedded stylesheet can be added to an external one, but sparingly:
Conditional Styles
Conditional comments can be added around the to a stylesheet by setting ‘conditional’ in a stylesheet’s extra data:
Other Attributes
Other attributes include the stylesheet title, and wether it’s an alternate stylesheet:
Accumulation
Instead of printing style sheet elements, they can be gathered for other purposes: