0

I'm using the following jquery to inject CSS styles into a <style id="customizer-preview"> tag in the <head> of the Customizer preview window:

wp.customize( 'site_title_color', function( value ) {
    value.bind( function( newval ) {
        if ( $( '#customizer-preview .site-title' ).length > 0 ) {
             $( '#customizer-preview .site-title' ).remove();
        }
        $( '#customizer-preview' ).append( '.site-title { color: ' + newval + ' ; }' );
    } );
} );

It works fine, except the previously entered values are not being removed and the new values are just being added, cluttering up the CSS. Lines 3-5 are the problem. Basically I'm trying to check to see if there is already a value assigned to the selector .site-title. If there is, clear it and replace it with the new value.

0

You're using a selector in this:

       if ( $( '#customizer-preview .site-title' ).length > 0 ) {
         $( '#customizer-preview .site-title' ).remove();
       }

It's just like styling CSS property, if you were to add that rule to a style sheet, it would add styles for the element #customizer-preview .site-title So the code above is saying if an element exists for the selector #customizer-preview .site-title, then remove that element.

Then with this code:

        $( '#customizer-preview' ).append( '.site-title { color: ' + newval + ' ; }' );

You're selecting the stylesheet you mentioned which has the ID customizer-preview. Then you're adding the text string you created for the selector .site-title and setting a color property inside of that element.

Within context of the customize preview window - it's much easier in your case to just apply the style directly to the .site-title selector when the value is updated, like this:

wp.customize( 'site_title_color', value => {
    value.bind( to => $( '.site-title' ).css( 'color', to ) );
} );

This way you don't have to worry about checking for things as the style is applied inline, and will override your stylesheet properties, which I'm assuming are created in PHP when the setting is saved in your case. When the setting is changed multiple times - then it just continues to overwrite that inline style. This gives the user an accurate preview, which is what the customizer is for. It doesn't matter much to a user if that output matches what might be output for the frontend, as long as both presentations are the same.

Otherwise, if you really want - yes it's entirely possible to do what you ask. You'll need to do some parsing of the stylesheet rules, your example code is fairly easy to do that with, but can get much more complex as you have more and more stuff going on. This is how it would look:

wp.customize( 'site_title_color', value => {
    value.bind( to => {

        // Access stylesheet.
        var css = document.getElementById( 'customizer-preview' ).sheet;

        // Loop through stylesheet's CSS rules to find index of selector.
        for ( var i = 0; i < css.cssRules.length; i++ ) {

            // Check if there's a match for your selector.
            if ( '.site-title' === css.cssRules[ i ].selectorText ) {

                // Delete the rule from the stylesheet and exit loop.   
                css.deleteRule( i );
                break;
            }
        }

        // Insert new style rule at end using the sheet's cssRules length.
        css.insertRule( '.site-title { color: ' + to + '; }', css.cssRules.length );
    } );
} );

As this code is commented it should be easy to figure out. Obviously this works fine for your question, but if .site-title contained more than just a color property, then you'd want to instead update the color property in the rule, so you retain the other properties that are set in the stylesheet's rule for .site-title.

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.