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

Adds metadata to a CSS stylesheet.

Contents

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.

Top ↑

See also

Top ↑

Parameters

$handle string Required
Name of the stylesheet.
$key 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.

Top ↑

Return

bool True on success, false on failure.

Top ↑

Source

File: wp-includes/functions.wp-styles.php. View all references 

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

View on Trac View on GitHub

Top ↑

Top ↑

Uses

Uses
Uses Description
wp_styles() wp-includes/functions.wp-styles.php

Initializes $wp_styles if it has not been set.

Top ↑

Used By

Used By
Used By Description
wp_enqueue_classic_theme_styles() wp-includes/script-loader.php

Loads classic theme styles on classic themes in the frontend.
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.

Top ↑

Changelog

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

Top ↑

User Contributed Notes

  1. Skip to note 1 content
    You must log in to vote on the helpfulness of this noteVote results for this note: 4You must log in to vote on the helpfulness of this note
    Contributed by Aamer Shahzad —

    Enqueue IE-specific stylesheets with conditional comments

    /**
 * Enqueue styles conditionally using {@see 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' );
  2. Skip to note 2 content
    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
    Contributed by Masoud Golchin —

    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.

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