How to get my loop to pull posts into three columns

First of all, never use query_posts

Note: This function isn’t meant to be used by plugins or themes. As explained later, there are better, more performant options to alter the main query. query_posts() is overly simplistic and problematic way to modify main query of a page by replacing it with new instance of the query. It is inefficient (re-runs SQL queries) and will outright fail in some circumstances (especially often when dealing with posts pagination).

If you can’t use pre_get_posts to modify the main query properly, you must make use of either WP_Query or get_posts to create a custom query with

You can achieve what you want with simple CSS and by clearing your float every third post by using the build in loop counter $current_post

You can modify your code to something like this

<?php
/*
Template Name: Projects
*/
?>

<?php get_header(); ?>

<div id="content">
    <div id="contentwide">
        <div class="postarea_wide">


        <?php
        /*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts) */
        $paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
        $query = new WP_Query( array ( 'category_name' => 'decorating-home', 'posts_per_page' => 9, 'paged' => $paged ) );


        if($query->have_posts()) :  while($query->have_posts()) :  $query->the_post(); 
        ?>
            <div class="proj">
                            <div class="postimage">
                                <a href="https://wordpress.stackexchange.com/questions/163176/<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('project-thumb'); ?></a>
                            </div>
                            <div class="proj-title"><a href="https://wordpress.stackexchange.com/questions/163176/<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></div>
            </div>
        <?php       
            if(($query->current_post+1)%3 == 0){ 
                echo '<div class="clear" style="clear:left"></div>';
            }
        ?>

        <?php
        endwhile;
        echo paginate_links( $args );
        endif;
        ?>



        </div>
    </div>
</div>

<!-- The main column ends  -->

<?php get_footer(); ?>

Your CSS can then look something like this

.proj {
   width: 33,3%;
   float: left:
}

EDIT

You are almost there with your pagination links.

For reference, see

Change your pagination link codes to the following

<div id="pagenav">
    <div class="prev"><p><?php previous_posts_link( 'Newer Entries' ); ?></p></div>
    <div class="next"><p><?php next_posts_link( 'Older Entries', $query->max_num_pages ); ?></p></div>
</div>

Leave a Comment