WordPress: Fancy Site Navigation With the_posts_pagination()

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;
padding: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.

Conclusion

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

• WP-PageNavi – Download from WordPress.org
• WordPress Codex: Function Reference/paginate links
• Website with the most important HTML special characters
• WordPress Codex: Child themes

(dpe)

Photo by Markus Winkler on Pexels