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
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_hoist_late_printed_styles()`wp-includes/script-loader.php`	Adds the hooks needed for CSS output to be delayed until after the content of the page has been established.
wp_enqueue_img_auto_sizes_contain_css_fix()`wp-includes/media.php`	Enqueues a CSS rule to fix potential visual issues with images using `sizes=auto`.
WP_Interactivity_API::data_wp_router_region_processor()`wp-includes/interactivity-api/class-wp-interactivity-api.php`	Processes the `data-wp-router-region` directive.
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/deprecated.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 12 more Show less

Changelog

Version	Description
3.3.0	Introduced.

User Contributed Notes

Skip to note 2 content

Codex 11 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