Pagination with multiple columns

CMS & WordPress
1

I am setting up multiple columns to show post. I’m not sure where to put the pagination when using two loops.


<?php get_header(); ?>

    <div id="content">
    
		<?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) == 0) : $wp_query->next_post(); else : the_post(); ?>
        <div id="left-column">
            <div <?php post_class('post') ?> id="post-<?php the_ID(); ?>">
                <div class="title">
                    <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
                </div><!-- end title -->
                <div class="hmeta">
                    <span class="clock"> Posted <?php echo human_time_diff(get_the_time('U'), current_time('timestamp')) . ' ago'; ?></span>
                </div><!-- end hmeta -->
                <div class="entry clearfix">
                <?php the_content(); ?>
                </div><!-- end entry -->
                <div class="postmeta clearfix">
					<?php edit_post_link('Edit', '<p class="alignright">', '</p>'); ?> 
                </div><!-- end postmeta -->
            </div><!-- end post -->
        </div><!-- end left-column -->
		<?php endif; endwhile; else: ?>
        <div>Alternate content</div>
        <?php endif; ?>
        <?php $i = 0; rewind_posts(); ?>

		<?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) !== 0) : $wp_query->next_post(); else : the_post(); ?>
            <div id="right-column">
                <div <?php post_class('post') ?> id="post-<?php the_ID(); ?>">
                    <div class="title">
                        <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
                    </div><!-- end title -->
                    <div class="hmeta">
                        <span class="clock"> Posted <?php echo human_time_diff(get_the_time('U'), current_time('timestamp')) . ' ago'; ?></span>
                    </div><!-- end hmeta -->
                    <div class="entry clearfix">
                    <?php the_content(); ?>
                    </div><!-- end entry -->
                    <div class="postmeta clearfix">
						<?php edit_post_link('Edit', '<p class="alignright">', '</p>'); ?> 
                    </div><!-- end postmeta -->
                </div><!-- end post -->
            </div><!-- end right-column -->
        
        <?php endif; endwhile; else: ?>
        <div>Alternate content</div>
        <?php endif; ?>

    </div><!-- end content -->

<?php get_sidebar(); ?>

<?php get_footer(); ?>
2

Firstly, you’re probably going to want to more the “left-column” and “right-column” divs to outside of the loop, then you’re fine to just put the post navigation above and/or below e.g.

<div id="content">
  <!-- Top posts nav can go here -->

   <div id="left-column">
    <!-- left col content -->
   </div>
 
   <div id="right-column">
    <!-- right col content -->
   </div>

  <!-- Bottom posts nav can go here -->
</div>
3

Didn’t even think of that (long day = brain dead).

Tried to get pagination without a plugin from bavotasan.com, but back links wouldn’t work.

Got it working with wp-page-numbers plugin and adding a container to hold the two columns!

<?php get_header(); ?>

    <div id="content">
    <div id="col-container" class="clearfix">
		<?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) == 0) : $wp_query->next_post(); else : the_post(); ?>
        <div id="left-column">
            <div <?php post_class('post') ?> id="post-<?php the_ID(); ?>">
                <div class="title">
                    <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
                </div><!-- end title -->
                <div class="hmeta">
                    <span class="clock"> Posted <?php echo human_time_diff(get_the_time('U'), current_time('timestamp')) . ' ago'; ?></span>
                </div><!-- end hmeta -->
                <div class="entry clearfix">
                <?php the_content(); ?>
                </div><!-- end entry -->
                <div class="postmeta clearfix">
					<?php edit_post_link('Edit', '<p class="alignright">', '</p>'); ?> 
                </div><!-- end postmeta -->
            </div><!-- end post -->
        </div><!-- end left-column -->
		<?php endif; endwhile; else: ?>
        <div>Alternate content</div>
        <?php endif; ?>
        <?php $i = 0; rewind_posts(); ?>

		<?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) !== 0) : $wp_query->next_post(); else : the_post(); ?>
            <div id="right-column">
                <div <?php post_class('post') ?> id="post-<?php the_ID(); ?>">
                    <div class="title">
                        <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
                    </div><!-- end title -->
                    <div class="hmeta">
                        <span class="clock"> Posted <?php echo human_time_diff(get_the_time('U'), current_time('timestamp')) . ' ago'; ?></span>
                    </div><!-- end hmeta -->
                    <div class="entry clearfix">
                    <?php the_content(); ?>
                    </div><!-- end entry -->
                    <div class="postmeta clearfix">
						<?php edit_post_link('Edit', '<p class="alignright">', '</p>'); ?> 
                    </div><!-- end postmeta -->
                </div><!-- end post -->
            </div><!-- end right-column -->
        
        <?php endif; endwhile; else: ?>
        <div>Alternate content</div>
        <?php endif; ?>
        </div>
     	<div class="navigation">
			<?php if(function_exists('wp_page_numbers')) : wp_page_numbers(); endif; ?>
    	</div><!-- end navigation -->

    </div><!-- end content -->

<?php get_sidebar(); ?>

<?php get_footer(); ?>
4

Hi,
I’m really interested in what is happening here but lacking some (!) understanding of where the parts fit together and how you got there. I would like to have two vertical column posts in the body (content), pages perhaps with posts nested with them.
I’ve been trying Page Columnist, WP Post Columns and WP Post Columns 2 to no avail.
One, are there other plug-ins I should be investing and two where would be the best place to begin to understand what is happening here? The intricacy of it all is baffling and keeping me from moving forward.
thanks so much

5

The code here is probably a little bit daunting, so hopefully if I explain it in pseudocode it might make a bit more sense.


Go in to posts loop
  if this is an "odd" post, show the post content
leave the posts loop

rewind the posts loop to the start

Go in to posts loop
  if this is an "even" post, show the post content
leave the posts loop

show pagination

Of course you’d also need to apply some CSS to get the first column on the left and second column on he right, but that’s not a tough job.

If you’d want to show posts on a page, you might need a plugin for that, or possible write some code to get (for example) the latest posts and loop through them.