Special Offer: Buy All 48 Premium WordPress Themes for Just $74.99. Learn more

HomePage Slider: Set Slide Images for Mobile Devices

In some cases you may need to set a different images for the slider when the slider is being loaded on Mobile Devices (Smartphones and Tablets). Here is a guide how to add additional Customizer option for such images and load them in the slider under Mobile screens:

Note: The below change can be applied only to these Premium Themes from us: tArt, tCorpo, tGymm, tKidd, tMeditate, tPsychology, tSpirituality, and tTourism.

1. Install and Activate the WP Editor plugin:https://wordpress.org/plugins/wp-editor/It is a very useful plugin which allows you to edit files inside all of the theme folders:
WP Editor Plugin

2. Navigate to Admin Panel -> Left Menu -> Appearance -> Theme Editor

3. Open theme/inc/customizer.php

Search for this code:

// Add Slide Image
tishonator_customizer_add_image_control( $wp_customize, 'tishonator_slider_settings',
'tishonator_slider_slide'.$slideNumber.'_image', sprintf( __( 'Slide #%s Background Image', 'tishonator' ), $slideNumber ),
array_key_exists('tishonator_slider_slide'.$slideNumber.'_image', $defaultVals) ? $defaultVals['tishonator_slider_slide'.$slideNumber.'_image'] : null );

Then ABOVE it Insert:


// Add Slide Image for Mobile Resolution
tishonator_customizer_add_image_control( $wp_customize, 'tishonator_slider_settings',
'tishonator_slider_slide'.$slideNumber.'_mobileimage', sprintf( __( 'Slide #%s Background Image (Mobile Resolution)', 'tishonator' ), $slideNumber ),
array_key_exists('tishonator_slider_slide'.$slideNumber.'_image', $defaultVals) ? $defaultVals['tishonator_slider_slide'.$slideNumber.'_image'] : null );

Customizer: Add Mobile Slide Image

4. Open theme/inc/utilities.php Search for this text:


$slideImage = tishonator_read_customizer_option('tishonator_slider_slide'.$i.'_image', ($i <= 5) ? get_stylesheet_directory_uri().'/images/slider/slides/'.$i.'.jpg' : '' );

 

Then REPLACE it with:


$slideImage = '';
if ( preg_match("/(android|avantgo|blackberry|bolt|boost|cricket|docomo|fone|hiptop|mini|mobi|palm|phone|pie|tablet|up\.browser|up\.link|webos|wos)/i", $_SERVER["HTTP_USER_AGENT"]) ) {

$slideImage = tishonator_read_customizer_option('tishonator_slider_slide'.$i.'_mobileimage',
				($i <= 5) ? get_stylesheet_directory_uri().'/images/slider/slides/'.$i.'.jpg' : '' );
} else {
    $slideImage = tishonator_read_customizer_option('tishonator_slider_slide'.$i.'_image',
    			($i <= 5) ? get_stylesheet_directory_uri().'/images/slider/slides/'.$i.'.jpg' : '' );
}

Utilities: Add Mobile Slide Image

5. That's All.

Now, Navigate to Admin Panel -> Left Menu -> Appearance -> Customize -> Slider Section.

Then Change the image for 'Slide # Background Image (Mobile Resolution)':Customizer: Update Mobile Slide Image

 

Note: The above change include server side check if user browser is from Mobile device. So, the Solution will work ONLY if there is NO cache enabled on the site. If you use some caching plugin, you should disable caching of the homepage.

About the Author

Tihomir Ivanov is a WordPress web developer, founder of tishonator.com, a fan of Linux and Open Source, a gym enthusiast, a vegan, a fan of minimalism, good movies and books :)

Leave a Reply