WordPress 4.1 introduced a new function to display archive pagination as numbered links. Developers have been making this work for long time using custom functions or popular plugins like WP Page Navi, so its great to now have a core function for this purpose.

Code

To use it on an archive, you just need one line of code:

<?php the_posts_pagination(); ?>

If you like, you can also change the “Previous”/”Next” text or the number of paginated links that appear:

<?php the_posts_pagination( array(
	'mid_size' => 2,
	'prev_text' => __( 'Back', 'textdomain' ),
	'next_text' => __( 'Onward', 'textdomain' ),
) ); ?>

Styles

By default, the pagination appears just like normal links on a single line. However, with a tiny bit of CSS we can style these to stand out a bit more and make them easier to click.

Styled pagination links.
Styled pagination links.
.page-numbers {
	display: inline-block;
	padding: 5px 10px;
	margin: 0 2px 0 0;
	border: 1px solid #eee;
	line-height: 1;
	text-decoration: none;
	border-radius: 2px;
	font-weight: 600;
}
.page-numbers.current,
a.page-numbers:hover {
	background: #f9f9f9;
}

Conclusion

You can definitely get fancier with the styling, but this should at least get you started

ThemeShaper also wrote a great write-up of all the new theme functions introduced in WordPress 4.1, which is worth checking out.

Posted by:Devin

I’m a WordPress developer based in Austin, Texas. I run a little theme shop called DevPress and work for a startup called Nano. Find me on twitter @devinsays.

6 thoughts on “ Styling Posts Pagination ”

  1. Hello Devin;
    Thank you for the post. I wasn’t aware that there is a core function that outputs numbered pagination. I was using a custom function to do that.

    I am gonna update my themes with this core function.

  2. Many thanks, I faced problems with Masonic wp theme because of pagination codes I found in internet. Your code was the correct for that theme.

  3. Thanks so much! This is just PERFECT! And so simple to do, yet I have wasted most of the day looking for a solution LOL

    I’ve also added
    .screen-reader-text {
    font-size: 22px;
    }
    to the stylesheet to make the HEADING that comes by default so much smaller :)

    Cheers
    Stephen Spry

Leave a Reply

Your email address will not be published. Required fields are marked *