Simple Responsive Slider For Sliding Posts/Pages/Whatever Using the WP Rest API

I have a client that wanted their website to be primarily just the home page.  They also want mobile and tablet users to just be able to swipe through the pages.  I found some potential solutions but they were mostly very large, overly complex plugins for a simple need.  I’ve been wanting to dive into the WP API and I found this to be a great opportunity.  This is VERY basic usage of the WP API, but hey, I’m just getting started.  And please read to the bottom if you are knowledgeable of the WP API as I’m a bit confused on why something I tried did not work.

So here is my simple solution for the sliding pages (works for posts and other post_types as well).

JSSOR

First we need to include a slider library.  I went with JSSOR because it works great with loads of features and is easy to get started quickly.

http://www.jssor.com/development/

I enqueue this in my themes functions.php file

function theme_scripts() {
    wp_enqueue_script( 'jssor', get_template_directory_uri() . '/js/jssor.slider.mini.js', array() );
}
add_action( 'wp_enqueue_scripts', 'theme_scripts' );

build_sliders

Then we have our function for building the slider.  This can be tweaked to your liking, I wanted to have title, featured image and content.  We take in the slider id and height as parameters and we also take in the full url for the WP API request.  We format around the loop through our results with the required JSSOR slider containers.  The jQuery at the bottom is used to make the slider responsive.

/**
 * Build sliders
 */
 function build_sliders( $slider_id, $slider_height, $api_request ) {
 
	?>
	<div id="<?php echo $slider_id; ?>_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: <?php echo $slider_height; ?>;">
		<!-- Slides Container -->
		<div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 600px; height: <?php echo $slider_height; ?>;">
	<?php
 
	//rest api
	$slides = json_decode( file_get_contents( $api_request ), true );
	foreach( $slides as $slide ) {
		echo '<div>';
		echo '<h1>' . $slide['title'] . '<h1>';
		if( $slide['featured_image'] ) {
			$thumbnail_id = get_post_thumbnail_id ( $slide['ID'] );
			$thumbnail = wp_get_attachment_image_src( $thumbnail_id, 'full' );
			echo '<p><img src="' . $thumbnail[0] . '" /></p>';
			echo $slide['content'];
		}
		echo '</div>';
	}
 
	?>
		<!-- Trigger -->
		<script>jssor_<?php echo $slider_id; ?>_starter('<?php echo $slider_id; ?>_container');</script>
		</div>
	</div>
	<script>
		jQuery(document).ready(function ($) {
			var options = { $AutoPlay: true, $Idle: 7000 };           
			var jssor_<?php echo $slider_id; ?> = new $JssorSlider$('<?php echo $slider_id; ?>_container', options);
 
			//responsive code begin
			//you can remove responsive code if you don't want the slider scales
			//while window resizing
			function ScaleSlider() {
				var parentWidth = $('#<?php echo $slider_id; ?>_container').parent().width();
				if (parentWidth) {
					jssor_<?php echo $slider_id; ?>.$ScaleWidth(parentWidth);
				}
				else
					window.setTimeout(ScaleSlider, 30);
			}
			//Scale slider after document ready
			ScaleSlider();
 
			//Scale slider while window load/resize/orientationchange.
			$(window).bind("load", ScaleSlider);
			$(window).bind("resize", ScaleSlider);
			$(window).bind("orientationchange", ScaleSlider);
			//responsive code end
		});
	</script>
 
	<?php
 }

Finally we make a simple call to our function.  I placed this in the index.php file in my theme. It could easily be built into a plugin/shortcode.

<?php build_sliders( 'slider1', '1200px', 'http://patrond.com/wp-json/pages?filter[category_name]=homeslide-new' ); ?>

I wanted pages from a specific page category (I used a plugin to add category options to pages: https://wordpress.org/plugins/add-category-to-pages/).

WP API Question

When first building this out I wanted to add the featured image src to the WP API response, I found a site through google that explains how to do it.  But for some reason I did not see any data labeled ‘featured_image_thumbnail_url’ when testing my api calls.  What gives? I used the code below in my functions.php file.

 function my_rest_prepare_post ($data, $post, $request ) {
 
	$data = $data->data;
 
	$thumbnail_id = get_post_thumbnail_id ( $post->ID );
	$thumbnail = wp_get_attachment_image_src( $thumbnail_id, 'full' );
	$_data['featured_image_thumbnail_url'] = $thumbnail[0];
	$data->data = $_data;
 
	return $data;
}
add_filter( 'rest_prepare_post', 'my_rest_prepare_post', 10, 3 );

2 thoughts on “Simple Responsive Slider For Sliding Posts/Pages/Whatever Using the WP Rest API”

  1. No need to publish this comment but you have some pretty serious security holes going on here. First, you’re directly echoing id and other attributes without esc_attr(). Anything executing PHP with that could easily push out some nasty code to the front end.

    Second, file_get_contents is BAD. use wp_remote_get() instead and parse from there. Finally, your JSON itself is echoing variables that could be broken and exploited fairly easily. I would move it all to an external file and use wp_localize_script after wp_enqueue_script to provide the dynamic data to the JS without the problems of echoing it inline. Here’s my own slides on the localization topic (https://www.chriswiegman.com/2013/09/localizing-wordpress-slides-wordpress-austin-advanced-meetup/) . Luke Woodward (https://lkwdwrd.com) has some great stuff on more efficient linking of JS and WordPress as well.

    1. Of course I’m gonna publish this, as usually you’ve taught me a ton in just two paragraphs! Hopefully someone else stumbles on this blog and learns from this comment too.

Leave a Reply

Your email address will not be published. Required fields are marked *