Sliding Posts with WordPress

1. The Concept

Goal: To make a tabbed slider that displays WordPress posts from a specific category in an easy to use format. Making it simple to edit/delete posts, from the WordPress back-end, and still have a great, unique front-end result.

To start we are using the Coda-Slider from Niall Doherty.

http://www.ndoherty.com/demos/coda-slider/1.1.1/#1

Start by downloading and unzipping the files.

2. Making it Work With WordPress

We need to use the WordPress loop to make each page of the slider a tab. To do this we will start out with a post query for our category.

Create a new category to house our project (I called mine Portfolio), make sure to note the category ID as we will need it later. Based on the WordPress Template Hierarchy we know that any theme file named category-3.php (where 3 is your category ID) will be used to display posts from that category. So all code featured here will be inside that PHP file.

Place this in your header to link to the javascript files and to start the slider
[sourcecode language=’html’]

jQuery(window).bind(“load”, function() {

jQuery(“div#slider1″).codaSlider()

// jQuery(“div#slider2″).codaSlider()

// etc, etc. Beware of cross-linking difficulties if using multiple sliders on one page.

});

[/sourcecode]

To start with we want to analyze the code, and see where our loop should start. Remember that the loop is repeating code for each post, so we want it inside the containing DIVs. This slider code has three containing DIVs:

[sourcecode language=’html’]


[/sourcecode]

To start our loop we want to retrieve all posts in category with ID of 3 (make sure to replace 3 with your actual ID).

[sourcecode language=’html’]

For the next step we want to make sure the post title appears on the tab. To do this we need to add in the title section of the div.panel. As shown below.

<div class="panel" title="”>

[/sourcecode]
Then we will want to add our title and content within the wrapper div. Easy with the simple WordPress tags <?php the_title(); ?> and <?php the_content(); ?>.

Then everything needs to be closed off with three closing DIVs at the end.
[sourcecode language=’html’]

        

Here is our ending HTML:

<div class="panel" title="”>