Over the process of refreshing my personal website a lot of thought went into how I planned to display information – from portfolio pages to blog posts – all had to run on top of the Bootstrap framework and populate dynamically into fluid rows. What most find is that if the loop isn’t placed correctly and you nest fluid rows they gain a stairs effect because row-fluid:after has a left-margin, ever increasing with each nesting.

One specific page, my portfolio, had 4 set requirements – pull all child pages of portfolio, show them in descending order, place the thumbnails inside a span4, and then reset/create a new row-fluid for every 3 pages.

Pulling Child Pages and Displaying in Descending Order

Starting off with a simple reset the page is ready for our array, first we begin by stating that the type result we need is a ‘page’. After that we will declare the ‘-1’ statement that allows an unlimited number of results to populate. The parent page of all the posts we want displayed is 94, that means that any portfolio page created going forward, it must┬ábe a child of the page portfolio if we want it to display. Finally we will organize the pages in descending order based on their page ID. This array is then input into wp_query using $args and our WordPress loop begins.

Placing the Thumbnails in a Span4 Class

Next step in the process is to take the query and display it to the screen, we’ll work on getting the first row visible before worrying about subsequent rows. Calling a row-fluid is the opening div, followed by setting the count variable to zero (of how many results the query has found). Then we run our WordPress loop and in my example I have it outputting the thumbnail for the page it finds, overlaying the title along the bottom, and making the entire combination a link to the page. We close our span4 but you will notice we have left the row-fluid open, it will be closed/reopened in the next section.

Reset the Loop, Create a New Row-Fluid for Every 3 Pages

Line 1 has us adding the amount of pages found to the $count, line 3 then says if the count hits three to display to the page a closing div and to open a new row-fluid. It then sets our count back to zero and if posts remain, restarts the loop. If the posts end in a multiple of three, you will see that the loop opens up another row and closes it with a 0 height set. With a bit of tinkering this could be adjusted but having zero height it would have no impact on any following elements.

That’s it, I applied the basic styling below to the span4s and now when I create a new portfolio page, if I set its parent to portfolio, the thumbnail and title will be grabbed and placed in the first spot on my portfolio page.