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

[Tom]

No problem 🙂

[Jon]

Hi, I’ve used this to add top pagination to my website.

What I can’t figure out is what I need to change to the snippet in order to put a div wrapper around it, so that I can style it please.

The bottom nav for example has the above code at the start of it:

<nav id="nav-below" class="paging-navigation">
	<span class="screen-reader-text">Post navigation</span>
		<div class="nav-previous">
			<span class="prev" title="Previous"><a href="">Older posts</a></span>
		</div>
			<div class="nav-links">

Using this snippet adds the pagination to the top of the archive page, however it just has

<div class="nav-links">

Whilst I can style the nav-links class, that will also apply to the bottom pagination thus messing that up. It appears that adding the class “paging-navigation” to this same div would style it the same as the bottom div. I’ve tried editing the snippet but I don’t really know what I’m doing and just break it.

[Tom]

Hi there,

You could do this:

add_action( 'generate_before_main_content', 'lh_move_pagination', 0 );
function lh_move_pagination() {
    if ( is_archive() ) {
        echo '<div class="your-pagination-class">';
        the_posts_pagination( array(
	    'end_size' => 2,
	    'mid_size' => apply_filters( 'generate_pagination_mid_size', 1 ),
            'prev_text' => apply_filters( 'generate_previous_link_text', __( '&larr; Previous', 'generatepress' ) ),
	    'next_text' => apply_filters( 'generate_next_link_text', __( 'Next &rarr;', 'generatepress' ) ),
	) );
        echo '</div>';
    }
}

[Jon]

Cheers Tom, that did the trick. I was close to working it out, been too long since I meddled with code!

[Tom]

Glad I could help! 🙂

[Author]

Posts