How to Integrate Accordion Image Slider to a WordPress Theme

On this article, I would like to share a tutorial on how to integrate a jQuery accordion image slider to your theme. This method is used in Padd Solution’s Technetiumastic theme.

Requirements

  • Kwicks for jQuery. Get this script from Jeremy Martin’s website. Get this file in ZIP format, it contains the examples and the script itself.
  • Regenerate Thumbnails Plugin. You need this plugin to regenerate thumbnails in WordPress. Unlike the TimThumb script, the WordPress post thumbnail support cannot generate thumbnails on the fly. You must install it via Plugins section in your WordPress Administrator Panel or the good old FTP method.
  • Any WordPress Theme. Any WordPress theme will do for the modificatio, but on this case, I will use the Twenty Ten theme.

Step 1: Altering the Directory Structure and Bug Fix

Under the folder of TwentyTen theme, which is under wp-content > themes > twentyten, create a folder called js. Download the Kwicks for jQuery Plugin and extract the files. Inside the contents of the extracted file, put the jquery.kwicks-1.5.1.js to theme-of-your-choice > js folder. Rename jquery.kwicks-1.5.1.js to jquery.kwicks.js for easy reference.

Due to the bug on Kwicks for jQuery when it is run on Internet Explorer 8, the code for the said plugin needs to be worked around for now. To do this, open the jquery.kwicks.js in your preferred text editor. Using the search and replace feature in your text editor, search the variable container and replace it to any other valid variable which is not reserved in Javascript. In my case, I use the variable named pail. The variable bucket or barrell will do the trick as well.

Step 2: File Modifications

Open the header.php file under twenty-ten folder. Insert the following code after line 45 (code just after enqueuing the Comments Reply).

wp_enqueue_script('jquery');
wp_enqueue_script('jquery-kwicks', get_template_directory_uri() . '/js/jquery.kwicks.js');

If you are using other than TwentyTen theme, make sure that you add the line before the wp_header() function. You might be surprised why I include the jQuery core file even though it is not mentioned in the first step. The reason is simple: WordPress 3.0 and later comes with jQuery, thus including the core file itself to the theme is unnecessary.

Next, open the functions.php file. Check if your theme supports post thumbnails. If your theme of choice supports it (TwentyTen theme does support post thumbnails), skip this step. Otherwise, copy this code to the functions.php file.

add_theme_support('post-thumbnails');

Then, set the dimensions of the slideshow image. I will set the width of the slideshow image to 500 pixels and height of the said image to 286 pixels and enable the zoom crop. You can visit the WordPress Codex for more information about the function add_image_size().

add_image_size('accordion', 500, 286, true);

Put the code at the end of the line in functions.php file. Next, let’s make a function to generate the list of post which is categorized for slideshow use. I set the value to 5 (five) for the number of slides to be shown at a time. The reason of choosing number 5 (five) as a value will be explained later on. See the function below.

function slideshow_featured_posts() {
	wp_reset_query();
	$featured = 1; // Assuming that the name of the category ID number 1 is "Featured".
	$count = 5; // How many post to be shown as slides. It should be any number that can be divide the width of the container equally.
	query_posts('showposts=' . $count . '&cat=' . $featured);
?>
<div id="slideshow">
    <ul class="list">
    <?php while (have_posts()) : the_post(); ?>
    	<li class="item">
    		<div class="image">
				<a href="<?php the_permalink(); ?>" title="Permanent Link to <?php the_title_attribute(); ?>">
   				<?php
					if (has_post_thumbnail()) {
						the_post_thumbnail('accordion');
					}
				?>
				</a>
			</div>
			<div class="title">
				<p><a href="<?php the_permalink(); ?>" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></p>
			</div>
		</li>
	<?php endwhile; ?>
	</ul>
</div>
<?php 
}

Copy and paste this code to the functions.php file. Then save your work.

Step 3: Getting to work

Open the index.php file. Add these lines of code just below the get_header() function, outside the PHP tag.

<div id="accordion-wrapper">
<?php slideshow_featured_posts(); ?>
</div>

Next, open the header.php file again. Add these lines of code just above the end of <head> tag.

<script type="text/javascript">
jQuery(document).ready(function() {
	jQuery.noConflict();
	jQuery('div#slideshow ul.list').kwicks({
		max : 500,
		spacing : 0
	});
});
</script>

Step 4: Layouting

Make sure that you already installed the Regenerate Thumbnails plugin and your theme of choice you are working with is the current theme. If you don’t have Regenerate Thumbnails plugin, please install it now.

Assuming you installed the said plugin, go to WordPress Admin Panel and go to Tools > Regen. Thumbnails. Then click the button to start regenerate thumbnails. This may take a while if you have plenty of images.

While the plugin is regenerating thumbnails, create a CSS file called jquery.kwicks.css under twentyten folder. See the CSS code below for the very basic layout. Also, see the comments for the explanation.

div#accordion-wrapper {
	clear: both; /** For unknown reason, if this line of code is missing, the layout will screw up on Firefox on Mac. */
}
div#slideshow {
	width: 940px;
	height: 286px; /** Height of the image **/
	overflow: hidden;
}
div#slideshow ul.list {
	list-style-type: none;
	position: relative;
	display: block;
	margin: 0;
	padding: 0;
}
div#slideshow ul.list li {
	float: left;
    /** Width of the visible image for accordion = Width of container / number of slides **/
	width: 188px;
	height: 286px; /** Height of the slideshow image **/
	position: relative;
}
div#slideshow ul.list li a {
	display: block;
	margin: 0;
	padding: 0;
}
div#slideshow ul.list li a img {
	border: 0 none;
	padding: 0;
}
div#slideshow ul.list .title {
	position: absolute;
	bottom: 0;
	padding: 10px;
	width: 480px; /** That's the width of the image less the width of the padding on each side **/
	background: #000 none;
}
div#slideshow ul.list .title p {
	margin: 0;
	padding: 0;
}
div#slideshow ul.list .title p a {
	font-weight: bold;	color: #fff;
	text-decoration: none;
}

In order to get the width of the li in the CSS rule div#slideshow ul.list li, I need to get the width of the container. The width of the container in TwentyTen theme is 940 pixels. And there are five (5) slides to be displayed. I divide 940 pixels by 5 images and I get 188 pixels. The value 188 pixels should be the width of the li in the CSS rule mentioned. If I want to display four (4) images at a time, I will set the width of li to

Then, copy and paste the CSS code to jquery.kwicks.css. Open the header.php file again and insert the following code inside the <head> tag, preferably below the code setting the theme stylesheet.

<link rel="stylesheet" type="text/css" media="all" href="<?php echo get_template_directory_uri(); ?>/jquery.kwicks.css" />

And, save your work.

Final Step

In order to get the accordion image slider working, you have to add more post entries with images. To add the image post thumbnail, refer to “How to Add Post Thumbnails in WordPress” tutorial. Make sure that you categorize the post which is for slideshow use. After some post entry, go back to main page and reload, and the accordiion image slider should be running. Below is the screenshot of the finished product of the tutorial.

A screenshot of TwentyTen theme with an Accordion Image Slider.

Optionally, you can make use of the easing plugin if you are not content for only simple accordion sliding.

Categories: Tutorials

Tags:

Comments

  1. joemar 03.10.2011 Reply

    can these be added to thesis theme?

    • James 03.11.2011 Reply

      As long as you have knowledge in using hooks for Thesis theme (and for WordPress as well), it is doable.

  2. Andreas 03.28.2011 Reply

    Hi sorry my english is not perfect I’m from Germany

    I’ve tried it out but must be somewhere in the functions.php an error.

    • James 03.29.2011 Reply

      Hello Andreas,

      The cause of the error is due to lack of closing brace. You can check the page again since I updated it.

  3. Marx 04.03.2011 Reply

    Thanks for the bug fix instruction (step 1)!! You saved my day!!

  4. yulius a 04.05.2011 Reply

    Thank you very much James for the tutorrial. I will try it now.

  5. J 04.06.2011 Reply

    I would like to replace the static header image with this feature and then link the different images to different sections of the website, would that be possible?

    Thanks

    J

    • James 04.14.2011 Reply

      Yes. Please see the reply to Jason’s comment below.

  6. Anchal 04.08.2011 Reply

    Is this downloadable…

    • James 04.08.2011 Reply

      Sadly, it’s not downloadable. Just copy and paste the code accordingly.

  7. Victor 04.09.2011 Reply

    May I know how to change the titles in the slideshow to categories and one for “latest post” and each slide shows the titles and excerpt of the latest post for that categories. (one slide = latest post, 4 slides for different categories)

    • James 04.14.2011 Reply

      All you have to do is to change the values in the parameter in query_posts accordingly. You can see more information about the query_posts at the Codex.

  8. jason 04.12.2011 Reply

    James,
    Is there anyway to link the accordian to static pages? I wanted to utilize it for 4 main services we offer but the service pages will be static.

    I’m enjoying the theme thus far, thanks so much.

    Jason

    • James 04.14.2011 Reply

      This requires a little bit of change of code. Go to function slideshow_featured_posts, and you notice that there is a code query_posts. Instead of usual code below:

      query_posts('showposts=' . $count . '&cat=' . $featured);

      You can replace it to:

      query_posts(array('post_type' => 'page', 'post__in' => array(1, 2, 3, 4)))

      Where the numbers 1, 2, 3, and 4 are your page IDs.

  9. Victor 05.28.2011 Reply

    i don’t get this: (step 3) Add these lines of code just above the end of tag.
    above (means before?)? or end of (after “”)? please explain, sorry if i have misunderstood.

  10. Emman 07.28.2011 Reply

    Please can this be put right where the header is instead of below and how do i go about it.

    • James 07.28.2011 Reply

      Yes. You can put it anywhere where you want it.

  11. recaD 08.06.2011 Reply

    I would like to thank you J for this tutorial. This would be an awesome plugin (really hard to find a “loop driven” accordion slideshow). I can suggest the Featured Slideshow plugin functionality.
    Meantime I would like to make a correction to the loop. I am building a new website for a client and I used your solution for the head slider BUT! If you set the front page to static it will overwrite the main loop (you will have only the posts/pages content what ware set up to run in the slider, displayed on the page where the slider is running). To resolve this problem you could include : wp_reset_query(); after the endwhile; ?> to reset the query so the content loop on the page will not be overridden.

    Good Job by the way!

  12. Louis 08.11.2011 Reply

    I’m busy customizing a website for a client and this tutorial was exactly what I needed. Thanks!

  13. Very good tutorial. It is exactly what I wanted!

  14. jgbNeatDesign 11.30.2012 Reply

    hello! thanks for this nice tutorial. I was looking for a way to dynamically add images to a slideshow and this post has filled some holes. I’m using the Graphene wordpress theme, and it does this almost flawlessly. There is a control panel for this. Anyway thanks again! it is useful to me. my website is at http://tikwenpam.com .

  15. peter 03.06.2013 Reply

    How can I install some slide caption just like on http://liveonlakenorman.com/

Add a Comment