Integrating WordPress Content into a jQuery Slider

Question

I have a pretty basic 'featured-list - image slider' implemented above my content in my custom WordPress theme. How do I integrate WordPress content into the slider so that the slide content is pulled via 'Recent-Posts' or via a 'Category'? Also, how can I set the 'Featured Imgs' to display as the photo within the slider and to display in my alotted thumbnail sections in list area?

Here's a screenshot of the jQuery I plugin I picked this up on;
(Their demo is broke, so.)

Below is the markup I have implemented.

  <div id="featured" >  
    <ul class="ui-tabs-nav">  
        <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="images/image1-small.jpg" alt="" /><span>David King – on his True Crime thriller</span></a></li>  
        <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="images/image2-small.jpg" alt="" /><span>Tips from Steve Perry</span></a></li>  
        <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="images/image3-small.jpg" alt="" /><span>Tips from Chuck Berry</span></a></li>  
        <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="images/image4-small.jpg" alt="" /><span>SFIRS</span></a></li>  
     </ul>  




    <!-- First Content -->  
    <div id="fragment-1" class="ui-tabs-panel" style="">  
        <img src="images/image1.jpg" alt="" />  
        <div class="info" >  
        <h2><a href="#" >David King – on his True Crime thriller</a></h2>  
        <p>David King is Lorem Ipsum Lorem Ipsum Lorem Ipsum...<a href="#" >read more</a></p>  
        </div>  
    </div>  
    <!-- Second Content -->  
    <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">  
        <img src="images/image2.jpg" alt="" />  
        <div class="info" >  
        <h2><a href="#" >Tips from Steve Perry</a></h2>  
        <p>Steve Perry is Lorem Ipsum Lorem Ipsum Lorem Ipsum...<a href="#" >read more</a></p>  
        </div>  
    </div>  
    <!-- Third Content -->  
    <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">  
        <img src="images/image3.jpg" alt="" />  
        <div class="info" >  
        <h2><a href="#" >Tips from Chuck Berry</a></h2>  
        <p>Chuck Berry is Lorem Ipsum Lorem Ipsum Lorem Ipsum...<a href="#" >read more</a></p>  
        </div>  
    </div>  
    <!-- Fourth Content -->  
    <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">  
        <img src="images/image4.jpg" alt="" />  
        <div class="info" >  
        <h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2>  
        <p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p>  
        </div>  
    </div>  
</div>  

Answer 1

it is just a question of translating the jquery ui tabs markup into the appropriate wordpress functions. text is the_title() or the_excerpt(). images are the_post_thumbnail and so on. put this in your template where you want the slider to appear:

// Get any existing copy of our transient data
if ( false === ( $featured_query_results = get_transient( 'featured_query_results' ) ) ) {
    // It wasn't there, so regenerate the data and save the transient
    $args = array( 'numberposts' => 5, 'cat' => 11 );
    $featured_query_results = get_posts( $args );
    set_transient( 'featured_query_results', $featured_query_results );
}

global $post;
$tmp_post = $post;

//if there are posts returned then we'll loop through them
if($featured_query_results):  ?>

<div id="featured"> 

<?php
$i=1;
$ul = '<ul class="ui-tabs-nav">';
$divs = '';
foreach( $featured_query_results as $post ) : setup_postdata($post); 
    //create the li nav element
    $ul .= '<li><a href="#fragment-'.$i.'">'.get_the_post_thumbnail(get_the_ID(),"thumbnail").'<span>'.get_the_title().'</span></a></li>';

    //create the div tab
    $divs .= '<div id="fragment-'.$i.'">';  
    $divs .= get_the_post_thumbnail(get_the_ID(),"large"); 
    $divs .= '<div class="info" >';
    $divs .= '<h2><a href="'.get_permalink().'" >'.get_the_title().'</a></h2>';
    $divs .= '<p>'.get_the_excerpt().'<a href="'.get_permalink().'" >read more</a></p>';
    $divs .= '</div>';
    $divs .= '</div>';
    $i++;

endforeach; 

//close out the unordered list
$ul .= '</ul><!--.ui-tabs-nav-->';

//echo out the results
echo $ul;
echo $divs;

?>

</div><!--#featured-->

<?php else: ?>

No matching posts found.

<?php endif; ?>
<?php $post = $tmp_post;

and this in your functions.php

// Create a simple function to delete our transient when posts are saved/created
function delete_featured_query_transient() {
     delete_transient( 'featured_query_results' );
}
add_action( 'save_post', 'delete_featured_query_transient' );

do take note that i am using

    $args = array( 'numberposts' => 5, 'cat' => 11 );

as the arguments for my query. you'll want to use your own. and you might want to comment out the

   set_transient( 'featured_query_results', $featured_query_results );

line while you are setting this up, b/c it will store the query's results in a transient so that it doesn't have to make the same query over and over. the transient is deleted when you write a new post (the function i said to put in functions.php) so it will always be up-to-date. you can always delete the transient by changing the delete function from the save_post hook to something that always runs, like init.

Answer 2

It sounds like you need to do a loop whereby you're doing a query for the latest 4 posts (if for a particular you can do a query within a category and show only 4 posts as well).

<?php query_posts( 'showposts=4' ); ?>

Then do a loop and insert the fields where relevant. As you have two sections ie the navigation and then main content, I think you would need to do two loops. The tricky thing is that your classes change with each post, so double check class values that come out ie <a href="#fragment-<?php $i ?>">. Anyway...

<?php query_posts( 'showposts=4' ); ?>
<?php while (have_posts()) : the_post(); ?>
    <?php $i = 1 ?>
    <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-<?php $i ?>">
        <a href="#fragment-<?php $i ?>">
            <?php the_post_thumbnail();?><span><?php the_title(); ?>/span>
        </a>
    </li>
    <?php i++ ?>
<?php endwhile;?>

That should serve the navigation. For the classes, I have used $i to give the value - just double check that it comes out right.

Then for the content part you do another loop:

<?php query_posts( 'showposts=4' ); ?>
<?php while (have_posts()) : the_post(); ?>
    <?php $j = 1 ?>
    <div id="fragment-<?php $j ?>" class="ui-tabs-panel" style="">  
        <?php the_post_thumbnail(large);?>
        <div class="info" >  
            <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>  
            <p>
                <?php the_excerpt(__('(...read more)')); ?>
            </p>  
        </div>  
    </div>
    <?php $j++ ?>
<?php endwhile;?>

For the featured image, you can use the wordpress function as I have done here.