Styling Posts Pagination

By Devin

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.

About Devin

I am a developer based in Austin, Texas. I run a little theme shop called DevPress and help manage a WooCommerce shop with Universal Yums. Find me on twitter @devinsays.

8 Responses

  1. Zinedine Omari

    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.

  3. Luiggi

    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.

  5. Stephen Spry

    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

  7. Drigo

    Another option cleaner visual code: Thank WPTheming!

    .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 {
    display:none;
    }
    a.page-numbers:hover {
    background: #F4F5F9;
    }

Leave a Reply