Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

To integrate Zurb´s Orbit Slider in my theme, I´m trying to generate this HTML with WordPress:

<div id="featured">
  <img src="featured-image-1.jpg" alt="the-alt-tag" data-caption="#htmlCaption-1" />
  <img src="featured-image-2.jpg" alt="the-alt-tag" data-caption="#htmlCaption-2" />
  <img src="featured-image-3.jpg" alt="the-alt-tag" data-caption="#htmlCaption-3" />
</div>
<span class="orbit-caption" id="htmlCaption-1"><a href="#">The post title 1</a></span>
<span class="orbit-caption" id="htmlCaption-2"><a href="#">The post title 2</a></span>
<span class="orbit-caption" id="htmlCaption-3"><a href="#">The post title 3</a></span>

I managed to get a list of featured images in a div, but I´m not sure how to:

  1. Add a unique data attribute to each image tag like this: data-caption="#htmlCaption-1" (I suppose I need to run the preg_replace() function to insert the custom HTML?)
  2. Run the second loop to generate the 3 span elements (should this be a new wp_query or can I use the same one?) Edit: I just found out that by using rewind_posts(); we can use the same query multiple times.

This is the code I have now:

// Get the latest 5 sticky posts from the 'events' post type
$args = array(
  'post_type'   =>  'event',
  'posts_per_page' => 5,
  'post__in'  => get_option( 'sticky_posts' )
);
$slider_query = new WP_Query( $args );

// Display the featured images in div 
echo '<div id="featured">';

  while ( $slider_query->have_posts() ) : $slider_query->the_post();
    the_post_thumbnail();
  endwhile;

  $slider_query->rewind_posts();

echo '</div>';

// Print the captions   
while ( $slider_query->have_posts() ) : $slider_query->the_post();

  echo '<span class="orbit-caption"><a href="'; 
    the_permalink(); 
  echo '">';  
    the_title(); 
  echo '</a></span>';

endwhile;

// Reset Post Data
wp_reset_postdata(); 

?>

Hope someone can help. Thanks!

share|improve this question
add comment

1 Answer

up vote 1 down vote accepted

I'd use the this code to print the image instead of using the_post_thumbnail();.

So that the $slider_query->current_post can be used to print the current iteration of post in WP_Query loop.

Eg.

  <img src="<?php wp_get_attachment_url( get_post_thumbnail_id() ); ?>" alt="the-alt-tag" data-caption="#htmlCaption-<?php $slider_query->current_post; ?>" />

Update -

Untested but it should work. Make sure you turn on WordPress debug before development.

<?php

// Get the latest 5 sticky posts from the 'events' post type
$args = array(
  'post_type'   =>  'event',
  'posts_per_page' => 5,
  'post__in'  => get_option( 'sticky_posts' )
);
$slider_query = new WP_Query( $args );

// Display the featured images in div 
echo '<div id="featured">';

    while ( $slider_query->have_posts() ) : $slider_query->the_post() ;
    echo '<img src="'.wp_get_attachment_url( get_post_thumbnail_id() ).'" alt="the-alt-tag" data-caption="#htmlCaption-'.$slider_query->current_post.'" />';
    endwhile;

$slider_query->rewind_posts();

echo '</div>';

// Print the captions   
while ( $slider_query->have_posts() ) : $slider_query->the_post();

  echo '<span class="orbit-caption" id="htmlCaption-'.$slider_query->current_post.'><a href="'; 
    the_permalink(); 
  echo '">';  
    the_title(); 
  echo '</a></span>';


endwhile;

// Reset Post Data
wp_reset_postdata(); 

?>
share|improve this answer
    
That sounds like a great approach. I replaced my featured images loop with your code but unfortunately nothing showed up. This is what I used after starting the query: <div id="featured"> <img src="<?php wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>" alt="the-alt-tag" data-caption="#htmlCaption-<?php $slider_query->current_post; ?>" /> and the output: <div id="featured"> <img src="" alt="the-alt-tag" data-caption="#htmlCaption-" /> </div> –  Mattvic Aug 6 '12 at 15:58
    
that is just example, Dont use it as it is. –  amit Aug 6 '12 at 16:03
    
Ok I´ll give it a go and follow up here. Thanks! –  Mattvic Aug 6 '12 at 16:05
    
I updated my answer, let me know if not worked. –  amit Aug 6 '12 at 16:21
    
NOTE - we don't need to pass $post->ID if using in loop –  amit Aug 6 '12 at 16:23
show 1 more comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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