wp_add_inline_style() │ WP 3.3.0

Add extra CSS styles to a registered stylesheet.

Styles will only be added if the stylesheet is already in the queue. Accepts a string $data containing the CSS. If two or more CSS code blocks are added to the same stylesheet $handle, they will be printed in the order they were added, i.e. the latter added styles can redeclare the previous.

Uses: wp_styles()

No Hooks.

Return

true|false. True on success, false on failure.

Usage

wp_add_inline_style( $handle, $data );

$handle(string) (required): Name of the stylesheet to add the extra styles to.
$data(string) (required): String containing the CSS styles to be added.

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.5.2}

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 );
}