0

I have a problem in the customizer. I want to see the live-preview from the CSS pseudo-elements and custom_css, too. So I append the <style> in the <head> like this, in the customizer.js:

wp.customize( 'custom_css', function( value ) {
    value.bind( function( newval ) {
        $('head').append("<style>"+ newval + "</style>");  
    } );
} );

So every change, append the style in the head.

<head>

This is ok with the pseudo-elements, but when i delete the custom_css in the customizer: the change would be not remove.

How can I delete the old custom-css-stuff in the customizer-live-preview?

Thanks for your help. :)

Improve this question

1 Answer 1

Reset to default
1

<style> tag accepts all the global HTML attribute, including class and id. So, you could do something like this:

wp.customize( 'custom_css', function( value ) {
    value.bind( function( newval ) {

      if ( $("#my-custom-style").length > 0 ) {
        $("#my-custom-style").remove();
      }

      $('head').append("<style id="my-custom-style">"+ newval + "</style>");

    } );
} );
Improve this answer
2
  • 1
    Thats great! I didn't know that i can use an id or class in a style-tag. Thank you so much cybmeta! I use your $("#my-custom-style").remove(); on the beginning. So i have just one 'my-custom-style'-style tag in the header. :) wp.customize( 'custom_css', function( value ) { value.bind( function( newval ) { if ( $("#my-custom-style").length > 0 ) { $("#my-custom-style").remove(); } $('head').append("<style id='my-custom-style'>"+ newval + "</style>"); } ); } );
    – Tada
    Commented May 20, 2016 at 9:07
  • 1
    Yeah, without the else is better.
    – cybmeta
    Commented May 20, 2016 at 11:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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