Archived topic
How to add pagination to top of archive posts page?
19 replies · Started by Justin on April 13, 2018
No problem :)
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.
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', __( '← Previous', 'generatepress' ) ),
'next_text' => apply_filters( 'generate_next_link_text', __( 'Next →', 'generatepress' ) ),
) );
echo '</div>';
}
}
Cheers Tom, that did the trick. I was close to working it out, been too long since I meddled with code!
Glad I could help! :)
