wp_add_inline_style( string $handle, string $data )

Add extra CSS styles to a registered stylesheet.


Description Description

Styles will only be added if the stylesheet in 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 Parameters

$handle

(string) (Required) Name of the stylesheet to add the extra styles to.

$data

(string) (Required) String containing the CSS styles to be added.


Top ↑

Return Return

(bool) True on success, false on failure.


Top ↑

Source Source

File: wp-includes/functions.wp-styles.php

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

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

Top ↑

Changelog Changelog

Changelog
Version Description
3.3.0 Introduced.


Top ↑

User Contributed Notes User Contributed Notes

  1. Skip to note content
    Contributed by Codex

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

You must log in before being able to contribute a note or feedback.