Title: Specific div layout using wp_query
Last modified: August 20, 2016

---

# Specific div layout using wp_query

 *  [b4thebigbang](https://wordpress.org/support/users/b4thebigbang/)
 * (@b4thebigbang)
 * [15 years ago](https://wordpress.org/support/topic/specific-div-layout-using-wp_query/)
 * Hi all,
 * The last few days I’ve been struggling to get the following output by using WP_query(
   outside the Loop):
 *     ```
       <div id="slider">
          <img src="http://urlof.the/image/goes/here.jpg" title="slide1"/>
          <img src="http://urlof.other/image/goes/here.jpg" title="slide2"/>
       </div>
       <div id="slide1" class="nivo-qhtml-caption">
         <p><span>Caption title Slide1</span></p>
         <p>Caption contents slide 1</p>
       </div>
       <div id="slide2" class="nivo-qhtml-caption">
         <p><span>Caption title Slide2</span></p>
         <p>Caption contents Slide2</p>
       </div>
       ```
   
 * The reason I want my output this way, is to use a nivo slider on my website. 
   All the attributes get their values from variables coming from a custom post 
   type. To add a slide, you can just use the custom post type and add a new post.
 * Through this post type a user would enter the url of the slide image, an id used
   for the slide (used for the title of the image and the div id for the caption
   that goes along with the image). A user can also has a box to fill in the caption
   title and a box to use for teh caption. Only thing I need now is to get my ouput
   sorted in teh above way.
 * I allready tried different ‘while’ loops, but with no result. Any ideas anyone?
 * Thanks in advance!

Viewing 3 replies - 1 through 3 (of 3 total)

 *  [Michael](https://wordpress.org/support/users/alchymyth/)
 * (@alchymyth)
 * [15 years ago](https://wordpress.org/support/topic/specific-div-layout-using-wp_query/#post-2133973)
 * is that code example for two posts?
    it is not totaly clear, where the looping
   is.
 * for example with three posts would this psrt loop:
 *     ```
       <div id="slider">
          <img src="http://urlof.the/image/goes/here.jpg" title="slide1"/>
          <img src="http://urlof.other/image/goes/here.jpg" title="slide2"/>
          <img src="http://urlof.the/image/goes/here.jpg" title="slide3"/>
       </div>
       ```
   
 * and the second part as well?
 * you might ned to work with `rewind_posts()` between the sections.
    [http://codex.wordpress.org/Function_Reference/rewind_posts](http://codex.wordpress.org/Function_Reference/rewind_posts)
 * do the numbers need to come automatically from the loop?
 *  Thread Starter [b4thebigbang](https://wordpress.org/support/users/b4thebigbang/)
 * (@b4thebigbang)
 * [15 years ago](https://wordpress.org/support/topic/specific-div-layout-using-wp_query/#post-2134037)
 * Thanks for the quick response!
 * You’re right about the posts. The example I gave contained two posts. Problem
   is, with the way I’m using nivo slider all the images must be grouped within 
   the “slider” div and all the captions need a diff of their own.
 * It’s easiest for my client to have all the numbers come from the loop… I’ve tried
   to do it by adding a counter in the while-loop, but that didn’t give the result
   I’m after.
 * Thanks for the quick tip on rewind_posts(), started reading up on it, cheers!
 *  Thread Starter [b4thebigbang](https://wordpress.org/support/users/b4thebigbang/)
 * (@b4thebigbang)
 * [15 years ago](https://wordpress.org/support/topic/specific-div-layout-using-wp_query/#post-2134046)
 * The code I´m using is:
 *     ```
       <div id="slider-wrapper">
       	<div id="slider">
       		<?php $slider_query = new WP_query('post_type=rt_slider&showposts=5');
       		while ($slider_query->have_posts()) : $slider_query->the_post();
       			$do_not_duplicate = $post->ID; ?>
       			<?php $image_href = get_post_meta($post->ID, '_image_href', $single = true);?>
       			<?php $slide_id = get_post_meta($post->ID, '_slide_id', $single = true);?>
       			<?php $caption_title = get_post_meta($post->ID, '_caption_title', $single = true);?>
       			<?php $caption = get_post_meta($post->ID, '_caption', $single = true);?>
       			<?php $caption_link_href = get_post_meta($post->ID, '_caption_link_href', $single = true);?>
       			<?php $caption_link_text = get_post_meta($post->ID, '_caption_link_text', $single = true);?>
       			<?php if($image !== '') { ?>
       				<img src="<?php bloginfo('template_directory');?>/images/slider/<?php echo $image_href;?>" alt="" title="#<?php echo $slide_id; ?>"/>
       			<?php } // end if statement
       			else { ?>
       				<img src="<?php bloginfo('template_directory');?>/images/slide5.jpg" alt="" title="#<?php echo $slide_id; ?>"/>
       			<?php } ?>
       			<?php endwhile;?>
       			<?php rewind_posts();?>
       	</div>
       			<?php while ($slider_query->have_posts()) : $slider_query->the_post();?>
       				<div id="<?php echo $slide_id;?>" class="nivo-html-caption">
       					<p><span><?php echo $caption_title;?></span></p>
       					<p><?php echo $caption;?> - <a href="<?php echo $caption_link_href;?>"><?php echo $caption_link_text?></a></p>
       				</div>
       			<?php endwhile;?>
       	</div>
       ```
   
 * And it generates the following output:
 *     ```
       <div id="slider-wrapper">
       		<div id="slider">
       																																												<img src="http://localhost/wordpress/wp-content/themes/RallyTiming/images/slider/slider2.jpg" alt="" title="#slide2"/>
       																																																		<img src="http://localhost/wordpress/wp-content/themes/RallyTiming/images/slider/slider1.jpg" alt="" title="#slide1"/>
       													</div>
       										<div id="slide1" class="nivo-html-caption">
   
       					<p><span>Welkom op de website van RallyTiming</span></p>
       					<p>RallyTiming is dé tijd waarnemer van het Nederlands Rallykampioenschap en het Nederlands Short Rallykampioenschap. Via onze websites voor pc, smartphone en tablet blijf je altijd op de hoogte van de laatste uitslagen! - <a href="http://www.rallytiming.nl/over_ons/">Meer over RallyTiming</a></p>
       				</div>
       											<div id="slide1" class="nivo-html-caption">
       					<p><span>Welkom op de website van RallyTiming</span></p>
       					<p>RallyTiming is dé tijd waarnemer van het Nederlands Rallykampioenschap en het Nederlands Short Rallykampioenschap. Via onze websites voor pc, smartphone en tablet blijf je altijd op de hoogte van de laatste uitslagen! - <a href="http://www.rallytiming.nl/over_ons/">Meer over RallyTiming</a></p>
   
       				</div>
   
       	</div>
       ```
   
 * Problem seems to be that instead of generating the caption 2 div, it generates
   the caption 1 div again…

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Specific div layout using wp_query’ is closed to new replies.

## Tags

 * [wp_query](https://wordpress.org/support/topic-tag/wp_query/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 3 replies
 * 2 participants
 * Last reply from: [b4thebigbang](https://wordpress.org/support/users/b4thebigbang/)
 * Last activity: [15 years ago](https://wordpress.org/support/topic/specific-div-layout-using-wp_query/#post-2134046)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics