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.

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

0

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

Notes

Changelog

Since 3.3.0 Introduced.

Code of wp_add_inline_style() WP 5.9.3

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