Cheesetoast

Brain Food for Web Developers

A new 'Slides' menu has been added to the Wordpress admin panel

Add a Responsive Slideshow to your WordPress Theme

I’ll walk through how you can add a JQuery responsive slideshow to both the front end of your WordPress theme and to the admin area, so users can add their own slides.

An instance of the slideshow as viewed from a tablet.

The Slideshow Files

In searching for a slideshow I wanted to find one that not only looked great but met the following criteria:

  • I wanted it to be open source.
  • It had to be responsive so that it worked well with mobile devices.
  • I wanted to be able to add HTML text which overlaid the images (and remained responsive).
  • It needed to come with options so that I could customize the timing and effects.

Finding a slideshow the delivered on all of these counts took me a while but I eventually found what I was looking for with the excellent responsive slideshow from Codrops. Codrops not only provides the necessary download files but includes a step by step walk through for all the HTML markup, CSS and javascript code.

Include the Files in Your Theme Header

Download the slideshow files and add them to your WordPress theme folder. If you want to create a child theme but aren’t sure how, take a look at the WordPress codex section on child themes.

Now that you have the slideshow files in your folder you need to include them into your theme. There are a couple of ways to do this. One way is to manually add the <script src=”…”></script> code to your header file, but the recommended way to is use the WordPress functions wp_enqueue_script() & wp_enqueue_style().

For directions on how to do this read my previous post on how to safely include scripts in the WordPress header. Make sure to include all the necessary javascript and CSS files that come with the slideshow.

Adding Slides to the WordPress Admin Panel

To make it easy for users to add their own slides we’ll create a new post type in WordPress. To do this we use the register_post_type() function in our functions.php file (located in [Wordpress root] > wp-content > themes > [current theme] > functions.php).

Add the following code:

// Creates Slides post type
register_post_type('slides', array(
'label' => 'Slides',
'public' => true,
'show_ui' => true,
'capability_type' => 'post',
'hierarchical' => false,
'rewrite' => array('slug' => 'slides'),
'query_var' => true,
'supports' => array(
'title',
'editor',
'excerpt',
'revisions',
'thumbnail',
'author',
'page-attributes',)
) );

A new 'Slides' menu has been added to the WordPress admin panelOnce created, this new post type will show up in the admin menu and will act separately from regular posts (they won’t appear in your blog or your RSS feed, etc.).

Now you can make your own slides in the same way you’d create a new post. The image for your slides comes from assigning a ‘featured image’ to each post. The title and content will make up the overlaid text on each slide.

The next step is to create a page template that combines the slideshow files and the newly created slide posts to display them on your site.

Creating a Page Template

Open up a new file in your editor and paste in the following code:

<?php
/*
Template Name: Slideshow
*/
get_header();
<div id="ei-slider" class="ei-slider">
<ul class="ei-slider-large">
<?php
//This is for our custom Slides menu
$args = array( 'post_type' => 'slides', 'orderby' => 'menu_order');
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
?>
   <li>
      <?php the_post_thumbnail('full');?>
      <div class="ei-title">
         <h2><?php the_title(); ?></h2>
         <?php the_excerpt(); ?>
      </div>
   </li>
<?php
endwhile;
?>
</ul>
<ul class="ei-slider-thumbs">
   <li class="ei-slider-element">Current</li>
      <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
   <li><a href="#"><?php the_title(); ?></a></li>
<?php endwhile; ?>
</ul>
</div><!-- ei-slider -->

/* Include any code you want in your page */

<?php the_sidebar(); ?>
<?php the_footer(); ?>

In that snippet I’ve taken the Codrops slideshow markup and modified it to generate the slides dynamically using the WordPress loop. I also used the new post type (slides) for the WP_Query.

The slideshow template is now available from the page attributes panel.Save the file as template-slideshow.php and keep it in your theme folder. You’ll now be able to select the template for any of your pages.

Side Note: because we’re displaying the content of the post on our slideshow we don’t want it to be so long that it’ll run off the bottom of the slide. That’s why, to limit the length of the output, I used the_excerpt() function instead of the_content(). This will trim the content if it gets too long. You can also read how to limit the word length of the excerpt further if you need to.

Not so fast. Updating the Slideshow Files

We’re almost there but there’s one catch with using WordPress to display the slides. The slideshow is configured to display it’s text as h2 and h3 elements. When we display the content of our post, however, we use the_excerpt() function which displays the basic content as paragraphs. To make sure these paragraphs are displayed properly in the slideshow we need to open up one of the javascript files and tinker a little.

Go into your the folder containing the slideshow files and open /js/jquery.eislideshow.js
Look  for this block of code:

// titles animation
$nextSlide.find('div.ei-title > h2')
.css( 'margin-right', 50 + 'px' )
.stop()
.delay( this.options.speed * this.options.titlesFactor )
.animate({ marginRight : 0 + 'px', opacity : 1 }, this.options.titlespeed, this.options.titleeasing )
.end()
.find('div.ei-title > h3')
.css( 'margin-right', -50 + 'px' )
.stop()
.delay( this.options.speed * this.options.titlesFactor )
.animate({ marginRight : 0 + 'px', opacity : 1 }, this.options.titlespeed, this.options.titleeasing )

Add the following after the last line of that block of code:

.find('div.ei-title > p')
.css( 'margin-left', -50 + 'px' )
.stop()
.delay( this.options.speed * this.options.titlesFactor )
.animate({ marginLeft : 0 + 'px', opacity : 1 }, this.options.titlespeed, this.options.titleeasing )

This will ensure that paragraphs are displayed properly on the slides.

Give it a Try

Now that all the code is together go ahead and try it out. Make sure you assign the template to one of your pages then add a slide post with a featured image.

You can also edit the file [slideshow folder]/css/style.css to play around with the styling of the slides. Have fun!

Author: Graham

My name is Graham and I'm a Scottish web developer living in California. I love working with clean code to make attractive and usable websites. I'm also interested in cooking, gardening, and taekwondo.

Comments are closed.