0

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.

1 Answer 1

0

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.

2
  • This will result in three loops. Hence infinite scrolling is required for three one them either. Anyway will think of it too.
    – Sergey
    Dec 14, 2012 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, 2012 at 18:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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