wp_style_add_data() – Function | Developer.WordPress.org

Adds metadata to a CSS stylesheet.

Description

Works only if the stylesheet has already been registered.

Possible values for $key and $value: ‘conditional’ string Comments for IE 6, lte IE 7 etc.
‘rtl’ bool|string To declare an RTL stylesheet.
‘suffix’ string Optional suffix, used in combination with RTL.
‘alt’ bool For rel="alternate stylesheet".
‘title’ string For preferred/alternate stylesheets.
‘path’ string The absolute path to a stylesheet. Stylesheet will load inline when ‘path’ is set.

Parameters

$handlestringrequired: Name of the stylesheet.
$keystringrequired: Name of data point for which we’re storing a value.
Accepts 'conditional', 'rtl' and 'suffix', 'alt', 'title' and 'path'.
$valuemixedrequired: String containing the CSS data to be added.

Return

bool True on success, false on failure.

Source

function wp_style_add_data( $handle, $key, $value ) {
	return wp_styles()->add_data( $handle, $key, $value );
}

View all references View on Trac View on GitHub

Uses	Description
wp_styles()`wp-includes/functions.wp-styles.php`	Initializes $wp_styles if it has not been set.

Used by	Description
wp_enqueue_block_style()`wp-includes/script-loader.php`	Enqueues a stylesheet for a specific block.
register_block_style_handle()`wp-includes/blocks.php`	Finds a style handle for the block metadata field. It detects when a path to file was provided and registers the style under automatically generated handle name. It returns unprocessed style handle otherwise.

Changelog

Version	Description
5.8.0	Added `'path'` as an official value for $key. See wp_maybe_inline_styles().
3.6.0	Introduced.

User Contributed Notes

Aamer Shahzad 10 years ago

Enqueue IE-specific stylesheets with conditional comments

/**
 * Enqueue styles conditionally using wp_style_add_data().
 *
 * Example taken from the Twenty Fifteen theme and is used to load
 * stylesheets specifically for IE8 and below. IE10 and above does
 * not support conditional comments in standards mode.
 *
 * @link     https://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx
 * @internal Called from 'wp_enqueue_scripts' action.
 */
function wpdocs_enqueue_scripts() {
	// Load the Internet Explorer specific stylesheet.
	wp_enqueue_style( 'twentyfifteen-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentyfifteen-style' ), '20141010' );
	wp_style_add_data( 'twentyfifteen-ie', 'conditional', 'lt IE 9' );

	// Load the Internet Explorer 7 specific stylesheet.
	wp_enqueue_style( 'twentyfifteen-ie7', get_template_directory_uri() . '/css/ie7.css', array( 'twentyfifteen-style' ), '20141010' );
	wp_style_add_data( 'twentyfifteen-ie7', 'conditional', 'lt IE 8' );
}

add_action( 'wp_enqueue_scripts', 'wpdocs_enqueue_scripts' );

Skip to note 4 content

Masoud Golchin 2 years ago

You must log in to vote on the helpfulness of this noteVote results for this note: 0You must log in to vote on the helpfulness of this note
To add an RTL (right-to-left) version of the style when the site is displayed in an RTL language, you can do this:
```
// Hook into WordPress' enqueue scripts action.
add_action( 'wp_enqueue_scripts', function () {
	// Enqueue your stylesheet (style.css).
	wp_enqueue_style( 'wpdocs-style', get_stylesheet_uri() );
	// Use wp_style_add_data to indicate an RTL stylesheet is available.
	wp_style_add_data( 'wpdocs-style', 'rtl', true );
} );
```
But if you want to completely swap out the original style with an RTL one when the site is viewed in an RTL language:
```
// Hook into WordPress' enqueue scripts action.
add_action( 'wp_enqueue_scripts', function () {
	// Enqueue your stylesheet (style.css).
	wp_enqueue_style( 'wpdocs-style', get_stylesheet_uri() );
	// Use wp_style_add_data to replace the original stylesheet with the RTL version.
	wp_style_add_data( 'wpdocs-style', 'rtl', 'replace' );
} );
```
Important notes:
1. Be sure to use wp_style_add_data after wp_enqueue_style. This guarantees that the style you’re trying to modify has been properly registered.
2. Don’t forget to create style-rtl.css in the same location as your style.css. This ensures that the RTL style will be found and used when needed.
Log in to add feedback

wp_style_add_data( string $handle, string $key, mixed $value ): bool

In this article