2 Columns with Independent Pagination

by

To do this, you will need to:

  • Use 2 queries not 1
  • 100% custom pagination, the built in pagination functions will never work with this, WP has no concept of 2 post main loops
  • Custom URLs

But before we go into this

A Significantly Easier Alternative That’s Nicer for Users

Just list the first 5 posts with a view more button underneath. Have the button send the user to the archive WP generates automatically, and hey presto, you sidestep your issues, improve usability, remove all the complicated mess you needed for your original idea, and it’s much more browser friendly. There’s probably an SEO benefit too.

For example:

<a href="https://wordpress.stackexchange.com/questions/275666/<?php echo get_term_link("videos', 'cat' ) ?>">View more Videos</a>

Will take the user to an archive of posts in the videos category, which you can theme with category.php, or even category-videos.php or archive.php etc. Significantly easier, and could even be turned into a widget or shortcode with minimal changes.

Complicated Pagination

Warning, what you’re trying to do is complicated, and not in the sophisticated kind of way, but the kludgey kind of way. There’s a good reason you don’t see this often, and when it is done, it’s a rich JS interface, not a PHP one.

First, you need 2 queries, you’ll need to figure out how to query for what you want, I recommend using tags or categories. Sorting them using PHP will end up with strange results, e.g. if you fetch 20 posts, and 19 of them go in the left column, it’ll be weird.

First things first, you need 2 queries, not 1:

$args1 = [
];
$q1 = new WP_Query( $args1 );

// display left column

$args2 = [
];
$q2 = new WP_Query( $args2 );

// display right column

Second, you’ll need to set up pagination, you will need 2 pagination fields in the URL, and you’ll need to handle pagination twice:

// figure out which page we're on, 1 if not set
$page1 = ( !empty( $_GET['column1'] )) ? (int)$_GET['column1'] : 1;
$page2 = ( !empty( $_GET['column2'] )) ? (int)$_GET['column2'] : 1;

$args1 = [
    'posts_per_page' => 5,
    'paged' => $page1
];
$q1 = new WP_Query( $args1 );

// display left column

$args2 = [
    'posts_per_page' => 5,
    'paged' => $page2
];
$q2 = new WP_Query( $args2 );

// display right column

Great, now we have 2 columns, and we can change which page they’re on URL parameters, aka ?column1=5&column2=3 for page 5 and 3 respectively

But we have no pagination controls! And what if we ask for page 9000? Well we can’t use the standard pagination system, because we decided to go for a complicated setup, so we have to build our own from scratch.

Here is the first columns pagination, assuming a simple next and previous page link:

if ( $page1 > 1 ) {
    ?>
    <a href="https://wordpress.stackexchange.com/questions/275666/?column1=<?php echo $page1-1; ?>&column2=<?php echo $page2; ?>">Previous Page</a>
    <?php
}
?>
<a href="?column1=<?php echo $page1+1; ?>&column2=<?php echo $page2; ?>">Next Page</a>

The second columns pagination is the same, but with the math on the $page2 variable instead.

If you’d like pagination with page numbers instead that can be clicked to, this will be a lot more complicated as you’ll need to figure out how many pages there are, loop through and print out each number with the relevant link, highlight the current page, etc

Comments

Having comments inline, and multiple comment areas, is not straight forward, and it sounds like a nightmarish user interface, but this question has the answer. Remember, Stack Exchange has a 1 question per question policy, you will need to ask a follow up question for comments if that doesn’t satisfy your query.

Conclusion

Now you have all the pieces and info necessary to do what you want to do. Again I advise against doing it. If it breaks it’ll be fiddly to debug, and it isn’t user friendly which will put off visitors. The standard pattern on the web is a link that leads to a more comprehensive focused archive. Multiple levels of pagination is just confusing

Further Reading