[Support request] in the post navigation, how to add links to the first and most recent post?

[Danpob]

Hello,
I want to have a post navigation bar similar to how webcomics are formatted:
There’s a link where you can navigate to the first post, previous post, next post, and last post in a category.

So far, I’ve only managed to get the ‘previous’ and ‘next’ post, but I’d like to have a link to the First and Last post as well.

Is there any easy way to achieve this?

Thanks!

[Tom]

Hi there,

Any chance you can link us to a page where we can see an example?

Let us know 🙂

[Danpob]

Hi Tom,

Here’s an example from a webcomic (http://trenchescomic.com/comic/post/19191)

View post on imgur.com

Here’s an example from a comic that uses the WP’s ComicEasel plugin and Comic Press theme (http://www.happyjar.com/)

View post on imgur.com

(The ComicEasel plugin doesn’t really fit in with what I want to do, so I prefer to customize GeneratePress instead)

I need the post navigation to go to the ‘first’, ‘previous’, ‘next’, and ‘last/most recent’ post. Currently, what’s built in to GeneratePress seems to be only the ‘previous’ and ‘next’ post navigation.

Thanks!

[Tom]

You could do something like this:

add_filter( 'previous_post_link', function( $output ) {
	$latest_post = get_posts( 'numberposts=1' );

	$latest_post = sprintf(
		'<div class="latest-post"><a href="%1$s" title="%2$s">First Post</a></div>',
		get_permalink( $latest_post[0]->ID ),
		get_the_title( $latest_post[0]->ID )
	);

	echo $latest_post . $output;
} );

add_filter( 'next_post_link', function( $output ) {
	$last_post = get_posts( 'numberposts=1&order=ASC' );

	$last_post = sprintf(
		'<div class="last-post"><a href="%1$s" title="%2$s">Last Post</a></div>',
		get_permalink( $last_post[0]->ID ),
		get_the_title( $last_post[0]->ID )
	);

	echo $output . $last_post;
} );

Of course, you’d need to style it to look however you want 🙂

[Danpob]

Hi Tom,

Thanks but this seems like it’s replacing “previous” and “next” with ‘first’ and ‘last’ post?
I would like to have all four: first, previous, next, and last ?

[Tom]

In my tests, it doesn’t replace the original links.

However, it does add “First” and “Last” while the other links use their post title.

If you want First, Previous, Next and Last, you’d want to do this:

add_filter( 'next_post_link', function( $output, $format, $link, $post ) {
    if ( ! $post ) {
        return '';
    }
  
    $next = sprintf(
        '<div class="nav-next"><span class="next"><a href="%1$s" title="%2$s">Next</a></span></div>',
        get_permalink( $post ),
        $post->post_title
    );

    $last_post = get_posts( 'numberposts=1&order=ASC' );

    $last_post = sprintf(
        '<div class="last-post"><a href="%1$s" title="%2$s">Last</a></div>',
        get_permalink( $last_post[0]->ID ),
        get_the_title( $last_post[0]->ID )
    );

    return $next . $last_post;
}, 10, 4 );

add_filter( 'previous_post_link', function( $output, $format, $link, $post ) {
    if ( ! $post ) {
        return '';
    }
  
    $prev = sprintf(
        '<div class="nav-previous"><span class="prev"><a href="%1$s" title="%2$s">Previous</a></span></div>',
        get_permalink( $post ),
        $post->post_title
    );

    $latest_post = get_posts( 'numberposts=1' );

    $latest_post = sprintf(
        '<div class="latest-post"><a href="%1$s" title="%2$s">First</a></div>',
        get_permalink( $latest_post[0]->ID ),
        get_the_title( $latest_post[0]->ID )
    );

    return $latest_post . $prev;
}, 10, 4 );

[Todd]

Beginner question on this, but hopefully an easy one to answer: Where would I stick the php you posted above to get the nav working (assuming I have a child theme)?

[Tom]

If you have a child theme, it would go at the bottom of your functions.php file (in the child theme).

More info on that method (and others) here: https://docs.generatepress.com/article/adding-php/

[Todd]

The following is the entirety of what’s in my functions.php and it doesn’t change the default paging nav. If you want to take a look, I think you have web address from the thread where I was harassing you about the white space under the post image. 🙂 Login: tom/generate

<?php

add_filter( 'next_post_link', function( $output, $format, $link, $post ) {
    if ( ! $post ) {
        return '';
    }
  
    $next = sprintf(
        '<div class="nav-next"><span class="next"><a href="%1$s" title="%2$s">Next</a></span></div>',
        get_permalink( $post ),
        $post->post_title
    );

    $last_post = get_posts( 'numberposts=1&order=ASC' );

    $last_post = sprintf(
        '<div class="last-post"><a href="%1$s" title="%2$s">Last</a></div>',
        get_permalink( $last_post[0]->ID ),
        get_the_title( $last_post[0]->ID )
    );

    return $next . $last_post;
}, 10, 4 );

add_filter( 'previous_post_link', function( $output, $format, $link, $post ) {
    if ( ! $post ) {
        return '';
    }
  
    $prev = sprintf(
        '<div class="nav-previous"><span class="prev"><a href="%1$s" title="%2$s">Previous</a></span></div>',
        get_permalink( $post ),
        $post->post_title
    );

    $latest_post = get_posts( 'numberposts=1' );

    $latest_post = sprintf(
        '<div class="latest-post"><a href="%1$s" title="%2$s">First</a></div>',
        get_permalink( $latest_post[0]->ID ),
        get_the_title( $latest_post[0]->ID )
    );

    return $latest_post . $prev;
}, 10, 4 );

[Tom]

Any chance you can open a fresh topic so the original author of this one doesn’t get a bunch of notifications?

Let me know 🙂

[Author]

Posts