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; enter image description here
(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>  

    <!-- 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>  
    <!-- 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>  
    <!-- 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>  
    <!-- 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>  
  • Those questions haven't been resolved yet... – Captain Ron Feb 15 '12 at 14:17
  • I edited the question slightly. "Theming" implies skinning - i.e. appearance/presentation - of the content; it appears that you're actually asking how to integrate WordPress post content and featured images into the slider. – Chip Bennett Feb 15 '12 at 14:21
  • These "please do my work for me" questions should not be allowed. – Wyck Feb 15 '12 at 16:54

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"> 

$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>';


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

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



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


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>
    <?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>  
                <?php the_excerpt(__('(...read more)')); ?>
    <?php $j++ ?>
<?php endwhile;?>

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.