Is there a way to remove styles added with wp_add_inline_style?

I noticed if I call wp_add_inline_style multiple times, it just keeps adding style, it does not overwrite what was added before.

The plugin is adding styles:

$inline_css = '#selector{
    color:red;
}';
wp_add_inline_style($style, $inline_css);

If I do this again:

$inline_css = '#other-selector{
    color:blue;
}';
wp_add_inline_style($style, $inline_css);

It will just append those css, I would like to clear css before calling wp_add_inline_style again.

Is there a way to remove styles added with wp_add_inline_style?

I noticed if I call wp_add_inline_style multiple times, it just keeps adding style, it does not overwrite what was added before.

The plugin is adding styles:

$inline_css = '#selector{
    color:red;
}';
wp_add_inline_style($style, $inline_css);

If I do this again:

$inline_css = '#other-selector{
    color:blue;
}';
wp_add_inline_style($style, $inline_css);

It will just append those css, I would like to clear css before calling wp_add_inline_style again.

• css
• wp-enqueue-style

• Can you clarify why/where you want to remove them? i.e is a plugin adding it and you want to remove it in your theme? – Tim Malone Commented Jul 8, 2016 at 23:47
• Yes, I am writing a plugin which is using wp_add_inline_style. The only thing that I can think of is to use jquery to empty style tag generated by wp_add_inline_style. And I am not sure if this will achieve the same thing even if I manage to implement it. – Toniq Commented Jul 9, 2016 at 0:13
• But why do you need to remove it after you've added it? Can't you just not add it? I'm a little confused as to what you're trying to do. – Tim Malone Commented Jul 9, 2016 at 0:17
• I have like a backend configurator where user can choose some styles for a given preset, so I am adding some styles in the page, then later when I change to other preset, I need to change these styles to something else. I tried wp_dequeue_style($style); inbetween but its not helping. – Toniq Commented Jul 9, 2016 at 0:25

2 Answers 2

Remove styles added with wp_add_inline_style()

If we want to keep the custom-style-css but only remove the custom-style-inline-css, then we can try e.g.

add_action( 'wp_print_styles', function()
{
    // Remove previous inline style
    wp_styles()->add_data( 'custom-style', 'after', '' );    

} );

where after is data key for the inline style corresponding to the custom-style handler.

There is exists a wrapper for wp_styles()->add_data(), namely wp_style_add_data().

We could then define the helper function:

function wpse_remove_inline_style( $handler )
{
       wp_style_is( $handler, 'enqueued' ) 
    && wp_style_add_data( $handler, 'after', '' );
}

and use it like:

add_action( 'wp_print_styles', function()
{
    // Remove previous inline style
    wpse_remove_inline_style( 'custom-style' );    

} );

I'm skipping the function_exists check here.

To override the inline-style, added by another plugin, with our own:

add_action( 'wp_print_styles', function()
{
    // Remove previous inline style
    wpse_remove_inline_style( 'custom-style' );    

    // New inline style
    $custom_css = ".mycolor{
        background: {blue};
    }";
    wp_add_inline_style( 'custom-style', $custom_css );

} );

Note

The reason why it doesn't work to override previous inline style with wp_add_inline_style() is because the WP_Style::add_inline_style() appends each incoming CSS string into an array. Internally it uses WP_Style::add_data() to store the accumulated CSS. Here we are using it to overcome the appending restriction of wp_add_inline_style().

Looking into wp-includes/class.wp-styles.php core file I found a filter to use:

add_action("print_styles_array", function( $styles ) { 
    $my_handle = "custom-style"; // your custom handle here, the one declared as $style in question
    if ( !empty( $styles ) ) {
        foreach ( $styles as $i => $style ) {
            if ( $my_handle === $style ) {
                unset( $styles[$i] );
            }
        }
    }
    return $styles;
});

Note that this will remove all inline styles processed by the handle name.