jqueryI finally finished getting my new custom jQuery featured post slider working as you can see in the header of the site. It took some trial and error but I eventually managed to figure out how to get it working. I ran into issues because I was first trying to use query_post() to get the posts, but then learned about WP_Query() and that solved all my problems. This is a better type of banner rotator than my previous Php and JavaScript banner rotator posts too. I would recommend using this one instead.

Now that I finally got it working, I am going to start working on making it a plugin for WordPress that I can release if I ever finish it, or can even manage to learn how to develop a WP plugin for that matter. I’m still rusty with Php and the development side of things, but I will do my best to create a plugin to release.

Since I had a hard time in finding information on how to do this, I wanted to share my code. What it does is dynamically display posts from the ‘Featured’ category, using the easySlider jQuery plugin. It’s easy to do, and adds a nice animated and dynamic feature to your site.

What you will learn:

  • using the WordPress WP_Query() funtion
  • retrieve posts from a specific category
  • display post titles and excertps in jQuery slider

Getting started

For this you will need to download the jQuery easySlider plugin. You will also have to be able to edit the header.php template for your theme. Go here for some information about using WP_Query() function here.

For the latest example usage of easySlider with just static content you can download the files. I used the example from that, and just altered the CSS and made the list of content dynamic instead of static, so you may want to start from there since my CSS is different.

These are the arrow images I used for my slider. Feel Free to save them.

arrow left arrow right

Here is the CSS styles I have.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#slider{ margin: 0px 25px; height: 180px; overflow: hidden; }
#slider ul, #slider li { margin:0px; padding:0; list-style:none; }
#slider li {
    /* define width and height of list item (slide) entire slider area will adjust according to the parameters provided here */
    width:500px;
    height:180px;
    overflow:hidden;
}
#slider li h2{ margin:0px 20px; padding-top:10px; }
#slider li p{ margin: 5px 20px; }

p#controls { margin:0; position:relative; }
#prevBtn, #nextBtn { display:block; margin:0; overflow:hidden; text-indent:-8000px; width:18px; height:30px; position:absolute; left:5px; top:-100px; }
#nextBtn { left:525px; }
#prevBtn a, #nextBtn a { display:block; width:19px; height:30px; background:url(images/btn_prev.png) no-repeat 0 0; }
#nextBtn a { background:url(images/btn_next.png) no-repeat 0 0; }

Next you need to add this before the closing head tag in your header.php template, which inlcudes the external JavaScript files. Change the path to the files according to where you save them.

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider1.5.js"></script>
<script type="text/javascript">
    $(document).ready(function(){  
        $("#slider").easySlider({
            controlsBefore: '<p id="controls">',
            controlsAfter:  '</p>',
            auto: true,
            continuous: true
        });
    });
</script>

Now for the fun part.

This works in a similar way as the query_post() function does but that was conflicting with the WordPress loop and making all the posts on my site to ONLY display the posts in featured category. This creates a new instance of query_post(), and allows you to do various things while within The Loop.

First you need to open the div and unordered list.

1
2
<div id="slider">
<ul>

Then you need to set up the query and get the number of posts from the category you want to get. Then create the loop.

1
2
3
4
5
    <?php  
        $featuredPosts = new WP_Query();
        $featuredPosts->query('showposts=5&cat=7');
        while ($featuredPosts->have_posts()) : $featuredPosts->the_post();
    ?>

In this example, showposts=5 will get 5 posts, and cat=7 is getting the posts from the category with the ID 7. If you can’s find the category ID, go to Categories in your WP admin, and hover over the category links. You will be able to see what the link is in your browser window, and the end of the URL will say &cat_ID=X.

Next, display the list of posts. This will show the post title with using the_permalink() and the_title() functions, and the_excerpt() to display a short summary of the post. You would have to make sure that all posts in the Featured category have a summary in the Excerpt field when you create new posts.

1
2
3
4
        <li>
            <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
            <div class="postsnip"><?php the_excerpt(); ?></div>
        </li>

Close the loop. Add the closing list and div tags and that’s it!

1
2
3
        <?php endwhile; ?><!--/close loop-->
    </ul>
</div><!--/slider-->

If it were a perfect world, this would work for you on your own site just by copying and pasting, but if you have ever developed anything before, you know it’s never that simple. If you have any questions or issues with this let me know.

Here is the entire code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<style type="text/css">
    #slider{ margin: 0px 25px; height: 180px; overflow: hidden; }
    #slider ul, #slider li, #slider2 ul, #slider2 li{ margin:0px; padding:0; list-style:none; }
    #slider li, #slider2 li{
    /* define width and height of list item (slide) entire slider area will adjust according to the parameters provided here */
        width:500px;
        height:180px;
        overflow:hidden;
    }  
    #slider2 li{ background:#f1f1f1; }     
    #slider li h2{ margin:0px 20px; padding-top:10px; }
    #slider li p{ margin: 5px 20px; }
    p#controls, p#controls2{ margin:0; position:relative; }
    #prevBtn, #nextBtn, #prevBtn2, #nextBtn2{ display:block; margin:0; overflow:hidden; text-indent:-8000px; width:18px; height:30px; position:absolute; left:5px; top:-100px; }   
    #nextBtn, #nextBtn2{ left:525px; }                                                     
    #prevBtn a, #nextBtn a, #prevBtn2 a, #nextBtn2 a{ display:block; width:19px; height:30px; background:url(images/btn_prev.png) no-repeat 0 0; } 
    #nextBtn a, #nextBtn2 a{ background:url(images/btn_next.png) no-repeat 0 0; }                                              
</style>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider1.5.js"></script>
<script type="text/javascript">
    $(document).ready(function(){  
        $("#slider").easySlider({
            controlsBefore: '<p id="controls">',
            controlsAfter:  '</p>',
            auto: true,
            continuous: true
        });
    });
</script>

<div id="slider">
    <ul>
    <?php  
        $featuredPosts = new WP_Query();
        $featuredPosts->query('showposts=5&cat=7');
        while ($featuredPosts->have_posts()) : $featuredPosts->the_post();
    ?>
        <li>
            <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
            <div class="postsnip"><?php the_excerpt(); ?></div>
        </li>
        <?php endwhile; ?><!--/close loop-->
    </ul>
</div><!--/slider-->

If you want to see a demo of this, just look at the top of this site, I am using almost this exact code to display the featured post slider in my header. So it shouldn’t be too difficult to implement yourself. There’s always a bump in the road though.

Questions or comments? Post them below.

Get automatic updates! Subscribe to Our RSS Feed or Get Email Updates sent straight to your inbox!