[Resolved] How to add pagination to top of archive posts page?

Home Forums Support [Resolved] How to add pagination to top of archive posts page?

Home Forums Support How to add pagination to top of archive posts page?

  • This topic has 19 replies, 4 voices, and was last updated 1 year ago by Tom.
Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #549627
    Justin

    Hello! How would I go about adding the pagination at the top of the page to advance to additional pages on archive pages? As it stands, this feature is at the bottom but we’d like to a) Add it to the top, and b) change the styling to numbers in boxes. Are these tasks feasible? Thanks!!

    #549742
    Leo
    Staff
    Customer Support

    Hi there,

    At the very top of the page?

    If so try this snippet:

    add_action( 'generate_before_header', 'lh_move_pagination' );
    function lh_move_pagination() {
        if ( is_archive() ) {
            the_posts_pagination( array(
    	    'end_size' => 2,
    	    'mid_size' => apply_filters( 'generate_pagination_mid_size', 1 ),
                'prev_text' => apply_filters( 'generate_previous_link_text', __( '← Previous', 'generatepress' ) ),
    	    'next_text' => apply_filters( 'generate_next_link_text', __( 'Next →', 'generatepress' ) ),
    	) );
        }
    }

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

    #551091
    Justin

    Hmm, that’s close to what I need but instead of the very top of the page, I need it in the top of the section – similar to how this support forum has pagination at top and bottom of the forums section. How would I accomplish this for archived post pages?

    #551210
    Leo
    Staff
    Customer Support

    Hmm try the inside content container:

    add_action( 'generate_inside_container', 'lh_move_pagination' );
    function lh_move_pagination() {
        if ( is_archive() ) {
            the_posts_pagination( array(
    	    'end_size' => 2,
    	    'mid_size' => apply_filters( 'generate_pagination_mid_size', 1 ),
                'prev_text' => apply_filters( 'generate_previous_link_text', __( '← Previous', 'generatepress' ) ),
    	    'next_text' => apply_filters( 'generate_next_link_text', __( 'Next →', 'generatepress' ) ),
    	) );
        }
    }
    #554135
    Justin

    Thanks, that’s better. However, it’s in the upper left. How can I go about adjusting where it lives (i.e. upper right and not so far up?

    #554287
    Leo
    Staff
    Customer Support

    Actually can you try a different hook? I think it will work better.

    add_action( 'generate_before_main_content', 'lh_move_pagination' );
    function lh_move_pagination() {
        if ( is_archive() ) {
            the_posts_pagination( array(
    	    'end_size' => 2,
    	    'mid_size' => apply_filters( 'generate_pagination_mid_size', 1 ),
                'prev_text' => apply_filters( 'generate_previous_link_text', __( '← Previous', 'generatepress' ) ),
    	    'next_text' => apply_filters( 'generate_next_link_text', __( 'Next →', 'generatepress' ) ),
    	) );
        }
    }

    Let me know πŸ™‚

    #557584
    Justin

    That didn’t seem to make any difference. I appreciate the help, but do you have any other suggestions? I am looking to place the pagination at the top – very similar to pagination on these forums!

    #557606
    Leo
    Staff
    Customer Support

    Hmm I tested the code and it should show up similar to this site.

    Can you add the code in so I can see where it’s showing up for you?

    #558224
    Justin

    Sure! I’ve added it back. You’ll see on our /News page that the pagination is at the top, in the upper left of the container. It doesn’t look like the pagination on these forums. We also want to align it to the right of the content container (and to the left of the sidebar). Thanks in advance!

    #558562
    Tom
    Lead Developer
    Lead Developer

    Sorry we didn’t get back to you quicker – looks like you removed it again.

    Any chance you can show me a screenshot of what it looks like when you use Leo’s code?

    #558580
    Justin

    No worries! It’s actually still there.

    pagination

    #558634
    Tom
    Lead Developer
    Lead Developer

    Ah, missed it somehow!

    Try this code instead:

    add_action( 'generate_before_main_content', 'lh_move_pagination', 0 );
    function lh_move_pagination() {
        if ( is_archive() ) {
            the_posts_pagination( array(
    	    'end_size' => 2,
    	    'mid_size' => apply_filters( 'generate_pagination_mid_size', 1 ),
                'prev_text' => apply_filters( 'generate_previous_link_text', __( '← Previous', 'generatepress' ) ),
    	    'next_text' => apply_filters( 'generate_next_link_text', __( 'Next →', 'generatepress' ) ),
    	) );
        }
    }

    Let me know πŸ™‚

    #559029
    Justin

    It’s still in the same place πŸ™

    #559262
    Tom
    Lead Developer
    Lead Developer

    The HTML is actually in the correct place now.

    Now it just needs a little CSS:

    .site-main > .nav-links {
        padding: 40px 40px 0;
    }
    #559291
    Justin

    That worked! Perfect, thanks so much!!

Viewing 15 posts - 1 through 15 (of 20 total)
  • You must be logged in to reply to this topic.