wp_add_inline_style()
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 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 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><style></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 ); }