Title: Adding extra markup to query_posts
Last modified: August 19, 2016

---

# Adding extra markup to query_posts

 *  Resolved [rusticated](https://wordpress.org/support/users/rusticated/)
 * (@rusticated)
 * [15 years, 1 month ago](https://wordpress.org/support/topic/adding-extra-markup-to-query_posts/)
 * I’m using query_posts to create an unordered list (ul) of posts, where each post
   item is floated to the left to create a grid layout. However, as the post titles
   vary in length, the height of each list item (li) also varies, breaking the layout.
   This can be seen here:
 * [http://is.quotebox.org/sports/football/](http://is.quotebox.org/sports/football/)
 * This wouldn’t occur if I could wrap every five list items in a separate div. 
   Thus, is there a way to add extra markup to query_posts after it’s looped through
   a certain number of posts, in this case five?
 * Any help you could provide would be greatly appreciated, thanks.

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

 *  [Michael](https://wordpress.org/support/users/alchymyth/)
 * (@alchymyth)
 * [15 years, 1 month ago](https://wordpress.org/support/topic/adding-extra-markup-to-query_posts/#post-2028534)
 * you can do this by using a counter variable, and insert the markup depending 
   on the counter value.
    this could be a div, or simply an extra css class to mark
   each first post per row.
 * for more detailed suggestions, please paste the code of your template into a 
   [http://pastebin.com/](http://pastebin.com/) and post the link to it here.
 *  Thread Starter [rusticated](https://wordpress.org/support/users/rusticated/)
 * (@rusticated)
 * [15 years, 1 month ago](https://wordpress.org/support/topic/adding-extra-markup-to-query_posts/#post-2028556)
 * Thanks for your help, I’ve uploaded the loop file code to:
 * [http://pastebin.com/pEzFNAxg](http://pastebin.com/pEzFNAxg)
 *  [Michael](https://wordpress.org/support/users/alchymyth/)
 * (@alchymyth)
 * [15 years, 1 month ago](https://wordpress.org/support/topic/adding-extra-markup-to-query_posts/#post-2028558)
 * [http://pastebin.com/Xkk2DesP](http://pastebin.com/Xkk2DesP)
 * new or changed:
 * `$counter = -1;`
    initialize the counter before the query;
 * `<div style="float:left; width:124px; margin-right:15px; padding-bottom:10px;
   text-align:center; <?php $counter++; if( $counter%5 == 0 ) { echo 'clear:left;';}?
   >">`
    this should add a ‘clear:left;’ to your inline style, for each first post
   per row.
 * how it works:
    the counter starts with -1, gets incremented for each post; the
   check is if the remainder of the division of counter divided by five equals zero;
   if yes, this is a ‘first in a row’ post; then add ‘clear: left;’
 * (untested)
 *  Thread Starter [rusticated](https://wordpress.org/support/users/rusticated/)
 * (@rusticated)
 * [15 years, 1 month ago](https://wordpress.org/support/topic/adding-extra-markup-to-query_posts/#post-2028569)
 * Worked like a dream, thanks a lot for your help. I didn’t even think of just 
   utilising plain ol’ php.

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

The topic ‘Adding extra markup to query_posts’ is closed to new replies.

## Tags

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

 * 4 replies
 * 2 participants
 * Last reply from: [rusticated](https://wordpress.org/support/users/rusticated/)
 * Last activity: [15 years, 1 month ago](https://wordpress.org/support/topic/adding-extra-markup-to-query_posts/#post-2028569)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics