Next and Previous tags to show more posts (10 posts)

  1. RobbieC
    Posted 5 years ago #

    I've been using TMA for a couple of years (my blog: Urbangrounds.com) and have bent it to do almost exactly what I want, with one exception...

    My main content area shows the latest 10 posts, like a more traditional blog. At the bottom of the home page (home.php), I'd like to create navigation links to "previous posts" that directs the user to a page that displays the next group of posts, and on that page to have navigation links to "next" and "previous" posts.

    This behavior seems to be standard in almost all other traditional blogs, but I can't figure out how to do it in TMA. Any help or suggestions would be greatly appreciated.

  2. Purab Kharat
    Posted 5 years ago #

    what is TMA

  3. libertasred
    Posted 5 years ago #

    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.

  4. beingzoe
    Posted 5 years ago #

    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.

     * 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        http://beingzoe.com/zui/wordpress/kitchen_sink/
     * @license		http://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">
            <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>
                    $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;
                        $exclude = $previous_post->ID;
                    $featured_posts = get_posts("numberposts=5&exclude=$exclude");
                    foreach($featured_posts as $post) {
                    <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
                    <?php } ?>
    <?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 ;)

  5. beingzoe
    Posted 5 years ago #

    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.

  6. arishaintokyo
    Posted 4 years ago #

    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 http://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.

  7. beingzoe
    Posted 4 years ago #

    You only need to make one new file (as described above)...

    You already put the css in...

    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.

        get_template_part('_nav_posts.php'); // next/previous/recent/featured index to index
  8. arishaintokyo
    Posted 4 years ago #

    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!

  9. beingzoe
    Posted 4 years ago #

    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...

           } // End WHILE Loop

    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).

  10. arishaintokyo
    Posted 4 years ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic