- This topic has 12 replies, 2 voices, and was last updated 6 months ago by
Leo.
-
AuthorPosts
-
July 21, 2020 at 11:02 am #1371159
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.
July 21, 2020 at 12:42 pm #1371295Leo
StaffCustomer SupportHi 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/July 21, 2020 at 1:39 pm #1371361Hemant
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; }
July 21, 2020 at 2:22 pm #1371391Leo
StaffCustomer SupportHmm 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/July 21, 2020 at 4:53 pm #1371488Hemant
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/hMVw9NjThanks for checking..
July 22, 2020 at 8:09 am #1372333Leo
StaffCustomer SupportLet’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-737583Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 22, 2020 at 10:05 am #1372462Hemant
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/
July 22, 2020 at 10:27 am #1372487Leo
StaffCustomer SupportAhn 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-notesDocumentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 22, 2020 at 10:50 am #1372527Hemant
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…
July 22, 2020 at 11:03 am #1372543Hemant
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
July 22, 2020 at 3:10 pm #1372737Leo
StaffCustomer SupportJust answered it here:
https://generatepress.com/forums/topic/how-do-i-hide-pagination-numbers-page-123/#post-1372736Please 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/July 22, 2020 at 9:39 pm #1372905Hemant
This is resolved by using custom buttons and hiding pagination links….
July 23, 2020 at 7:33 am #1373450Leo
StaffCustomer SupportGlad to hear π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.