wp_add_inline_style() │ WP 3.3.0

Adds an additional block of CSS styles. CSS is added directly to the HTML document, after the main (specified) styles.

It works when the styles to which the additional block is attached have already been added to the queue. In the $data parameter, you need to provide the CSS styles themselves, e.g. '.container{ width:50%; }'.

If more than one block of CSS styles is added to the same stylesheet (the $handle parameter), the blocks will be output in the order they were added, i.e. a later block will "override" the styles of the previous block in case of a match.

To add external CSS style files, use wp_enqueue_style().

Uses: wp_styles()

No Hooks.

Returns

true|false. Logical true if the styles were successfully added and false if not.

Usage

wp_add_inline_style( $handle, $data );

$handle(string) (required): The name of the styles (identifier) to which to add the additional block of styles. A lowercase string.
$data(string) (required): A string containing the CSS rules to be added to the page.

Examples

#1 Just add inline styles

add_action( 'wp_enqueue_scripts', 'add_my_inline_styles' );

function add_my_inline_styles() {
	$handle = 'my-styles';

	wp_register_style( $handle, false );
	wp_add_inline_style( $handle, file_get_contents( __DIR__ . '/css/styles.css' ) );
	wp_enqueue_style( $handle );
}

#2 Add additional CSS styles

Let's add extra styles to the ones already added to the page. For example, imagine that a plugin or theme uses the class .mycolor to change the background of an element.

With this code we can rewrite the background color we get from the themes settings get_theme_mod('my-custom-color'):

add_action( 'wp_enqueue_scripts', 'my_styles_method' );

function my_styles_method() {

	wp_enqueue_style('custom-style', get_template_directory_uri() . '/css/custom_script.css');

	$color = get_theme_mod( 'my-custom-color' ); // #FF0000

	$custom_css = "
	.mycolor{
		background: {$color};
	}";

	wp_add_inline_style( 'custom-style', $custom_css );
}

#3 Just connecting inline styles, without a parent styles file

If you want to connect inline styles and they do not depend on any other styles or you do not know in advance which style file to connect them to, you can connect them by themselves.

To do this, you can use following hack - register a dummy style file and connect inline styles to it:

add_action( 'wp_enqueue_scripts', 'wp_enqueue_my_inline_styles' );

function wp_enqueue_my_inline_styles(){

	$styles = '
	.wp-list-table .column-active_blogs {
		width: 10em;
		white-space: nowrap
	}
	';

	$key = 'my-styles';

	wp_register_style( $key, false, array(), true, true );
	wp_add_inline_style( $key, $styles );
	wp_enqueue_style( $key );
}

Notes

See: WP_Styles::add_inline_style()

Changelog

Since 3.3.0

Introduced.

`wp_add_inline_style() wp add inline style` code ^{WP 6.8.1}

wp-includes/functions.wp-styles.php

function wp_add_inline_style( $handle, $data ) {
	_wp_scripts_maybe_doing_it_wrong( __FUNCTION__, $handle );

	if ( false !== stripos( $data, '</style>' ) ) {
		_doing_it_wrong(
			__FUNCTION__,
			sprintf(
				/* translators: 1: <style>, 2: wp_add_inline_style() */
				__( 'Do not pass %1$s tags to %2$s.' ),
				'<code>&lt;style&gt;</code>',
				'<code>wp_add_inline_style()</code>'
			),
			'3.7.0'
		);
		$data = trim( preg_replace( '#<style[^>]*>(.*)</style>#is', '$1', $data ) );
	}

	return wp_styles()->add_inline_style( $handle, $data );
}