5

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.

4
  • 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
7

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().

4
  • 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
  • Is this meant as putting the first three scripts to functions.php as they are should remove any inline css? Or do we need to identify which inline script to remove? If first, doesn't seem to work, if second, how do I know such identifier?
    – Fanky
    Mar 31 at 18:46
  • This targets a specific script with a given handler/identifier. One can find the handler from the enqueue code or from the script tag in the page's HTML. Here the demo handler is 'custom-style'.
    – birgire
    Apr 13 at 9:05
2

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.