Next and Previous tags to show more posts

what is TMA

I suppose TMA is the magazine styled theme The Morning After? I use it as well and would be very interested in how to show the latest 10 posts. That is something I have not managed yet.

This is the default starting point for all my custom client themes. I use it as an included file _nav_posts.php. Below is the entire contents of that included file.

<?php
/**
 * Display navigation to next/previous pages of posts when applicable
 * DRY include/partial
 *
 * Note that by default this also includes a list of the 5 most recent posts
 * immediately following the previous/next.
 *
 * nav
 *      ul
 *          li
 *
 * @author		zoe somebody
 * @link        https://beingzoe.com/zui/wordpress/kitchen_sink/
 * @license		https://en.wikipedia.org/wiki/MIT_License The MIT License
 * @package     KitchenSinkHTML5Themes
 * @subpackage  TwentyEleven
 * @version     0.1
 * @since       0.1
*/
if ( $wp_query->max_num_pages > 1 ) {
?>
    <div class="wp_next_previous_more clearfix" role="navigation">
        <ul>
        <li class="previous"><?php next_posts_link( '<strong><span>←</span> Older posts:</strong>' ); ?></li>
        <li class="next"><?php previous_posts_link( '<strong>Newer posts:<span>→</span></strong>' ); ?></li>
        <li class="more">
            <span class="more_title">Other recent posts...</span>
            <ul>
                <?php
                $next_post = get_adjacent_post(true,'',false);
                $previous_post = get_adjacent_post(true,'',true);
                if ( $next_post && $previous_post )
                    $exclude = $next_post->ID . "," . $previous_post->ID;
                else if ( $next_post )
                    $exclude = $next_post->ID;
                else
                    $exclude = $previous_post->ID;

                $featured_posts = get_posts("numberposts=5&exclude=$exclude");
                foreach($featured_posts as $post) {
                setup_postdata($post);
                ?>
                <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
                <?php } ?>
            </ul>
        </ul>
    </div>
<?php }

And here is the css to make that work:

/* Next, Previous, more navigation */
    .wp_next_previous_more {
        clear: both;
        margin-top: 3em;
        margin-bottom: 3em;
    }
    .wp_next_previous_more ul {
        list-style: none;
        padding-left: 0;
    }
    .previous, .next {
         margin: 0 0 36px;
         width: 45%;
    }
    .previous { float: left; padding-left: 18px;  }
    .next { float: right;  padding-right: 18px; text-align: right; }
    .previous span { margin-left: -18px; }
    .next span { margin-right: -18px; }

    .wp_next_previous_more .more ul {
        /* Make this second level be a proper list again */
        list-style-type: disc;
        padding-left: 18px;
    }
    .wp_next_previous_more .more_title {
        clear: both;
        display: block;
        /* h2 properties */
        font-size: 20px; line-height: 36px; margin-top: 36px;
        margin-bottom: 0em; font-weight: bold;
    }

I also have a second file _nav_post.php that I include under the content in single.php that does the same thing for next/previous post to post navigation.

I hope that is enough information to get you going. If you have questions just ask.

And you can see the a demo of it in action here.

—
Edit: Changed the nav tags in the sample code to div’s so as to not mess people people up with HTML5 junk ??

Er, be sure to change the <nav> tags to <div> unless you are using HTML5. Sorry should have edited that. Er, maybe I still should ??

Edit: Apparently you can delete your posts.

I’m not sure if anyone will see this, but I’ve just tried using the above suggestions without much luck.

I’ve just migrated my blog from wordpress.com to a self-hosted site, and I’d like to use this theme, but I’m not the best when it comes to coding.

I created a separate .php file called theme_nav_posts.php with the above code included and uploaded it to my templates directory.

Then, I added the CSS to the custom css file. Unfortunately, no changes seem to have taken place on the website.

The site I’m working on is at https://www.arishaintokyo.com.

If anyone has any suggestions, I’d love to hear it…I have a lot of posts I’d like people to be able to access.

You only need to make one new file (as described above)…
/yourtheme/_nav_posts.php

You already put the css in…
/yourtheme/styles.css

THEN you need to find the existing template file that outputs the loop (or calls/includes the loop). Immediately AFTER the loop in your code you need to actually include the new file ‘_nav_posts.php’. This is probably in ‘index.php’ but depending on the theme could be elsewhere and could be output in any number of ways. Just search the whole theme directory for ‘loop’ as most theme designers specifically use the word loop.

<?php
    get_template_part('_nav_posts.php'); // next/previous/recent/featured index to index
?>

Wow, thank you for such a fast response!

As I mentioned, I’m not great with code. I checked my home.php and index.php files. Both include the “loop” word. In both cases, the code reads:

<?php } // End WHILE Loop ?>

Does the code that needs to follow immediately after the loop need to be placed in both files? Or am I looking at the wrong thing entirely?

Apologies for my ignorance!

You found it. If you want this functionality on the home page and the “blog” index/browse proper, then yes, you will put it in both files. Wherever you put include that file you will have next/previous (though I find it hard to believe a woothemes doesn’t have browse previous posts).

So your code will look like…

<?php
       } // End WHILE Loop
       get_template_part('_nav_posts.php');
?>

And it should work.

However depending on the html markup, it might not look right being output right there. It could have to be outside of a container element to look right. But once you get it showing, just know you don’t have to output it right there, it can be anywhere OUTSIDE of the loop (e.g. above the loop, after the loop, and indeed I use similar logic in the sidebar as a widget).

Hmmm, ok. I feel like I’ve understood this pretty well, but I’m still not getting any results.

To recap:

I created a new php file (mine is called theme_nav_posts.php), and it’s been uploaded to the theme directory. The styles.css file has been updated with the CSS. I’ve added this code in the location indicated on both pages (I changed the call to ‘theme_nav_posts.php’).

I’m still not seeing any changes at all – the source code doesn’t show any navigation.

Any thoughts? Thank you again for your continued help.