[Resolved] How do I achieve a custom pagination!!

Home Forums Support How do I achieve a custom pagination!!

  • This topic has 12 replies, 2 voices, and was last updated 2 months ago by Leo.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #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.

    #1371295
    Leo
    Staff
    Customer Support

    Hi there,

    Try this CSS:

    .custom-next-previous a:first-child {
        display: none;
    }
    .custom-next-previous a.post-page-numbers {
        padding: 15px 80px;
    }
    #1371361
    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;
    }
    #1371391
    Leo
    Staff
    Customer Support

    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?

    #1371488
    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:

    Sample
    Link: https://ibb.co/hMVw9Nj

    Thanks for checking..

    #1372333
    Leo
    Staff
    Customer Support

    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

    #1372462
    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/

    #1372487
    Leo
    Staff
    Customer Support

    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

    #1372527
    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…

    #1372543
    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

    #1372737
    Leo
    Staff
    Customer Support

    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 🙂

    #1372905
    Hemant

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

    #1373450
    Leo
    Staff
    Customer Support
Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.