Modify Generatepress Next and Previous Post Link Text

GeneratePress is a lightweight WordPress theme that focuses on speed, stability, and accessibility. You can start your website off in the right direction whether you’re a hobbyist, freelancer, or agency.

Generatepress theme and plugin are very easy to install and have hands-on documentation. You also can customize the parts of theme, they have 24/7 support for any solutions.

See Also: How to Install WordPress Theme?

See Also: How to Install WordPress Plugin?

So let’s see in this trick, how we can customize the Generatepress theme and modify the Next and Previous post link text on a single page.

Change the Next / Previous Post Link Text From Post Title

To change the next and previous post link text on a single post page of the Generatepress theme, you have to add the filter hook function into the core WP code.

This filter hook function will override the link text of post pagination and you can add your own custom text like “Next post” and “Previous post”.

You can also modify the title attribute, href link tag, etc. For this trick, I’m going to change the link text.

Add the following code in the functions.php file of your Generatepress child theme. See our details guide on how to create WordPress child theme?

add_filter( 'next_post_link', function( $output, $format, $link, $post, $adjacent ) {
	$next_post = get_adjacent_post( false, '', false );
    if($next_post)
    	return sprintf(
    		'<div class="nav-next"><span class="next" title="%1$s"><a href="%3$s">%2$s</a></span></div>',
    		esc_attr( $next_post->post_title ),
    		__( 'Next post' ),
    		get_permalink( $next_post->ID )
    	);
}, 10, 5 );

add_filter( 'previous_post_link', function( $output, $format, $link, $post, $adjacent ) {
	$prev_post = get_adjacent_post( false, '', true );
    if($prev_post)
    	return sprintf(
    		'<div class="nav-previous"><span class="prev" title="%1$s"><a href="%3$s">%2$s</a></span></div>',
    		esc_attr( $prev_post->post_title ),
    		__( 'Previous post' ),
    		get_permalink( $prev_post->ID )
    	);
}, 10, 5 );

The above code hook will change the linking text to “Next post” and “Previous post” from “Post title”, without affecting the HTML attribute of <a> tag.

To style these Next / Previous post button, you can add the following CSS code in your stylesheet or you can add Additional CSS in Appearance/Customizer.

article .nav-previous a, article .nav-next a {
    background: #0d3e69;
    padding: 10px 40px;
    display: block;
    color: #fff;
    text-align: center;
    width: 200px;
    border-radius: 3px;
	font-weight: bold;
}
article .nav-previous a:hover, article .nav-next a:hover {
    background: #00c1d0;
    color: #fff;
}
article nav.post-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 30px !important;
}

So after adding the filter hook to the functions file and CSS code into the stylesheet, your Next / Previous post links will look like the following images.

You can modify the above filter hook and style these buttons as per your requirements.

Being Tricky 😉