Advanced Search

Wordpress Loop, Style displayed posts differently

/ Published in: PHP
Save to your folder(s)
Using this loop variation you can style differently the first and the last post of a loop, or whatever post you like, as lond as you add a new elseif with the number of the post you desire.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <?php $my_query = new WP_Query('cat=10&showposts=4'); ?>
  2. <?php $count = 0; ?>  
  3. <?php while ($my_query->have_posts()) : $my_query->the_post(); $do_not_duplicate = $post->ID; ?>
  4. <?php $count++; ?>  
  5.  
  6. 	<?php if ($count == 1) : ?>  
  7. 		<div id="featured">
  8. 		  <div class="span-24 last" id="details">HTML Ipsum Presents</div>
  9. 		  <!-- end details -->
  10. 	          <h2 class="clear"><a href="<?php the_permalink(); ?>" ><?php the_title(); ?></a></h2>
  11. 		  <p class="clear"><?php the_content('read more...'); ?></p>
  12. 		</div>
  13. 		<hr/>
  14. 	<?php elseif ($count == 4) : ?>  
  15. 		<div class="span-8 last">
  16. 		  <h3><a href="<?php the_permalink(); ?>" ><?php the_title(); ?></a></h3>
  17. 		  <p class="clear"><?php the_content('read more...'); ?></p>
  18. 		</div>
  19. 	<?php else : ?>  
  20. 		<div class="span-8 border">
  21. 		  <h3><a href="<?php the_permalink(); ?>" ><?php the_title(); ?></a></h3>
  22. 		  <p class="clear"><?php the_content('read more...'); ?></p>
  23. 		</div>
  24. 	<?php endif; ?>
  25.  
  26. <?php endwhile; ?>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.