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

<!-- Initialize each slider on the page. Each slider must have a unique id -->

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.

});

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:

<div class="slider-wrap">
<div id="slider1" class="csw">
<div class="panelContainer">
<!--Loop Starts Here-->

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).

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="">
<div class="wrapper">
<h3></h3>
<p></p>
</div>
</div>

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.

<pre>        </div><!-- .panelContainer -->
</div><!-- #slider1 -->
</div><!-- .slider-wrap --></pre>
Here is our ending HTML:
<div class="slider-wrap">
<div id="slider1" class="csw">
<div class="panelContainer">

&lt;div class=&quot;panel&quot; title=&quot;"&gt;
<div class="wrapper">
<h3></h3>
<p></p>
</div>
</div>

</div><!-- .panelContainer -->
</div><!-- #slider1 -->
</div><!-- .slider-wrap -->

View Result

3. Fancifying it

I have already added in all the design elements, several minor changes to the CSS, and added in the portfolio images, all to give it more style. To have the final code you can download everything below.

Slider Files

4. Other Uses

You could use this idea and code to display the different steps of a technique (or tutorial), or you could use a variation of it to display content on the homepage of your site. There are many ways that such a concept could be used to enhance your WordPress site. Remember to really think outside the box for ways to use the WordPress loop!

Have any other ideas for adding to this tutorial or pushing the limits of WordPress in another way? Please contribute to the site!