How to create "Next/Prev" like the one in `roots/index.php` instead?

Hey guys,

Goal: to display, preferably at best, most recent post, one post at the time with pagination works like when we select Latest Posts in Settings. Basically it looks like this:

But right now, I’m stuck with this output:

Which is not too bad. But on the second page upon click the Post 2 (which is essentially a previous post/page linkback), on Post 2 itself I don’t have pagination loaded. Maybe emulating what’s in my goal (see first link) is good enough for me.

Here’s the code I have for my content.php; Github gist

<?php $the_query = new WP_Query( 'showposts=1' ); ?>
<?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>
<?php the_content(__('(more…)')); ?>
<?php endwhile;?>
<div id="cooler-nav" class="navigation">
<?php $prevPost = get_previous_post(true);
        if($prevPost) {?>
        <div class="nav-box previous">
        <?php previous_post_link('%link',"<p>%title</p>", TRUE); ?>
<?php } $nextPost = get_next_post(true);
        if($nextPost) { ?>
        <div class="nav-box next" style="float:right;">
        <?php next_post_link('%link',"<p>%title</p>", TRUE); ?>
<?php } ?>

While for the Latest Posts view, it loads this index.php that looks like this; GIthub gist

<?php get_template_part('templates/page', 'content'); ?>
    <?php if (!have_posts()) : ?>
      <div class="alert alert-warning">
        <?php _e('Sorry, no results were found.', 'roots'); ?>
      <?php get_search_form(); ?>
    <?php endif; ?>
    <?php while (have_posts()) : the_post(); ?>
      <?php get_template_part('templates/content', get_post_format()); ?>
    <?php endwhile; ?>
    <?php if ($wp_query->max_num_pages > 1) : ?>
      <nav class="post-nav">
        <ul class="pager">
          <li class="previous"><?php next_posts_link(__('&larr; Older posts', 'roots')); ?></li>
          <li class="next"><?php previous_posts_link(__('Newer posts &rarr;', 'roots')); ?></li>
    <?php endif; ?>

I’ve searched throughout the forum and saw some posts by @enollo but so far all the solutions shared for the pagination_simple inside functions.php or libs/scripts.php doesn’t work on my end.

Please advise and thank you your concern!

Hi @ajmalafif,

I am not sure if I understood correctly. Are you trying to modify content.php to have a link to the prev/next post or are you looking for “Newer”/“Older” pagination on the index.php archive?

I’ve reviewed you gists and I think I know why you might be having issues. Could you try moving #cooler-nav into the while loop?

I just noticed you are including page-content.php into index.php. Is there a specific reason of doing it this way?

Hi @enollo

I believe I wanted to stick with static page instead of Latest Posts way of doing things,

but wanted to display one Recent post at a time, with pagination to previous/next post. I put it into the while loop but seems to have the same result.

And ops my bad it was supposed to be header, fixed the gist. It’s actually default code for roots/index.php though.

UPDATE: I think I’m getting somewhere with this right now. The pagination might actually work, but the reason why it doesn’t work after click to Post 2 (which is actually the Previous link) is because the template for Post 2 doesn’t have that pagination in it (came to realize when I see the comment form on the Post 2 but not on the frontpage.

Luckily this is no quest for the Holy Grail:

  1. Display your latest posts.
  2. Use pre_get_posts to set the main query to one post per page.
  3. Duplicate index.php and rename it front-page.php.

You can then edit front-page.php to your heart’s content, which coincidentally is one of the files in templates you’ll want to duplicate and change.


Yayyy!! Today’s my lucky day!

Thanks for this Nick. Will give this a run and share the result :smile:

Thanks again @enollo & @Foxaii !

Implemented @Foxaii suggestion and it worked! However the pagination will have the url to display instead of{{ post_url_here }}

So instead, I ended up editing/adding these files to make it work:

  • templates/content-{{ your_custom_template_name }}.php
  • templates/content-single-{{ your_custom_template_name }}.php
  • base-{{ your_custom_template_name }}.php

But that’ll mean it will only changes the frontpage. To apply this to all pages, I had to replace base.php inside libs/wrapper.php to base-{{ your_custom_template_name }}.php.

Hope that helps.