wp_add_inline_style() – Function | Developer.WordPress.org

Adds extra CSS styles to a registered stylesheet.

Description

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.

Parameters

$handlestringrequired: Name of the stylesheet to add the extra styles to.
$datastringrequired: String containing the CSS styles to be added.

Return

bool True on success, false on failure.

Source

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

View all references View on Trac View on GitHub

Uses	Description
stripos()`wp-includes/class-pop3.php`
wp_styles()`wp-includes/functions.wp-styles.php`	Initializes $wp_styles if it has not been set.
WP_Styles::add_inline_style()`wp-includes/class-wp-styles.php`	Adds extra CSS styles to a registered stylesheet.
__()`wp-includes/l10n.php`	Retrieves the translation of $text.
_doing_it_wrong()`wp-includes/functions.php`	Marks something as being incorrectly called.

Show 2 more Show less

Used by	Description
wp_enqueue_emoji_styles()`wp-includes/formatting.php`	Enqueues the important emoji-related styles.
wp_enqueue_admin_bar_bump_styles()`wp-includes/admin-bar.php`	Enqueues inline bump styles to make room for the admin bar.
wp_enqueue_admin_bar_header_styles()`wp-includes/admin-bar.php`	Enqueues inline style to hide the admin bar when printing.
wp_enqueue_embed_styles()`wp-includes/embed.php`	Enqueues the CSS in the embed iframe header.
wp_enqueue_block_template_skip_link()`wp-includes/theme-templates.php`	Enqueues the skip-link script & styles.
WP_Duotone::output_global_styles()`wp-includes/class-wp-duotone.php`	Appends the used global style duotone filter presets (CSS custom properties) to the inline global styles CSS.
WP_Duotone::output_footer_assets()`wp-includes/class-wp-duotone.php`	Outputs all necessary SVG for duotone filters, CSS for classic themes.
wp_enqueue_global_styles_custom_css()`wp-includes/script-loader.php`	Enqueues the global styles custom css defined via theme.json.
wp_enqueue_stored_styles()`wp-includes/script-loader.php`	Fetches, processes and compiles stored core styles, then combines and renders them to the page.
wp_add_global_styles_for_blocks()`wp-includes/global-styles-and-settings.php`	Adds global style rules to the inline style for each block.
_wp_theme_json_webfonts_handler()`wp-includes/deprecated.php`	Runs the theme.json webfonts handler.
wp_enqueue_global_styles_css_custom_properties()`wp-includes/script-loader.php`	Function that enqueues the CSS Custom Properties coming from theme.json.
wp_enqueue_global_styles()`wp-includes/script-loader.php`	Enqueues the global styles defined via theme.json.
enqueue_block_styles_assets()`wp-includes/script-loader.php`	Function responsible for enqueuing the styles required for block styles functionality on the editor and on the frontend.

Show 9 more Show less

Changelog

Version	Description
3.3.0	Introduced.

User Contributed Notes

Skip to note 2 content

Codex 9 years ago

You must log in to vote on the helpfulness of this noteVote results for this note: 12You must log in to vote on the helpfulness of this note
Example
wp_add_inline_style allows you to print extra styling whenever a certain stylesheet is loaded. For instance suppose a plug-in or theme makes use of the class .mycolor in a stylesheet to set a background color. This can be over-ridden by a user chosen color, stored in the database by using wp_add_inline_style to print the extra styling.
```
/**
 * Add color styling from theme
 */
function wpdocs_styles_method() {
	wp_enqueue_style(
		'custom-style',
		get_template_directory_uri() . '/css/custom_script.css'
	);
        $color = get_theme_mod( 'my-custom-color' ); //E.g. #FF0000
        $custom_css = "
                .mycolor{
                        background: {$color};
                }";
        wp_add_inline_style( 'custom-style', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_styles_method' );
```
Log in to add feedback

wp_add_inline_style( string $handle, string $data ): bool

In this article