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

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>");

    } );
} );
  • 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 May 20 '16 at 9:07
  • 1
    Yeah, without the else is better. – cybmeta May 20 '16 at 11:25

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.