Using Wordpress Theme Mod Better - php

Question

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
}

Answer 1

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.