Pagination and multiple loops

Question

Right, so what I currently have is a page split into three using a css grid. The third column is the sidebar, The first two each have a query for posts to display, and create a nice grid of posts (dummy content): http://puu.sh/2Xh9o.jpg

Each loop looks like this:

    <?php query_posts('showposts=5'); ?>
<?php $posts = get_posts('numberposts=5&offset=0'); foreach ($posts as $post) : start_wp(); ?>
<?php static $count1 = 0; if ($count1 == "5") { break; } else { ?>
-----Content -----
<?php $count1++; } ?>
<?php endforeach; ?>

This shows five posts in the first column, and the second loop displays five posts after (offset=5) the first five in the second column, totaling ten on the page and read top-bottom left-right. Naturally, this creates a problem with pagination.

What I would like to do is have the posts listed from left to right (but retain the fluid look it currently has with different sized posts) across both columns, or a tleast appear to (I can merge the columns into a two third/one third split), and when reaching the bottom, load the next 10 or so posts automatically (ultimately infinite scroll, but pagination first).

I'm not a php'er, and to be honest I don't understand most of this code. I've built this with help from the wordpress codex and sites like this, but have come to a stop. Any copy-pastable or easy to understand advice/answers are much appreciated.

Answer 1

There's no reason to use multiple loops to get this effect: The look you want comes from the jQuery Masonry script, which is included in recent versions of WordPress.

Your post list as you describe it is just the standard post index, so use a single standard loop -- that is, a WordPress loop, as described in the Codex: http://codex.wordpress.org/The_Loop. Don't use repeated instances of query_posts(), which will require far more queries and be less performant and more error-prone. Having a single loop will also make your pagination and (eventual) infinite scroll issues disappear.

To use Masonry in your theme, you'll need to enqueue the script correctly: http://codex.wordpress.org/Function_Reference/wp_enqueue_script

Masonry has a number of display options, and documentation for the script is at http://masonry.desandro.com/index.html

There's a good introductory-level writeup on building a theme using Masonry on the front page here: http://www.bluelimemedia.com/2012/04/30/jquery-masonry-and-wordpress/ and there are many themes out there that use it if you want to dig into their code for further examples. Note that while the tutorial does a great job of describing how to fit the pieces together, it was written before Masonry was included in the core WP package; you no longer have to download a copy of the script as she describes.