0

I'm trying to replicate the functionality of the content showcase/slider seen here:

http://stylewatch.stelladot.com/

From what I see in the HTML, it appears that there's 2 divs, one with the post images and one with the post titles.

I'd like to use something like wp_list_pages to return the 4 most recent posts and put them in the slider, but I'm not quite sure how to do it. It seems that they're in separate div's - how would I query the posts and split the set of images from the set of post names? I guess I could make 2 queries and have one query images while the other queries titles but it seems that isn't the most efficient way to do so.

EDIT: Adding sample desired markup - the content of media-0 and title-0 should be from the same post.

<div id="slider">

  <div id="slider-images">
    <div id="media-0">
      <img>
    </div>
    <div id="media-1">
      <img>
    </div>
  </div>

  <div id="slider-titles">
    <div id="title-0>
      <div class="title">text</div>
    </div>
    <div id="title-1">
      <div class="title">text</div>
    </div>
  </div>

</div>
3

You'll have a difficult time doing that with wp_list_pages(). You will need to create a custom query loop, using either WP_Query() or get_posts().

Custom loop with 4 most recent posts

<?php
$recent_posts_query_args = array(
    'posts_per_page' => 4
);
$recent_posts = new WP_Query( $recent_posts_query_args );

// Open custom loop
if ( $recent_posts->have_posts() ) : 
    while ( $recent_posts->have_posts() ) : 
        $recent_posts->the_post();

        // Normal post template tags can be used here, just like constructing a normal loop

    // Close custom loop
    endwhile; 
endif;

// Be kind; reset postdata
wp_reset_postdata();
?>

The actual markup you use is up to you. The custom loop markup/output is like any other loop at this point.

  • Thanks Chip, that makes much more sense. The only thing I'm stuck on is, the loop takes a set of markup and iterates that for each post. In the example slider, they have 2 sets of meta data, each of which corresponds to the same post, but they are split into separate div's. Is that possible in the loop? – javy May 1 '12 at 14:41
  • added markup example – javy May 1 '12 at 14:48
  • The loop can take any manner of HTML or PHP markup. It doesn't care what you pass to it. :) – Chip Bennett May 1 '12 at 14:51

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.