Tips, Tricks & Tutorials

WordPress: Fancy Site Navigation With the_posts_pagination()

April 24th, 2015

It was not until WordPress 4.1 was released that creating a paginated blog navigation was a fairly cumbersome affair, which required either a certain degree of development effort or a plugin. WordPress 4.1 makes this a thing of the past. It allows you to create a paginated blog navigation by adding one single tag to the theme’s index.php. Now you need a little bit of CSS to get a decent design. And that’s about it. It doesn’t take more than 10 minutes to develop your navigation, and the result is simply amazing. Let’s have a closer look at the possibilities of the new template tag. In our example, we use the Twenty Twelve theme.


Initial State: The Twenty Twelve WordPress Theme

The Twenty Twelve theme doesn’t provide a paginated blog navigation out of the box. Instead, you can navigate through blog pages by using a rather elementary “Older Posts/Newer Posts” navigation. Twenty Twelve is by far not the only theme using such navigation. The screenshot shows the initial state:


This navigation may be purposive, but it’s neither pretty nor user-friendly since you can’t see at first sight on which page of the blog you are. Therefore, we’ll show you today how to create a paginated navigation. Before WordPress 4.1 was released, pagination required a specially-coded function or a plugin like WP-PageNavi.

Pagination could have also been realized with the template tag paginate_links(); however, this tag, which exists since WordPress 2.1.0, seemed to be one of the best-kept secrets. I can’t think of one case where it was used. This article covers the newly introduced the_post_pagination() tag.

Step 1: Localize and Deactivate Old Blog Navigation

Before we start setting up the new navigation, we need to deactivate and localize the old blog navigation of the Twenty Twelve theme first. To do so, open the theme file index.php with any HTML editor. In line 28 you’ll find the tag twentytwelve_content_nav( ‘nav-below’ ), responsible for the display of the old navigation. Add two slashes after the opening php to deactivate the function.


When refreshing your website, you’ll notice that the blog page navigation disappeared.


Step 2: Integrate the New Template Tags

Put the new tag below the deactivated tag. See the screenshot for more details on where (line 30) and how to set the tag.


The Result of the New Tag in the Source Code

Now we have a paginated blog navigation in the theme view that looks like this:


This is how the code looks like in the HTML source code:


We get a nav element and a div element containing a elements and a span element. A little bit of CSS turns this code into a beautiful navigation.

Step 3: Adjust the_posts_pagination() Tag

A list of navigation elements certainly looks better and is semantically more correct. With a little trick, such a list can be displayed by the_posts_pagination() tag. Since the_posts_pagination() is based on paginate_links(), you can use the paginate_links() parameters for the tag.

The required – and slightly extended – tag looks like this:


The HTML code produced by this extended template tag is exactly what we want: a wonderful list.


The new blog list navigation in the theme view:


This is what we wanted. By simply entering a template tag, we can create a semantically paginated blog navigation.

Correct the Incomplete Translation

When taking a closer look at the HTML output of the_posts_pagination() template tag, you’ll notice that it is not completely translated. That’s not ideal but can be quickly corrected. As already mentioned, the_posts_pagination() is based on the existing paginate_links() tag, so you can use its parameters. Simply add the following to the template tag:


After refreshing the site, you’ll get a well-translated navigation. If you want to use special characters as I do, here’s a useful website for all HTML special characters.


Now all you need is some CSS to present your new pagination as an appealing navigation.

Step 4: Create the Required CSS

/* =Blog-Navigation - Pagination
----------------------------------------------- */
nav.pagination {
position: relative;
display: block;
.nav-links {
position: relative;
.nav-links ul {
margin: 0;
padding: 0,
.nav-links ul li {
list-style: none;
margin:0 10px 0 0;
float: left;
.nav-links ul li span.current {
padding: 10px 12px;
background: #777;
border: 1px solid #777;
display: block;
line-height: 1;
border-radius: 4px;
color: #fff;
.nav-links ul li a {
padding: 10px 12px;
background: #ddd;
color: #666;
text-decoration: none;
border: 1px solid #ccc;
border-radius: 3px;
display: block;
line-height: 1;
.nav-links ul li a:hover {
background: #999;
border-color: #888;
color: #fff;

Final State: The Completed Paginated Blog Navigation


The result looks great and is really appealing. It shouldn’t go unmentioned that you should create a child theme before modifying the theme. If you change the original theme files, you’ll lose your work after a theme update. That’s certainly not what you want.


You can create an appealing paginated blog navigation within 15 minutes using one single template tag. The development takes less time, and you don’t need a plugin anymore.

Related Links


Andreas Hecht is a journalist and specialist for WordPress and WordPress Security. He roams the web since its inception. He has published an ebook on WordPress Security, which you might want to take a look at.

Sort by:   newest | oldest | most voted
1 year 5 months ago

This is really helpful for the blogs which has high number of posts. Visitors can jump to any page without wasting their time. It will also help to reduce bounce rate. Thanks to WordPress and Andreas for this.

Samurai Jane
Samurai Jane
1 year 3 months ago

Thanks so much for this post, it is very helpful. One question: the html output has the text “Posts Navigation” contained between tags with a class of “screen-reader-text”. If I don’t want this to show up, I can state display: none for that specific but I was curious if you did it another way. Thanks so much!

Ankit Tiwari
1 year 2 months ago

Didn’t know it’s that easy to create custom navigation. It’s really helpful to have this for a site.

1 year 2 months ago

The “screen-reader-text” class makes the element hidden on the page, but still visible to screen readers for people with disabilities. Display:none instead hides it for everyone (sighted users and screen readers).
The Twentyfifteen theme uses this CSS to hide the text and keep it accessible :
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute !important;
width: 1px;

Babbu Mann
1 year 3 days ago

Good Article,

Will you please explain how to add this code in html (blogger site).

thanks in advance

9 months 8 days ago

this is really a fancy navigation, i implemented on one of my site and it looks cool…