Question

About to implement my first WordPress site. My understanding is that it helps if my loop is calling a generic item, for example:

<div id="article-excerpt">
<div>Article Heading</div>
<div>Article Sub-heading</div>
</div>

When using Twitter Bootstrap or 960.gs, my feed spans multiple columns and multiple rows.

For example, the articles are laid out horizontally across a nested grid comprised of 5 columns. Every 5 items, there’s a new row.

Row 1: [article div] [article div] [article div] [article div] [article div]
Row 1: [article div] [article div] [article div] [article div] [article div]
Row 1: [article div] [article div] [article div] [article div] [article div]
etc.

I’ll explain the next bit to check that I have a fundamental understanding of how these systems work.

In 960.gs, for nested grids, I need to declare the first item and last item in each row with classes of alpha and omega respectively:

<div id="article excerpt" class="alpha grid_1">
    <div>Article Heading</div>
    <div>Article Sub-heading</div>
</div>

Likewise, in Twitter Bootstrap I need to place each row in its own special DIV:

<div class="row">

    <div id="article-excerpt" class="span1">
    <div>Article Heading</div>
    <div>Article Sub-heading</div>
    </div>

    <div id="article-excerpt" class="span1">
    <div>Article Heading</div>
    <div>Article Sub-heading</div>
    </div>

    <div id="article-excerpt" class="span1">
    <div>Article Heading</div>
    <div>Article Sub-heading</div>
    </div>

    <div id="article-excerpt" class="span1">
    <div>Article Heading</div>
    <div>Article Sub-heading</div>
    </div>

    <div id="article-excerpt" class="span1">
    <div>Article Heading</div>
    <div>Article Sub-heading</div>
    </div>

</div>

If my grid isn’t nested, things are a little simpler. I realise I can simply place a span1 or grid_1 inside my container. Each row will auto-wrap to the next line when it gets to the maximum number of columns.

With this in mind, my WordPress loop would be very simple. It wouldn’t need to identify first and last items per row, or count, or increment numbers, or anything like that.

What I want to find out is if there’s a way to simplify my approach so that the loop doesn’t necessarily have to count items, kind of like this:

<div class="grid_5">
  <LOOP> <div class="grid_1">generic article</div> </LOOP>
</div>

Answer 1

It turns out that in Bootstrap, span divs will automatically wrap to the next line when they exceed the number of columns in a given row.

For example, my grid is a fixed width, 12 column grid.

My regular non-Wordpress/loop HTML looks like this:

<div class="container">

<div class="row">

    <div class="span3">
    Content
    </div>

    <div class="span3">
    Content
    </div>

    <div class="span3">
    Content
    </div>

    <div class="span3">
    Content
    </div>

</div>

Of course, when I integrate the loop, the number of span3 divs containing content will vary as I add more content to my site. However, Bootstrap happily wraps to the next line when a new span 3 is added to the mix.

This means that my loop doesn’t need to count the number of spans in a row in order to calculate when a row starts/ends.

It can look something like this:

<div class="container">

    <div class="row">

        <!-- WORDPRESS LOOP BEGINS HERE -->

        <div class="span3">
        Content
        </div>

        <!-- WORDPRESS LOOP ENDS HERE -->

    </div>

</div>