Random images using Nivo Slider for WordPress

I like to keep things simple. When it comes to designing a website and managing it, I usely know quite precisely what I want and what I don’t, and for this new version of CaerCam, I wanted a slideshow I can use really easily, meaning that I want to be able to manage my featured pictures however I want without using my FTP access. There’s a lot of great WordPress plugins that will do that, but I found Nivo Slider for WordPress to be the simplest and lightest to meet my needs; it lacks only one tiny little thing: you can’t randomize the pictures you show. Well, you couldn’t, until just now.

Add a « random order » option to Nivo Slider for WordPress

This is actually a very basic hack, just a few lines of code will be needed and we’ll have to modify only two files: nivoslider4wp-show.php and nivoslider4wp-option.php. Let’s look at it. First thing, we need to add the option; I put it right after the control nav option in the Nivo Slider Setting section, but you can place it wherever you wish. Edit your nivoslider4wp-option.php:

After

if (isset($_POST['options'])) {

Add this line:

update_option('nivoslider4wp_randomImg', $_POST['nivoslider4wp_randomImg']); // Random image order

Now we have to add some field in the option form, a basic enable/disable radio button. After

			<p>
			<?php _e('Show the navigation bullets ','nivoslider4wp'); ?>:
				<input type="radio" name="nivoslider4wp_controlNav" class="radiocheck" id="nivoslider4wp_controlNav" value="true" <?php if(get_option('nivoslider4wp_controlNav') == 'true'){echo 'checked';}?> /><?php _e('Enable','nivoslider4wp'); ?>
				<input type="radio" name="nivoslider4wp_controlNav" class="radiocheck" id="nivoslider4wp_controlNav" value="false" <?php if(get_option('nivoslider4wp_controlNav') == 'false'){echo 'checked';}?> /><?php _e('Disable','nivoslider4wp'); ?>
			</p>

Add these lines:

			<!-- Random order start -->
			<p>
			Display images in random order :
				<input type="radio" name="nivoslider4wp_randomImg" class="radiocheck" id="nivoslider4wp_randomImg" value="true" <?php if(get_option('nivoslider4wp_randomImg') == 'true'){echo 'checked';}?> /><?php _e('Enable','nivoslider4wp'); ?>
				<input type="radio" name="nivoslider4wp_randomImg" class="radiocheck" id="nivoslider4wp_randomImg" value="false" <?php if(get_option('nivoslider4wp_randomImg') == 'false'){echo 'checked';}?> /><?php _e('Disable','nivoslider4wp'); ?>
			</p>
			<!-- Random order end -->

Yeah, I didn’t bother with internationalization, my bad.

That’s it! Now we edit nivoslider4wp-show.php. We just need to test if our newly defined option is active and, if so, randomize the images. That we do using Php shuffle function to… Shuffle the array containing the images:

After

<?php $items = $wpdb->get_results("SELECT nivoslider4wp_id,nivoslider4wp_type,nivoslider4wp_text_headline,nivoslider4wp_image_link,nivoslider4wp_image_status FROM {$wpdb->prefix}nivoslider4wp WHERE nivoslider4wp_image_status = 1 OR nivoslider4wp_image_status IS NULL ORDER BY nivoslider4wp_order,nivoslider4wp_id"); ?>

Add this line:

<?php if ( get_option('nivoslider4wp_randomImg') == 'true' ) shuffle( $items ); ?>

And we’re done. Just go to the Nivo Slider for WordPress options page and toggle the option to ‘enable’.

London Eye by Fernando García