Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

How can I divide WP loop into several columns based on post custom field and enable invinite scrolling?

Below is the desired output markup based on Twitter Bootstrap framework.

<div class="row">
    <!-- custom field = 'normal' -->
    <div class="span2 normal">
        <div class="post">
            <h1>Post Title</h1>
        </div>
        <div class="post">
            <h1>Post Title</h1>
        </div>
    </div>
    <!-- custom field = 'featured' -->
    <div class="span4 featured">
        <div class="post">
            <h1>Post Title</h1>
        </div>
        <div class="post">
            <h1>Post Title</h1>
        </div>
    </div>
    <!-- custom field = 'super-featured' -->
    <div class="span6 super-featured">
        <div class="post">
            <h1>Post Title</h1>
        </div>
        <div class="post">
            <h1>Post Title</h1>
        </div>
    </div>
</div>

You may see the example at Mashable.

share|improve this question
add comment

1 Answer

Use something like this for each column.

<!-- custom field = 'normal' -->
<div class="span2 normal">
<?php

// The Query
$the_query = new WP_Query(

array( 

'meta_key' => 'your_custom_field_name', 
'meta_value' => 'normal'

 );

// The Loop
while ( $the_query->have_posts() ) : $the_query->the_post();
        echo '<div class="post">
<h1>' . get_the_title() . '</h1>
</div>';
endwhile;

// Reset Post Data
wp_reset_postdata();

?>
</div>

Then follow the infinite scroll instructions found here.

share|improve this answer
    
This will result in three loops. Hence infinite scrolling is required for three one them either. Anyway will think of it too. –  Sergey Sedykh Dec 14 '12 at 10:20
    
If you want posts organised into three columns by three custom fields, you need three loops. Not sure what you mean by "Hence infinite scrolling is required for three one them either". Just apply infinite scrolling to the container that the columns are in. –  markcbain Dec 18 '12 at 18:56
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.