How to Add Responsive Pagination to WordPress

hedgehog-mascot

Having a responsive layout for your WordPress blog is a matter of necessity. More and more visitors access sites from mobile devices — not displaying content for them correctly can be a fatal mistake for any blogger. Having nice and useful pagination is just as important for user experience.

Install and Activate Plugins

To add pagination to your WordPress blog, I recommend the WP PageNavi plugin.

To make the pagination good-looking, I also recommend adding the WP PageNavi Style plugin.

Set Up the Plugins

After the plugins are activated, you can set them up in WordPress Dashboard > Settings > PageNavi and WordPress Dashboard > PageNavi Style.

The settings are pretty straightforward but you need to tinker with them for a while to get the results that will best suit your individual needs.

WP PageNavi Settings

WP PageNavi Settings

WP PageNavi Settings

WP PageNavi Style Settings

WP PageNavi Style Options

WP PageNavi Style Options

Replace Pagination Function Calls

Next, you need to replace any calls to pagination functions within your theme’s code with WP PageNavi’s function call.

The name of the function to be replaced might depend on the theme you are using.

You can refer to the Pagination topic within the WordPress codex to find out what function to look for.

Or you can use grep to search for pagination patterns in your theme’s PHP files.

To show you how, I downloaded the standard Twenty Fifteen theme, unzipped it and used it to find its pagination functions with grep.

To do the search, launch Command Prompt from Start > All Programs > Accessories and enter the following command:

Important Note

Obviously, both paths in the command have to be entered as they are present on your computer — the one calling grep and the one locating the downloaded and unzipped Twenty Fifteen theme.

Here is grep’s output:

grep's output in Command Prompt

grep’s output in Command Prompt

Clearly, the files we need to look at are archive.php, index.php, and search.php.

The customizer.php file is also listed a lot but it seems that it contains CSS definitions rather than pagination function calls.

One quick look into the three above-mentioned PHP files reveals that the function to be replaced is this:

Replace this code with the following simple line:

After replacing the codes, WP PageNavi and WP PageNavi Style will take over and display your pagination bar according to the plugins’ settings.

Make WP PageNavi Responsive

However, to make your pagination bar responsive, you need to do some further customizations.

Let’s say, that you set up your plugins to display a pagination bar like this:

page-navigation-example

A pagination bar

Right-click on the pagination bar on your site in your browser and select Inspect Element from the context menu.

This action will show you what elements are being called to display the page navigation bar.

inspect-element

Inspect Element

As you can see on the screenshot above, the elements called are:

Here’s what these elements refer to in the WP PageNavi plugin’s settings page:

  • span.pages → PageNavi Settings > Text For Number Of Pages
  • a.first → PageNavi Settings > Text For First Page
  • a.previouspostslink → PageNavi Settings > Text For Previous Page
  • span.extend → PageNavi Settings > Text For Previous …
  • a.page.smaller → PageNavi Settings > Text For Page
  • span.current → PageNavi Settings > Text For Current Page
  • a.page.larger → PageNavi Settings > Number Of Larger Page Numbers To Show
  • span.extend → PageNavi Settings > Text For Next …
  • a.larger.page → PageNavi Settings > Number Of Larger Page Numbers To Show
  • a.nextpostslink → PageNavi Settings > Text For Next Page
  • a.last → PageNavi Settings > Text For Last Page

Now you can decide which elements you would like to display on devices with small screen sizes, such as tablets and smartphones.

I suggest a minimalist approach. Only display a.previouspostslink, span.current, and a.nextpostslink. Everything else can be hidden.

To achieve this, add the following CSS code to WordPress Dashboard > Appearance > Edit CSS:

Using this CSS code defines that your site will not display most of WP PageNavi’s elements when accessed from a device with a screen width of 680 pixels or less.

You can even define various screen sizes and display the page navigation bar differently for each of them. It’s up to your creativity.

The page navigation bar on a mobile device will look like this:

navigation-small-screen

Pagination bar made responsive

But the page navigation bar on a device with a screen wider than 680 pixels, will still look like this:

page-navigation-example

Pagination bar centered

One more customization tip. To center the page navigation bar, add the following CSS code to WordPress Dashboard > Appearance > Edit CSS:

Although, the settings page of WP PageNavi Style contains an Align Navigation option where you can select center — it doesn’t work.

Important Note

To have the Edit CSS option available in your WordPress Dashboard’s Appearance menu, you need to install and activate the Jetpack by WordPress.com plugin. You should use that plugin anyway, because it has many awesome features.

Liked this post?

Subscribe to our newsletter to receive early notification of new posts and deals:

Next Post »« Previous Post

Leave a Reply

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