class WP_Styles {}

Core class used to register styles.

Description

See also

More Information

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.

Text direction

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").

Concatenation vs Printing

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.

Media

The media for a stylesheet is passed via the $args argument to WP_Dependencies::add().

Properties and Hooks

Note: Refer source code for the complete list of properties and hooks.

Properties

$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.

Hooks

Note: Refer source code for the complete list of hooks.

Actions

  • wp_default_styles – Invoked when a WP_Styles is created. The instance is passed to action hooks.

Filters

  • 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.

Methods

NameDescription
WP_Styles::__constructConstructor.
WP_Styles::_css_hrefGenerates an enqueued style’s fully-qualified URL.
WP_Styles::add_inline_styleAdds extra CSS styles to a registered stylesheet.
WP_Styles::all_depsDetermines style dependencies.
WP_Styles::do_footer_itemsProcesses items and dependencies for the footer group.
WP_Styles::do_itemProcesses a style dependency.
WP_Styles::in_default_dirWhether a handle’s source is in a default directory.
WP_Styles::print_inline_stylePrints extra CSS styles of a registered stylesheet.
WP_Styles::resetResets class properties.

Source

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 . '&amp;' . $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     = '';
	}
}

Changelog

VersionDescription
2.6.0Introduced.

User Contributed Notes

  1. Skip to note 7 content

    Adding a Right-to-Left Stylesheet
    To specify a stylesheet to add, set ‘rtl’ to the URL:

    <?php 
       global $wp_styles;
       $wp_styles->add('example', '/themes/example/example.css');
       $wp_styles->add_data('rtl', '/themes/example/rtl.css');
       $wp_styles->enqueue(array('example'));
    ?>

    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:

    <?php 
       global $wp_styles;
       $wp_styles->add('example', '/themes/example/example-new.css');
       $wp_styles->add_data('rtl', TRUE);
       # URL for rtl stylesheet will be '/themes/example/example-rtl-new.css'
       $wp_styles->add_data('suffix', '-new');
       $wp_styles->enqueue(array('example'));
    ?>
  2. Skip to note 10 content

    Conditional Styles
    Conditional comments can be added around the to a stylesheet by setting ‘conditional’ in a stylesheet’s extra data:

    <?php
       global $wp_styles;
       $wp_styles->add('example_ie7-', '/themes/example/ie7-.css');
       $wp_styles->add_data('example_ie7-', 'conditional', 'lte IE 7');
       $wp_styles->enqueue(array('example_ie7-'));
    ?>
  3. Skip to note 11 content

    Other Attributes
    Other attributes include the stylesheet title, and wether it’s an alternate stylesheet:

    <?php
       global $wp_styles;
       $wp_styles->add('example-alt', '/themes/example/example-alt.css');
       $wp_styles->add_data('example-alt', 'title', 'Example Alternate Stylesheet');
       $wp_styles->add_data('example-alt', 'alt', TRUE);
       $wp_styles->enqueue(array('example-alt'));
    ?>
  4. Skip to note 12 content

    Accumulation
    Instead of printing style sheet elements, they can be gathered for other purposes:

    <?php
       /* Create  */
       $my_styles = new WP_Styles;
       $my_styles->do_concat = TRUE;
    
       /* Add styles */
       $my_styles->add('example', '/themes/example/example.css');
       $my_styles->add('example_ie7-', '/themes/example/ie7-.css', array('example'));
       $my_styles->add_data('example_ie7-', 'conditional', 'lte IE 7');
       #...
       $wp_styles->enqueue(array('example', 'example_ie7-', ...));
    
       /* Output styles */
       $my_styles->do_items();
    
       /* */
       # 'example,example_ie7-,...'
       $my_styles->concat;
       # accumulated elements
       $my_styles->print_html;
       #...
       /* Clear  */
       $my_styles->reset();
    ?>

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