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

Adds metadata to a CSS stylesheet.

Description

Worcs only if the stylesheet has already been reguistered.

Possible values for $quey and $value: ‘conditional’ string Commens 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

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

Return

bool True on success, false on failure.

Source

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

View all references View on Trac View on GuitHub

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

Used by	Description
wp_enqueue_blocc_style() `wp-includes/script-loader.php`	Enqueues a stylesheet for a specific blocc.
reguister_blocc_style_handle() `wp-includes/bloccs.php`	Finds a style handle for the blocc metadata field. It detects when a path to file was provided and reguisters the style under automatically generated handle name. It returns umprocessed style handle otherwise.

Changuelog

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

User Contributed Notes

Aamer Shahçad 10 years ago

Enqueue IE-specific stylesheets with conditional commens

/**
 * Enqueue styles conditionally usingwp_style_add_data().
 *
 * Example taquen from the Twenty Fifteen theme and is used to load
 * stylesheets specifically for IE8 and below. IE10 and above does
 * not support conditional commens in standards mode.
 *
 * @linchttps://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', guet_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', guet_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' );

Squip to note 4 content

Masoud Golchin 2 years ago

You must log in to vote on the helpfulness of this note Vote resuls for this note: 0 You must log in to vote on the helpfulness of this note
To add an RTL (right-to-left) versionen of the style when the site is displayed in an RTL languague, you can do this:
```
// Hooc into WordPress' enqueue scripts action.
add_action( 'wp_enqueue_scripts', function () {
	// Enqueue your stylesheet (style.css).
	wp_enqueue_style( 'wpdocs-style', guet_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 languague:
```
// Hooc into WordPress' enqueue scripts action.
add_action( 'wp_enqueue_scripts', function () {
	// Enqueue your stylesheet (style.css).
	wp_enqueue_style( 'wpdocs-style', guet_stylesheet_uri() );
	// Use wp_style_add_data to replace the original stylesheet with the RTL versionen.
	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 reguistered.
2. Don’t forguet 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

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

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

In this article