Title: Top list/slideshow style posts
Last modified: August 20, 2016

---

# Top list/slideshow style posts

 *  [kthmaxwell](https://wordpress.org/support/users/kthmaxwell/)
 * (@kthmaxwell)
 * [13 years, 5 months ago](https://wordpress.org/support/topic/top-listslideshow-style-posts/)
 * I’m trying to implement a post which lists the top ten forms of self defence,
   like the link shown here: [link](http://www.menshealth.co.uk/building-muscle/abs-workout/six-pack-rules)
 * Many of the slider plug ins I have looked at are designed to sit on the homepage
   and show off the features/content of the site, Im looking for something to actually
   work as a post so that I can put article content beside each slide.
 * I am having trouble figuring out how to do this in wordpress. Does anyone know
   how? or maybe of a plug in which would enable it?
 * Thanks in advance

Viewing 2 replies - 1 through 2 (of 2 total)

 *  [linux4me2](https://wordpress.org/support/users/linux4me2/)
 * (@linux4me2)
 * [13 years, 5 months ago](https://wordpress.org/support/topic/top-listslideshow-style-posts/#post-3319958)
 * If I understand correctly, you want all the content in a single post, and just
   want a user interface that will provide a slideshow effect for the ten image/
   text blocks?
 * I don’t know of a plugin, but if you can’t find one, you could accomplish what
   you want with JQuery’s [Slide Effect](http://docs.jquery.com/UI/Effects/Slide)
   if it is included WordPress’ JQuery core, or just use a less-fancy effect and
   JQuery to cycle between slides.
 * You’d just need to create a container in the HTML of the post with the buttons
   and slide numbers, wrap your ten image/text blocks in divs with a distinct class
   to create each slide in your post, hide all but the first one when the page loads,
   then use the button click events to cycle through the “slides.”
 * You could use JQuery to calculate and handle the slide numbers, so all you’d 
   have to do is include the divs with the appropriate classes if you wanted to 
   reuse the JQuery in different posts.
 *  [linux4me2](https://wordpress.org/support/users/linux4me2/)
 * (@linux4me2)
 * [13 years, 5 months ago](https://wordpress.org/support/topic/top-listslideshow-style-posts/#post-3320004)
 * I got bored at work and got to thinking about this. I’ve got a solution for you.
   If you’re game, you can use this pretty much anywhere you want in WordPress for
   any number of individual “slides.” Once it’s set up, it will be fairly easy to
   use.
 * Here’s a step-by-step procedure to get it working:
    1.  Create a [child theme](http://codex.wordpress.org/Child_Themes) for whatever
        theme you’re using so your modifications won’t be lost when you update your
        theme. (Note: It’s a lot easier than that article makes it sound because there’s
        a lot of info there.)
    2.  Create an “images” folder in your child theme’s folder: /wp-content/themes/
        <your child theme>/images
    3.  Download all four of the navigation button images from [here](http://s1216.beta.photobucket.com/user/linux4me/library/Navigation%20Buttons),
        and then upload them into your newly created /wp-content/themes/<your child
        theme>/images folder.
    4.  Create a “js” folder in your child theme’s folder: /wp-content/themes/<your
        child theme>/js
    5.  Click the Download link to save the jQuery code [here](http://pastebin.com/9uKmW4Vc)
        as a text file. Rename it as “div_slideshow.js” then upload the file to your
        newly created /wp-content/themes/<your child theme>/js folder.
    6.  Copy the header.php file from your parent theme (the theme you copied to make
        the child theme) to your /wp-content/themes/<your child theme> folder.
    7.  Edit the header.php file you copied to your child theme, and add the following
        code right after the last “<link…” tag in the “head” section of the file:
    8.      ```
            <script type="text/javascript">
            	var imagedir = "<?php echo get_stylesheet_directory_uri(); ?>" + "/images/";
            </script>
            ```
        
    9.  Create a functions.php file using a text-only editor (like Notepad), including
        the following code:
    10.     ```
            <?php
            function add_div_slideshow_js () {
            	// The following line loads the custom script as well as jquery, jquery effects core, and the jquery slide effect libraries.
            	wp_enqueue_script('div_slideshow', get_stylesheet_directory_uri() . '/js/div_slideshow.js', array('jquery', 'jquery-effects-core', 'jquery-effects-slide'));
            }
            add_action('wp_enqueue_scripts', 'add_div_slideshow_js');
            ?>
            ```
        
    11. If you already _have_ a functions.php file for your child theme, just add the
        code above without the opening and closing PHP tags.
    12. Add the following code at the end of your child theme’s style.css:
    13.     ```
            .div_slide {
            	float: left;
            	width: 100%;
            }
        
            .div_slideshow_nav {
            	display: inline;
            	padding-left: 15px;
            }
        
            .play_div_slideshow {
            	display: inline;
            }
        
            .div_slideshow_previous img, .div_slideshow_next img {
            	vertical-align: middle;
            }
            ```
        
 * After you activate your child theme, you should be ready to go.
 * You can use the slideshow in a post, or elsewhere. The easy way to use it in 
   a post is to lay out the “slides” as you want with images and text in the visual
   editor, then once you have them entered, use the text tab to wrap the whole thing
   in a div like this:
 *     ```
       <div class="div_slideshow_container">
         ...slides will go here
       </div>
       ```
   
 * and each slide in divs like this:
 *     ```
       <div class="div_slide">
         ...content for the slide
       /div>
       ```
   
 * so that a given post would look like this:
 *     ```
       <div class="div_slideshow_container">
         <div class="div_slide">
           ...content for the first slide
         /div>
         <div class="div_slide">
           ...content for the second slide
         /div>
       </div>
       ```
   
 * You don’t have to number the slides, and you can use as many as you want.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Top list/slideshow style posts’ is closed to new replies.

## Tags

 * [content](https://wordpress.org/support/topic-tag/content/)
 * [posts](https://wordpress.org/support/topic-tag/posts/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 2 replies
 * 2 participants
 * Last reply from: [linux4me2](https://wordpress.org/support/users/linux4me2/)
 * Last activity: [13 years, 5 months ago](https://wordpress.org/support/topic/top-listslideshow-style-posts/#post-3320004)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics