CODEWITHSUNDEEP
phpwordpresswordpress-theming
Troy Riemer
Troy Riemer

Reputation: 85

Using Wordpress Theme Mod Better

I am adding some Custom Controls to the Wordpress Customizer and using those controls to style a slider. I was wondering if there was a better way to implement this than how I've already done. I don't really understand the if statements here, but I know that it works. Any help is much appreciated!

function apache_c_slider_css() {

    ?>
    <style type='text/css'>
    <?php

    $slider_height = get_theme_mod( 'slider_height', '500' );
    if ( ! empty( $slider_height ) ) {
        ?>
        #slider,
        .slides,
        .slide {
            height: <?php echo $slider_height; ?>px;
        }
        <?php
    }

    $slider_max_height = get_theme_mod( 'slider_max_height', '100' );
    if ( ! empty( $slider_max_height ) ) {
        ?>
        #slider,
        .slides,
        .slide {
            max-height: <?php echo $slider_max_height; ?>vh;
        }
        <?php
    }

    ?>
    </style>
    <?php
}

Upvotes: 0

Views: 262

Answers (2)

Hira Ansari
Hira Ansari

Reputation: 1

If you want to avoid auto implementation due to the default values in the controls then you should create/set an on/off trigger control (radio control with yes/no or on/off values) to implement the height width controls only if the trigger is on/yes.

So, it should look like this:

  $slider_settings_trigger     = get_theme_mod( 'slider_settings_trigger', 'no' );

if( $slider_settings_trigger == 'yes' ){

    $slider_height     = get_theme_mod( 'slider_height', '500' );
    $slider_max_height = get_theme_mod( 'slider_max_height', '100' );

    echo '<style type=\'text/css\'>
        #slider,
        .slides,
        .slide {
            height: '. $slider_height .'px;
            max-height: '. $slider_max_height .'vh;
        }
    </style>';

}else{}

Upvotes: 0

Xhynk
Xhynk

Reputation: 13860

Truthfully, you don't even need the if statement, because you're passing a default value to get_theme_mod(), so it shouldn't ever be empty. Generally speaking, if you don't have a default value, or there's even a chance of an empty value, you'll want to check that condition - but you shouldn't need to here. If you want to, you could combine them into a single if statement like so:

if ( !empty( $slider_height ) || !empty( $slider_max_height ) ){
    // Code
}

The pipes || indicate PHP's Logical "OR" Operator, so if either isn't empty, it will proceed. That said, this is probably how I'd modify your current code:

function apache_c_slider_css(){
    $slider_height     = get_theme_mod( 'slider_height', '500' );
    $slider_max_height = get_theme_mod( 'slider_max_height', '100' );

    echo '<style type=\'text/css\'>
        #slider,
        .slides,
        .slide {
            height: '. $slider_height .'px;
            max-height: '. $slider_max_height .'vh;
        }
    </style>';
}

The declarations will return the theme mod that's set, or 500 pixels and 100 viewport height % by default.

And lastly you can output the whole thing at once.

With that said, "baking in" scripts and styles generally isn't the best way to go about adding CSS and JS in WordPress, especially if you're working on a theme. This kind of CSS is a textbook example of code that should be added with the wp_add_inline_style() function to extend your theme's main styles.

Upvotes: 1

Related Questions