Guide: Customising the slider

[mizzinc]

Hey everyone,

So I finally required a customised slider which has all the default options, except for dropping ‘Image Link’ and using a ‘Button’ for a full-width image slide.

This is how I approached it and hope it helps anyone else in the community needing to do this. Please, correct or improve anything below.

Background
In the Slider Manager it took a bit of digging to discover the ‘Button’ option is hidden using JS located in ‘slider.min.js’. On the front-end the button is not displayed via the ‘themeblvd_slide_has_element’ function which is called inside the ‘themeblvd_get_slide_content’ function.

Therefore we need to remove the standard slider, replace the amended ‘slider.min.js’ file and add our own custom slider all from our child-theme.

Remove Slider
Really simple, use the id of the slider.

themeblvd_remove_slider( 'standard' );

Add Slider
Jason has an amazing Slider API. Read the article here: http://dev.themeblvd.com/tutorial/add-custom-slider/

Basically we are re-creating the default slider minus a few options. You can find this in ‘class-tb-sliders-api.php’ in the theme-blvd-sliders plugin folder. In my example I have also dropped the option to display a Play/Pause button and ‘Custom Slide’ type.

// Slide Types
	$slide_types = array( 'image', 'video' );
	 
	// Media Positions
       $media_positions = array( 'full' => 'slider-large', 'align-left' => 'slider-staged', 'align-right' => 'slider-staged' );
	 
	// Slide Elements
	$slide_elements = array(
		'headline',
		'description',
		'button'
	);
	 
	// Options
	$options = array(
		array(
			'type'		=> 'subgroup_start',
			'class'		=> 'show-hide-toggle'
		),
		array(
			'id'		=> 'fx',
			'name'		=> __( 'How to transition between slides?', 'themeblvd_sliders' ),
			'std'		=> 'fade',
			'type'		=> 'select',
			'options'	=> array(
				'fade' 	=> 'Fade',
				'slide'	=> 'Slide'
			),
			'class' 	=> 'trigger'
		),
		array(
			'id'		=> 'smoothheight',
			'name'		=> __( 'Allow height to adjust on each transition?', 'themeblvd_sliders' ),
			'std'		=> 'false',
			'type'		=> 'select',
			'options'	=> array(
				'true' 	=> 'Yes, enable smoothHeight.',
				'false'	=> 'No, display as height of tallest slide.'
			),
			'class'		=> 'hide receiver receiver-slide'
		),
		array(
			'type'		=> 'subgroup_end'
		),
		array(
			'id'		=> 'timeout',
			'name' 		=> __( 'Seconds between each transition?', 'themeblvd_sliders' ),
			'std'		=> '5',
			'type'		=> 'text'
		),
		array(
			'id'		=> 'nav_standard',
			'name'		=> __( 'Show standard slideshow navigation?', 'themeblvd_sliders' ),
			'std'		=> '1',
			'type'		=> 'select',
			'options'	=> array(
				'1'	=> __( 'Yes, show navigation.', 'themeblvd_sliders' ),
				'0'	=> __( 'No, don\'t show it.', 'themeblvd_sliders' )
			)
		),
		array(
			'id'		=> 'nav_arrows',
			'name'		=> __( 'Show next/prev arrows?', 'themeblvd_sliders' ),
			'std'		=> '1',
			'type'		=> 'select',
			'options'	=> array(
				'1'	=> __( 'Yes, show arrows.', 'themeblvd_sliders' ),
				'0'	=> __( 'No, don\'t show them.', 'themeblvd_sliders' )
			)
		),
		array(
			'id'		=> 'pause_on_hover',
			'name'		=> __( 'Enable pause on hover?', 'themeblvd_sliders' ),
			'std'		=> 'pause_on',
			'type'		=> 'select',
			'options'	=> array(
				'pause_on'		=> __( 'Pause on hover only.', 'themeblvd_sliders' ),
				'pause_on_off'	=> __( 'Pause on hover and resume when hovering off.', 'themeblvd_sliders' ),
				'disable'		=> __( 'No, disable this all together.', 'themeblvd_sliders' )
			)
		),
		array(
			'id'		=> 'mobile_fallback',
			'name'		=> __( 'How to display on mobile devices?', 'themeblvd_sliders' ),
			'std'		=> 'full_list',
			'type'		=> 'radio',
			'options'	=> array(
				'full_list'		=> __( 'List out slides for a more user-friendly mobile experience.', 'themeblvd_sliders' ),
				'first_slide'	=> __( 'Show first slide only for a more simple mobile experience.', 'themeblvd_sliders' ),
				'display'		=> __( 'Attempt to show full animated slider on mobile devices.', 'themeblvd_sliders' )
			)
		)
	);
	 
	// Add Slider type
	themeblvd_add_slider( 'standard_slider', 'Slider', $slide_types, $media_positions, $slide_elements, $options, 'display_standard_slider' );

Replace Slider JS
So we just deregister the script and replace with our own amended version from our child theme.

if( is_admin() ) {
add_action( 'wp_print_scripts', 'my_custom_admin_scripts', 100 );							// Custom Scripts for Admin
function my_custom_admin_scripts() {
	// Deregister Scripts
	$handles = array( 'themeblvd_sliders' );
    foreach($handles as $handle){
        wp_deregister_script( $handle);
    }
	// Enqeue Scripts
	wp_enqueue_script( 'my_sliders', get_stylesheet_directory_uri() . '/framework/admin/assets/js/sliders.min.js' );	
	// Localize scripts
	wp_localize_script( 'my_sliders', 'themeblvd', themeblvd_get_admin_locals( 'js' ) );
	
} 
}

Display Slider
Now that we have removed and added the slider we now need to display it on the front end. Again, copy/paste from ‘themeblvd_standard_slider_default’ in ‘sliders-display.php’

Only thing to take note of, I have replaced ‘themeblvd_slide_content’ with a new function ‘my_slide_content’. This addresses including the ‘Button’.

/**
	 * Display slider
	*/
	function display_standard_slider( $slider, $settings, $slides  ) {
		 
		// Extend slides
		$slides = apply_filters( 'themeblvd_standard_slides', $slides, $slider, $settings );
	
		// With some different user options and ways this function
		// can be utilized, there are going to be some inconsitancy
		// with booleans. Let's fix that.
		if ( $settings['nav_standard'] === false || $settings['nav_standard'] == '0' || $settings['nav_standard'] == 'false' ) {
			$settings['nav_standard'] = false;
		}
	
		if ( $settings['nav_arrows'] === false || $settings['nav_arrows'] == '0' || $settings['nav_arrows'] == 'false' ) {
			$settings['nav_arrows'] = false;
		}
	
		if ( $settings['pause_play'] === false || $settings['pause_play'] == '0' || $settings['pause_play'] == 'false' ) {
			$settings['pause_play'] = false;
		}
	
		// Configure additional CSS classes
		$classes = themeblvd_get_classes( 'slider_standard', true );
		$classes .= $settings['nav_standard'] ? ' show-nav_standard' : ' hide-nav_standard';
		$classes .= $settings['nav_arrows'] ? ' show-nav_arrows' : ' hide-nav_arrows';
		$classes .= $settings['pause_play'] ? ' show-pause_play' : ' hide-pause_play';
		if ( ! $settings['nav_standard'] && ! $settings['nav_arrows'] ) {
			$classes .= ' hide-full_nav';
		}
		$classes = apply_filters( 'themeblvd_slider_wrapper_classes', $classes );
	
		// Hide on mobile?
		$hide = '';
		if ( isset( $settings['mobile_fallback'] ) ) {
			if ( $settings['mobile_fallback'] == 'full_list' || $settings['mobile_fallback'] == 'first_slide' ) {
				$hide = true;
			}
		}
	
		// Start output
		do_action( 'themeblvd_standard_slider_plugin_js', $slider, $settings );
		?>
		<div id="tb-slider-<?php echo $slider; ?>" class="slider-wrapper standard-slider-wrapper<?php if ($hide) echo ' slider_has_mobile_fallback';?>">
			<div class="slider-inner<?php echo $classes; ?>">
				<div class="slides-wrapper slides-wrapper-<?php echo $slider; ?>">
					<div class="slides-inner">
						<?php if ( ! empty( $slides ) ) : ?>
							<div class="slider standard-slider flexslider">
								<div class="tb-loader"></div>
								<ul class="slides">
									<?php foreach ( $slides as $slide ) : ?>
										<?php $media_atts = themeblvd_sliders_get_media_atts( $slider, $slide, $settings ); ?>
										<li class="slide tight <?php echo themeblvd_sliders_get_slide_classes( $slider, $slide, $media_atts ); ?>">
											<div class="slide-body">
												<div class="grid-protection clearfix">
														<?php my_slide_content( $slider, $slide, $settings ); ?>
														<div class="media <?php echo $slide['slide_type']; if ($slide['position'] != 'full') echo ' grid_fifth_3'; ?>">
															<div class="media-inner">
																<?php themeblvd_slide_media( $media_atts, $settings ); ?>
															</div><!-- .media-inner (end) -->
														</div><!-- .media (end) -->
												</div><!-- .grid-protection (end) -->
											</div><!-- .slide-body (end) -->
										</li>
									<?php endforeach; ?>
								</ul>
							</div><!-- .slider (end) -->
						<?php endif; ?>
					</div><!-- .slides-inner (end) -->
				</div><!-- .slides-wrapper (end) -->
			</div><!-- .slider-inner (end) -->
			<div class="design-1"></div>
			<div class="design-2"></div>
			<div class="design-3"></div>
			<div class="design-4"></div>
		</div><!-- .slider-wrapper (end) -->
		<?php
		// Display fallback if necessary
		if ( isset( $settings['mobile_fallback'] ) ) {
			if ( $settings['mobile_fallback'] == 'full_list' || $settings['mobile_fallback'] == 'first_slide' ) {
				do_action( 'themeblvd_slider_fallback', $slider, $slides, $settings['mobile_fallback'], $settings );
			}
		}
		 
	}

Cool, we just need to create our new functions ‘my_slide_content’ and ‘my_slide_has_element’.

function my_slide_content( $slider, $slide, $settings, $slider_type = 'standard' ){
		echo my_get_slide_content( $slider, $slide, $settings, $slider_type );
	}
	
	function my_get_slide_content( $slider, $slide, $settings, $slider_type = 'standard' ){
	
		$output = '';
	
		if ( themeblvd_slide_has_element( 'headline', $slide ) ||
			themeblvd_slide_has_element( 'description', $slide ) ||
			themeblvd_slide_has_element( 'button', $slide ) ) {
	
			// Setup markup to wrap content area.
			$wrap_class = 'content';
			if ( $slide['position'] != 'full' ) {
				$wrap_class .= ' grid_fifth_2';
			}
	
			$wrap_fmt = apply_filters( 'themeblvd_slide_content_wrap', '<div class="'.$wrap_class.'"><div class="content-inner">%s</div></div>' );
	
			$content = '';
	
			// Headline
			if ( themeblvd_slide_has_element( 'headline', $slide ) ) {
				$content .= sprintf( '<div class="slide-title"><span>%s</span></div>', apply_filters( 'themeblvd_sliders_headline_text', stripslashes( $slide['elements']['headline'] ) ) );
			}
	
			// Description + Button
			if ( themeblvd_slide_has_element( 'description', $slide ) || themeblvd_slide_has_element( 'button', $slide ) ) {
	
				$desc = '';
	
				// Description text
				if ( themeblvd_slide_has_element( 'description', $slide ) ) {
	
					$text = apply_filters( 'themeblvd_sliders_desc_text', stripslashes( $slide['elements']['description'] ) );
	
					if ( apply_filters( 'themeblvd_'.$slider_type.'_slider_desc', true, $slide, $slider, $settings ) ) {
						$text = apply_filters( 'themeblvd_the_content', $text );
					}
	
					$desc .= sprintf( '<div class="slide-description-text">%s</div>', $text );
	
				}
	
				// Button
				if ( my_slide_has_element( 'button', $slide ) ) {
	
					$button_atts = apply_filters( 'themeblvd_'.$slider_type.'_slider_button', array(
						'text' 		=> apply_filters( 'themeblvd_sliders_button_text', $slide['elements']['button']['text'] ),
						'url'		=> $slide['elements']['button']['url'],
						'color'		=> 'white btn-lg',
						'target'	=> $slide['elements']['button']['target'],
						'size'		=> 'medium'
	
					), $slide, $slider, $settings, $slider_type );
	
					$desc .= sprintf( '<div class="slide-description-button">%s</div>', themeblvd_button( stripslashes( $button_atts['text'] ), $button_atts['url'], $button_atts['color'], $button_atts['target'], $button_atts['size'] ) );
	
				}
	
				$content .= sprintf( '<div class="slide-description"><div class="slide-description-inner">%s</div></div>', $desc );
			}
	
			// Wrap and finalize content
			$output = sprintf( $wrap_fmt, $content );
		}
	
		return apply_filters( 'themeblvd_slide_content', $output, $slider, $slide, $settings, $slider_type );
	}

function my_slide_has_element( $element, $slide ) {
		$include = false;
		if ( isset( $slide['elements']['include'] ) && is_array( $slide['elements']['include'] ) ) {
			if ( in_array( $element, $slide['elements']['include'] ) ) {
				if ( ! empty( $slide['elements'][$element] ) ) {
					$include = true;
				}
			}
		}
		return $include;
	}

If you are like me and like to keep things nice and tidy, you can put this all into one file and just include it in your functions.php file.

I also have a ‘Feature Products Grid Slider’ (woocommerce) Layout Builder element that I will hopefully share with you all soon.

– Michael

Topic

[mizzinc]

Update to Replacing Slider JS. Need to add some conditions to only load the script when managing sliders.

if( is_admin() ) {
add_action( 'wp_print_scripts', 'my_custom_admin_scripts', 100 );
function my_custom_admin_scripts() {
global $pagenow;
if ( $pagenow=='admin.php' && $_GET['page'] == 'themeblvd_sliders' ) {	
	// Deregister Scripts
	$handles = array( 'themeblvd_sliders' );
    foreach($handles as $handle){
        wp_deregister_script( $handle);
    }
	// Enqeue Scripts
	wp_enqueue_script( 'my_sliders', get_stylesheet_directory_uri() . '/framework/admin/assets/js/sliders.min.js' );	
	// Localize scripts
	wp_localize_script( 'my_sliders', 'themeblvd', themeblvd_get_admin_locals( 'js' ) );
}
} 
}

[srumery]

@mizzinc, I recently modified the slider content for what sounded like a very similar need. This might not be the same but it is worth a look because it is a really cool way to filter slide content using the “themeblvd_standard_slides” hook.

I have a Gist called “Change Jump Start Standard Slider image link to a button”.
https://gist.github.com/rumspeed/403c7bd5170b4e868d3a

There is a bit of code in the actual function that I am using that is not in the Gist, but noteworthy. I have added a theme option checkbox to toggle the button on and off.
checked = replace the slide image link with the new button
not checked = do nothing (keep the existing slide image link; don’t use a button)

Please have a look and let me know what you think.

[mizzinc]

@srumery

Wow! As easy as that. What an excellent filter for ‘themeblvd_standard_slides’. Thank you very much for sharing that with us.

The theme option to toggle the button on/off would be handy as well.

Excellent work and greatly appreciated.

[Author]

Replies