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>