How do I integrate the Wordpress loop in 960.gs / Bootstrap nested grids?

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>

score 2 · Answer 1 · answered Feb 28 '12 at 20:35

Another way to think about this might be to use List Items <li> instead of <div>. You could then apply first-child psuedo-element styles. Unfortunately, last child is not supported by some browsers. But list items are nice and clean as you can float them however you wish.

Otherwise you could write 3 loops. The first will pull just the first post in the category you want. The second will offset by 1 and pull (X -1) of total posts (stopping short of full list). Then the third grabs only the last post.

<ul>
<?php
global $post;
$args = array( 'numberposts' => 5, 'offset'=> 1, 'category' => 1 );
$myposts = get_posts( $args );
foreach( $myposts as $post ) :  setup_postdata($post); ?>
    <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>
</ul>

You can use a variable in place of the integer for numberposts. Hopefully this helps get you started.

This is a great alternative solution, thank you. I'll experiment with it. — Olly F, Feb 28 '12 at 22:13

score 2 · Answer 2 · edited Apr 13 '17 at 12:37

For your specific problem : I'm not aware of specific wordpress function to detect first and last post while in the loop, but you can very easily work around with some custom PHP.

A quick and dirty example :

<div class="grid_4">

 <?php

 // Query the posts
 query_posts('posts_per_page=4');

 $i = 0;
 if ( have_posts() ) : while ( have_posts() ) : the_post();
 $i++;

 $class = '';
 if ($i == 1) then $class = ' first';
 if ($i == 4) then $class = ' last';
 ?>

 <div class="grid_1<?php echo $class; ?>">generic article</div>

 <?php endwhile; endif; ?>
</div>

If the amount of posts is not always 4, you can refer to the global var $posts_per_page

global $posts_per_page;
...
if ($i == $posts_per_page) then $class = ' last';

Now some advices : if I understand you correctly, you are trying to build a Wordpress Theme. First, if this is your first wordpress site, I suggest you to start with a already done theme, like the default one (Twenty Eleven) or one of the many available via the Appearance menu.

Indeed build a theme does not summarize to just put some php code in a html template : you have also to split your template in many files (functions.php, header.php, footer.php, single.php, and so ...)

To start I suggest you to study how the basic theme "Twenty Twelve" is constructed.

Some good resources :

Really great explanation, thank you. This will really help me get started. — Olly F, Feb 28 '12 at 22:12

score 0 · Accepted Answer · answered Jul 11 '12 at 18:28

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>

How do I integrate the Wordpress loop in 960.gs / Bootstrap nested grids?

3 Answers3