Create a gist now

Instantly share code, notes, and snippets.

anonymous /index.html
Created Feb 16, 2012

What would you like to do?
Multiple loops inside one wordpress query - Dual Slider
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<meta name="description" id="MetaDescription" content="" />
<meta name="keywords" id="MetaKeywords" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="language" content="en" />
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/clearfix.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/style.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/fonts.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/jquery.dualSlider.0.2.css" />
<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="scripts/jquery.timers-1.2.js" type="text/javascript"></script>
<script src="scripts/jquery.dualSlider.0.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
autoDelay: 6000,
easingCarousel: "swing",
easingDetails: "easeOutBack",
durationCarousel: 1000,
durationDetails: 600
<div class="wrapper clearfix">
<!-- begin the featured dual slider query -->
<?php query_posts(array(
'tag' => 'Featured', // Retrieve Posts with Tag Featured...
'order' => 'DESC', // Ordering by latest first...
'orderby' => 'date', // This is what the above is using to order by...
'posts_per_page' => 3 // Display 3 posts...
) ); ?>
<div class="carousel clearfix">
<div class="panel">
<div class="details_wrapper">
<div class="details">
<!-- This is the first loop which pulls in the info from your post -->
<?php if ( have_posts()) : while (have_posts()) : the_post(); ?>
<div class="detail">
<h2 class="Lexia-Bold"><a href="<?php the_permalink() ?>" ><?php the_title(); ?></h2>
<p><?php the_excerpt(); ?></p>
<a href="<?php the_permalink() ?>" title="Read more" class="more">Read more</a>
</div><!-- /detail -->
<?php endwhile; ?>
</div><!-- /details -->
</div><!-- /details_wrapper -->
<div class="paging">
<div id="numbers"></div>
<a href="javascript:void(0);" class="previous" title="Previous" >Previous</a>
<a href="javascript:void(0);" class="next" title="Next">Next</a>
</div><!-- /paging -->
<a href="javascript:void(0);" class="play" title="Turn on autoplay">Play</a>
<a href="javascript:void(0);" class="pause" title="Turn off autoplay">Pause</a>
</div><!-- /panel -->
<!-- This should technically allow you to run a secondary loop in the same query I think... -->
<?php rewind_posts(); ?>
<div class="backgrounds">
<!-- This is the second loop which pulls in your featured image or your video embed code via a custom field -->
<?php if ( have_posts()) : while (have_posts()) : the_post(); ?>
<div class="item item_1">
<?php if ( get_post_meta($post->ID, 'Slider Featured Image', true) ) { ?>
<?php echo get_post_meta($post->ID, 'Slider Featured Image', true); ?>
<?php } else { ?>
<img src="<?php bloginfo('template_url'); ?>/images/no-image-available.jpg" alt="No Image" />
<?php } ?>
</div><!-- /item -->
<?php endwhile; ?>
</div><!-- /backgrounds -->
</div><!-- /carousel -->
<!-- finish the query -->
<?php wp_reset_query(); ?>
</div><!-- /wrapper -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment