4

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.

  • 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 Jul 8 '16 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 Jul 9 '16 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 Jul 9 '16 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 Jul 9 '16 at 0:25
5

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( 'custom-style', '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().

  • Yes, I want to only remove styles added with wp_add_inline_style, not those added with wp_enqueue_style, before I add new ones. I will check provided solutions. – Toniq Jul 9 '16 at 11:05
  • Sorry, I couldn't test it, I had to abandon this because of some other project changes. – Toniq Jul 14 '16 at 3:47
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.