0

I'm adding some options to a theme through my plugin, I want to change this theme styles and I'm almost there... Now I need to know how I can hide the <style> tag when no settings are changed (all default not used),

function myplugin_customize_css(){
?>
 <style>
     h2 {color:<?php echo get_theme_mod('myplugin_h2_color'); ?>;}
     h3 {color:<?php echo get_theme_mod('myplugin_h3_color'); ?>;}
     p {
        color:<?php echo get_theme_mod('myplugin_p_color'); ?>;
        font-size:<?php echo get_theme_mod('myplugin_p_size'); ?>;
     }
     // more & more of these! 
 </style>
<?php
}
add_action( 'wp_head', 'myplugin_customize_css');

I can do if() statements here but it feels too much, what other ways I can do this... not like this:

function myplugin_customize_css(){
    if (get_theme_mod('myplugin_h2_color') != '' 
        || get_theme_mod('myplugin_h3_color') !=''
        || get_theme_mod('myplugin_p_color') !=''
        || get_theme_mod('myplugin_p_size') !='' ) {
        ?>
        <style>
            // if get_theme_mod('myplugin_h2_color') != ''
             h2 {color:<?php echo get_theme_mod('myplugin_h2_color'); ?>;}

             // if get_theme_mod('myplugin_h3_color') != ''
             h3 {color:<?php echo get_theme_mod('myplugin_h3_color'); ?>;}

             // if get_theme_mod('myplugin_p_color') !='' 
             //    && get_theme_mod('myplugin_p_size') !='' 
             p {
                // if get_theme_mod('myplugin_p_color') !='' 
                color:<?php echo get_theme_mod('myplugin_p_color'); ?>;
                // if get_theme_mod('myplugin_p_size') !=''
                font-size:<?php echo get_theme_mod('myplugin_p_size'); ?>;
             }
             // more & more of these! 
         </style>
         <?php
    }
}
add_action( 'wp_head', 'myplugin_customize_css');
0

There's not really any trick, you need to check all the values. You can save a little space though, by omitting the != '', which is redundant:

if (
    get_theme_mod( 'myplugin_h2_color' ) ||
    get_theme_mod( 'myplugin_h3_color' ) ||
    get_theme_mod( 'myplugin_p_color' ) ||
    get_theme_mod( 'myplugin_p_size' )
) {

However, it's possible to save Customiser settings into a single array. So if you register your settings with names like:

$wp_customize->add_setting( 'myplugin[h2_color]' );
$wp_customize->add_setting( 'myplugin[h3_color]' );
$wp_customize->add_setting( 'myplugin[p_color]' );
$wp_customize->add_setting( 'myplugin[p_size]' );

Then you can retrieve the values in an array like:

get_theme_mod( 'myplugin' );

If you do this, then you could use array_filter() to remove any empty values, and check if the resulting array is empty. If it isn't, then at least one of the the settings has a value:

$styles = get_theme_mod( 'myplugin' );

if ( ! empty( array_filter( $styles ) ) ) {
    echo '<style>';

    if ( ! empty( $styles['h2_color'] ) {
        printf( 'h2 { color: %s; }', $styles['h2_color'] );
    }

    // etc.

    echo '</style>';
}

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.