[Resolved] Navigation Previous next // Button Style

[Ernst Wilhelm]

I ‘ve turned on the pref next mode in a way
< prev post_title next post_title >

1st What do I need to do convert the post_title link into a button.
2nd Can I change the post_title into something like previous for the left option and next for the right option.

Cheers, Ernst Wilhelm Grüter

[Leo]

Hi there,

1. Let’s try solve #2 first then I’ll provide some CSS.

2. Can you try this PHP snippet here?
https://generatepress.com/forums/topic/changing-post-navigation-text-to-next-instead-of-title/#post-737583

Adding PHP: https://docs.generatepress.com/article/adding-php/

Let me know 🙂

[Ernst Wilhelm]

It works fine. Thanks.

[Leo]

Now you can add some CSS to make it a button style:

span.next, span.prev {
    background-color: #000;
    padding: 15px 10px;
}

[Ernst Wilhelm]

What do i need to do to apply the theme style to the button (e.g. post comment button or read more button)?

Thank you.

[Leo]

Can you modify the PHP snippet to this:

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

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

Then remove the CSS I provided above?

Let me know 🙂

[Ernst Wilhelm]

Hello Leo. Rmoving the css stuff gave it a pure text style approach. So I decided not to remove the css you provided. This comes close to what I want. Only outstanding issue for now is I need to change the color of the text wihtin the button into white.

>>> SORRY I RE-OPENDED THE TOPIC <<<

[David]

Hi there,

this CSS to change the next / prev text color:

span.next,
span.prev,
span.next a,
span.prev a {
    color: #fff;
}

[Ernst Wilhelm]

Hi David. Many thanks.

I am sorry but it there is another question poppin’ up (hopefully the last one 🙂 )
How do I define the color setting for mouse hover?

Cheers

[David]

Like so:

span.next:hover,
span.prev:hover,
span.next:hover a,
span.prev:hover a {
    color: #fff;
}

[Ernst Wilhelm]

Great. Now another question. The hoover color for the button itself. Your advice is really appreciated.

[David]

Try this:

span.next:hover, span.prev:hover {
    background-color: #000;
}

[Ernst Wilhelm]

Thanks David.

[David]

You’re welcome

[Author]

Posts