Random Slider

  • manakuke

    (@manakuke)


    9 years, 9 months ago

    I was wanting an option to allow the home page slider to show the posts/pages in random order. I’m no expert, but was able to cobble together the following which allows for random slider display, as well as an option to toggle the randomness on and off in the Appearance settings. There is probably a more elegant way to do this, but so far this has been working for me. Probably could be extended to allow an option to pull content from certain post categories, all pages, etc. Hopefully this is not to sloppy to be of use to someone else.

    Step 1 – Create a Child Theme
    You need to do this in order to edit the functions.php and plugin to the cleanretina_featured_post_slider() function.

    I used the Orbisius Child Theme Creator plugin as a quick way to do this. Using the plugin, you will need to create the functions.php file.

    Step 2 – Edit Slider Function
    I copied the cleanretina_featured_post_slider() function from library/structure/header-extensions.php, then commented out/removed the transient API (leaving it in would not allow for a random slide display on reload). To perminatnly set the slider to random, you would then only need to edit the orderby: 'orderby' => 'post__in', to 'orderby' => 'rand',. But I wanted to be able to toggle the feature without editing the function each time.

    Step 3 – Create Custom Appearance Settings Page
    So I created a new settings page under the Appearance menu based on this article: How to Create a Settings Page for Your WordPress Theme. I created a function to build the new settings page with its accompanying add)action, etc.

    <php?
// Adapted from     http://clicknathan.com/web-design/create-wordpress-theme-settings-page/

function build_options_page() { ?>
<div id="theme-options-wrap">
	<div class="icon32" id="icon-tools"> <br /> </div>
	<h2>Additional Slider Settings</h2>
	<p>Update various settings throughout your website.</p>
	<form method="post" action="options.php" enctype="multipart/form-data">
		<?php settings_fields('theme_options'); ?>
		<?php do_settings_sections(__FILE__); ?>
		<p class="submit">
			<input name="Submit" type="submit" class="button-primary" value="<?php esc_attr_e('Save Changes'); ?>" />
		</p>
	</form>
</div>
<?php }
add_action('admin_init', 'register_and_build_fields');
function register_and_build_fields() {
	register_setting('theme_options', 'theme_options', 'validate_setting');
	add_settings_section('homepage_settings', 'Homepage Settings', 'section_homepage', __FILE__);
	function section_homepage() {}
	add_settings_field('sliderRandomCheckbox', 'Disable Random Slider', 'sliderRandomCheckbox_setting', __FILE__, 'homepage_settings');

}
function validate_setting($theme_options) {
	return $theme_options;
}
function sliderRandomCheckbox_setting() {
	$options = get_option('theme_options');
/*echo "<input name='theme_options[sliderRandomCheckbox_setting]' type='checkbox' value='1' ";
echo checked( '1', $options['sliderRandomCheckbox_setting'] );
echo  "  />";*/

echo "<label><input type='radio' name='theme_options[sliderRandomCheckbox_setting]' value='Yes' id='sliderRandomRadio_0' ";
echo checked( 'Yes', $options['sliderRandomCheckbox_setting'] );
echo  "  >Random</label><br>";

echo "<label><input type='radio' name='theme_options[sliderRandomCheckbox_setting]' value='No' id='sliderRandomRadio_1' ";
echo checked( 'No', $options['sliderRandomCheckbox_setting'] );
echo  "  >Set Order (default</label>";
}

add_action('admin_menu', 'theme_options_page');
function theme_options_page() {
add_submenu_page('themes.php','Theme Slider Random Settings', 'Theme Slider Random Settings', 'administrator', __FILE__, 'build_options_page');
}
?>

    Step 4 – Add Settings Check to Slider Function
    After creating the new Appearance settings page, I needed to refer to the saved settings back in the original cleanretina_featured_post_slider() function. I ran into a bit of a problem until I realized there was a variable naming conflict. So make sure when calling your theme options that you use a different variable than “$options” as the Clean Retina theme uses that to pull its default settings. Then you replace the default “orderby” with a variable.

    // Check Additional Theme Options
$themeOptions = get_option('theme_options');
if( $themeOptions['sliderRandomCheckbox_setting'] == "No") {
  $randomSlider = 'post__in';
} elseif( $themeOptions['sliderRandomCheckbox_setting'] == "Yes") {
 $randomSlider = 'rand';
} else {
  $randomSlider = 'post__in';
}

		$cleanretina_featured_post_slider .= '
		<section class="featured-slider"><div class="slider-wrap"><div class="slider-cycle">';
		remove_all_filters('posts_orderby');
		$query_string = "";
			$get_featured_posts = new WP_Query( array(
				'posts_per_page' 			=> $options[ 'slider_quantity' ],
				'post_type'					=> array( 'post', 'page' ),
				'post__in'		 			=> $options[ 'featured_post_slider' ],
				'orderby' 		 			=> $randomSlider,
				'ignore_sticky_posts' 	=> 1 						// ignore sticky posts
			));

    A smarter way might be to add or override the default settings so it is all in one place. A project for another time perhaps.

    Completed Code
    As found in my child theme’s functions.php

    <?php
// Adapted from theme file library/structure/header-extensions.php
function cleanretina_featured_post_slider() {
	global $post;

	global $cleanretina_theme_options_settings;
   $options = $cleanretina_theme_options_settings;

	$cleanretina_featured_post_slider = '';
//	if( ( !$cleanretina_featured_post_slider = get_transient( 'cleanretina_featured_post_slider' ) ) && !empty( $options[ 'featured_post_slider' ] ) ) {
	if( !empty( $options[ 'featured_post_slider' ] ) ) {		

// Check Additional Theme Options
$themeOptions = get_option('theme_options');
if( $themeOptions['sliderRandomCheckbox_setting'] == "No") {
  $randomSlider = 'post__in';
} elseif( $themeOptions['sliderRandomCheckbox_setting'] == "Yes") {
 $randomSlider = 'rand';
} else {
  $randomSlider = 'post__in';
}

		$cleanretina_featured_post_slider .= '
		<section class="featured-slider"><div class="slider-wrap"><div class="slider-cycle">';
		remove_all_filters('posts_orderby');
		$query_string = "";
			$get_featured_posts = new WP_Query( array(
				'posts_per_page' 			=> $options[ 'slider_quantity' ],
				'post_type'					=> array( 'post', 'page' ),
				'post__in'		 			=> $options[ 'featured_post_slider' ],
				'orderby' 		 			=> $randomSlider,
				'ignore_sticky_posts' 	=> 1 						// ignore sticky posts
			));	

			$i=0; while ( $get_featured_posts->have_posts()) : $get_featured_posts->the_post(); $i++;

				$title_attribute = apply_filters( 'the_title', get_the_title( $post->ID ) );
				$excerpt = get_the_excerpt();
				if ( 1 == $i ) { $classes = "slides displayblock"; } else { $classes = "slides displaynone"; }
				$cleanretina_featured_post_slider .= '
				<div class="'.$classes.'">';
						if( has_post_thumbnail() ) {

							$cleanretina_featured_post_slider .= '<figure><a href="' . get_permalink() . '" title="'.the_title('','',false).'">';

							$cleanretina_featured_post_slider .= get_the_post_thumbnail( $post->ID, 'slider', array( 'title' => esc_attr( $title_attribute ), 'alt' => esc_attr( $title_attribute ), 'class'	=> 'pngfix' ) ).'</a></figure>';
						}
						if( $title_attribute != '' || $excerpt !='' ) {
						$cleanretina_featured_post_slider .= '
							<article class="featured-text">';
							if( $title_attribute !='' ) {
									$cleanretina_featured_post_slider .= the_title( '<span>','</span>', false );
								}
							if( $excerpt !='' ) {
								$cleanretina_featured_post_slider .= $excerpt.'<a href="' . get_permalink() . '" title="'.the_title('','',false).'">'.' '.__( 'Continue Reading', 'cleanretina' ).'</a>';
							}
						$cleanretina_featured_post_slider .= '
							</article><!-- .featured-text -->';
						}
				$cleanretina_featured_post_slider .= '
				</div><!-- .slides -->';
			endwhile; wp_reset_query();
		$cleanretina_featured_post_slider .= '</div></div>
		<nav id="controllers" class="clearfix">
		</nav><!-- #controllers --></section><!-- .featured-slider -->';

//	set_transient( 'cleanretina_featured_post_slider', $cleanretina_featured_post_slider, 86940 );
	}
	echo $cleanretina_featured_post_slider;
}

// END Updated Slider Code *************************************************

//START Theme Option Add-on  ***************************************************
// Adapted from     http://clicknathan.com/web-design/create-wordpress-theme-settings-page/

function build_options_page() { ?>
<div id="theme-options-wrap">
	<div class="icon32" id="icon-tools"> <br /> </div>
	<h2>Additional Slider Settings</h2>
	<p>Update various settings throughout your website.</p>
	<form method="post" action="options.php" enctype="multipart/form-data">
		<?php settings_fields('theme_options'); ?>
		<?php do_settings_sections(__FILE__); ?>
		<p class="submit">
			<input name="Submit" type="submit" class="button-primary" value="<?php esc_attr_e('Save Changes'); ?>" />
		</p>
	</form>
</div>
<?php }
add_action('admin_init', 'register_and_build_fields');
function register_and_build_fields() {
	register_setting('theme_options', 'theme_options', 'validate_setting');
	add_settings_section('homepage_settings', 'Homepage Settings', 'section_homepage', __FILE__);
	function section_homepage() {}
	add_settings_field('sliderRandomCheckbox', 'Disable Random Slider', 'sliderRandomCheckbox_setting', __FILE__, 'homepage_settings');

}
function validate_setting($theme_options) {
	return $theme_options;
}
function sliderRandomCheckbox_setting() {
	$options = get_option('theme_options');
/*echo "<input name='theme_options[sliderRandomCheckbox_setting]' type='checkbox' value='1' ";
echo checked( '1', $options['sliderRandomCheckbox_setting'] );
echo  "  />";*/

echo "<label><input type='radio' name='theme_options[sliderRandomCheckbox_setting]' value='Yes' id='sliderRandomRadio_0' ";
echo checked( 'Yes', $options['sliderRandomCheckbox_setting'] );
echo  "  >Random</label><br>";

echo "<label><input type='radio' name='theme_options[sliderRandomCheckbox_setting]' value='No' id='sliderRandomRadio_1' ";
echo checked( 'No', $options['sliderRandomCheckbox_setting'] );
echo  "  >Set Order (default</label>";
}

add_action('admin_menu', 'theme_options_page');
function theme_options_page() {
add_submenu_page('themes.php','Theme Slider Random Settings', 'Theme Slider Random Settings', 'administrator', __FILE__, 'build_options_page');
}

?>

  • The topic ‘Random Slider’ is closed to new replies.