How do I achieve a custom pagination!!

[Hemant]

Hello Team,

Is there a way to achieve custom pagination something similar to below…
https://www3.forbes.com/business/best-places-to-retire-in-each-state-2018-vue/

Here’s the background..

I have been able to achieve pagination using below codes:

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;
}

And Below CSS:

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

Thanks so much to David for helping me out…

Here’s the URL: https://fatlossplanner.com/test/2/

Now the Previous Button is looking bigger than Next Page… So I just want to get Rid of Previous Button and Just keep the Next Page Button…

But the Next page button should be big and responsive something similar to this: https://www3.forbes.com/business/best-places-to-retire-in-each-state-2018-vue/

Can we achieve that using any css/php please? any help is greatly appreciated.

Make sure the button is big when giving the resolution.

[Leo]

Hi there,

Try this CSS:

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Hemant]

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;
}

[Leo]

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?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Hemant]

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

[Leo]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Hemant]

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/

[Leo]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Hemant]

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…

[Hemant]

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

[Leo]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Hemant]

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

[Leo]

Glad to hear 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts