How do I achieve a custom pagination!!

Hi there,

Try this CSS:

.custom-next-previous a:first-child {
    display: none;
}
.custom-next-previous a.post-page-numbers {
    padding: 15px 80px;
}

Hi leo,

thanks for the quick help.. I tried the code but now the button has disappeared..

Here's the test link: https://fatlossplanner.com/test1/

This is what I have in my CSS:

a.post-page-numbers {
    padding: 10px 20px;
    border: 2px solid #000;
    background-color: #628907;
    color: #fff
}

.custom-next-previous {
    text-align: center;
}
@media(max-width: 420px) {
    .custom-next-previous {
        margin-left: -20px;
        margin-right: -20px;
    }
}

.custom-next-previous a:first-child {
    display: none;
}
.custom-next-previous a.post-page-numbers {
    padding: 15px 80px;
}

Hmm my idea doesn't work on the first and last page unfortunately.

The second page works:
https://fatlossplanner.com/test1/2/

That is a WP core function unrelated to the theme and I don't see a way to add a custom class to previous and next so we can target them differently.

If the original issue is that the two buttons are of different sizes, maybe we can try to make them the same size?

Yes please... Can we reduce the size of "previous" Button?

Like make it to 25 percent and make next to 75 percent...
May be we can Rename Previous to "Prev" and keep next page..

So basically I want next button to popup and previous button to have lesser importance..

Just see if we can achieve something similar to this:

Link: https://ibb.co/hMVw9Nj

Thanks for checking..

Let's try one thing at the time.

Can you try the second snippet here to change the text first?
https://generatepress.com/forums/topic/changing-post-navigation-text-to-next-instead-of-title/#post-737583

I made the changes and here's the code..

PHP

add_filter( 'wp_link_pages_args', 'lh_wp_link_pages' );
function lh_wp_link_pages( $args ) {
    $args['next_or_number'] = 'next';
    $args['before'] = '<p class="custom-next-previous">';
    $args['after'] = '</p>';
    return $args;
}

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

Here's the CSS:

a.post-page-numbers {
    padding: 10px 20px;
    border: 2px solid #000;
    background-color: #628907;
    color: #fff
}

.post-navigation {
    display: flex;
}

.nav-previous {
    margin-right: auto;
}

.nav-next .next:before {
    display: none;
}

.nav-next .next:after {
    font-family: GeneratePress;
    content: "\f105";
    text-decoration: inherit;
    position: relative;
    margin-left: .6em;
    width: 13px;
    text-align: center;
    display: inline-block;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    speak: none;
}

.custom-next-previous {
    text-align: center;
}
@media(max-width: 420px) {
    .custom-next-previous {
        margin-left: -20px;
        margin-right: -20px;
    }
}

I tried to change the name to Prev.. but the changes happened at the bottom where it shows the related post.

Here's the test Link: https://fatlossplanner.com/testing45/

Ahn right that's for the post navigation.

The page link is 100% handled by WordPress so we are really out of the scope of this forum here as it's unrelated to the theme.

Can you check out this example and see if you are able to modify the code to make it work?
https://developer.wordpress.org/reference/functions/wp_link_pages/#user-contributed-notes

How do those blogs on wordpress manage to get the pagination working... :( anyways thanks for the help... I checked on different forum and they say, the theme needs to support it...

Ok..

I did a quick test without CSS by simply adding a button..

Test link: https://pressbuzzer.com/keep-testing-testinagain123/

Now, how do I hide, page numbers like.. that shows: Page: 1 2 3 4

If we cannot hide it then can be atleast.. customize that to show only the existing page or something like page 1 of 20 and so on.. ? and align it to center

Just answered it here:
https://generatepress.com/forums/topic/how-do-i-hide-pagination-numbers-page-123/#post-1372736

Please try to avoid posting the same question in two different places.

Thanks :)

This is resolved by using custom buttons and hiding pagination links....

Glad to hear :)