PHPMatters Help You Better Hosting Your PHP-based Sites
How to Add WordPress Pagination for Better Content Display

How to Add WordPress Pagination for Better Content Display

Pagination is helpful for some websites that have a large number of blog posts and for some long articles that need to be split into multiple pages for a better showcase. It simply prevents your readers from having to load all your contents in one time. Frankly, this improves the page loading speed and reading experiences effectively. Besides, the “Previous” and “Next” links allow people to navigate through your old posts with much ease.

In the following, we’d like to tell you how to add WordPress pagination if you have loads of posts and some large articles.

Add WordPress Pagination using Admin Panel

In fact, WordPress has the default function for webpage pagination. You only need to enter your dashboard and click the Reading button under the Settings tab. Here, you can find an option that requires you to decide the maximum number of blog posts to be shown in one page. Then, you just need to enter your desired number and click the Save Changes button. Your website now is paginated automatically.

Pagination Using WordPress Admin

Add WordPress Pagination using Plugin

Another easy way for the adding of pagination is the utilization of WordPress plugin such as PageNavi. This plugin allows more advanced page navigation than the typical “Older/Newer” one.

After installing and activating it, you can go to the Settings tab from your admin and click the PageNavi button. In the next page, you can find a lot of options for you to configure the page navigation text.

Page Navigation Text

These fields are all self-explanatory. Let’s take the “Text for Number of Pages” as an example. If you want to display the ordering number of each webpage that is on the show, you can copy “%CURRENT_PAGE%” in the field and save changes. The final result just looks like as following.

Current Page Number

However, if you want to showcase the total number of pages, you can copy “TOTAL_PAGES” in the field. Check the final result as below.

Total Page Number

As for the rest settings of text, you can feel free to change the default words to suit your needs perfectly.

Now, you need to determine some special options for your page navigation. For instance, if you want to customize the navigation bar using CSS, you need to uncheck the option of using pagenavi-css.css. If you want to display the pagination number using a drop-down menu, you need to choose the “Drop Down List” for the style setting.

Page Navigation Options

In addition, you can decide whether to show the navigation even if there is only one page, how many posts can be shown in one webpage and whether to show the large page numbers such as 20, 30, 40 and many more.

In fact, if you are utilizing the default WordPress template such as the Fifteen Theme, the page navigation created by this plugin simply looks like as the following example.

Sample Pagination

If you are serious about your website design, you may want to do some customizations for this navigation bar. In this case, you can go to your Plugins tab and click the Editor button. Here, you can find a plugin file named as “wp-pagenavi/pagenavi-css.css”. Click it.

Now, you can use the CSS coding to make some changes, such as changing the color, border, padding, margin and font weight. If you are not familiar with the coding stuff, you can learn from this page. Note that as you may update this plugin in the future, you’d better copy and paste these codes into the file of your current child theme. In this way, you will not lose the changes once the plugin is updated.

In fact, this plugin has an add-on tool named as WP PageNavi Style, adding different styles to your pagination simply via some clicks. If you are a total newbie, this add-one might be suitable for you.

Special Notes

You have to add a special template tag into your theme file to truly activate the function of this plugin. Note that you cannot add this tag directly, but should use it to replace the lines for old/new post links in the file.

<?php wp_pagenavi(); ?>

Other Methods

In fact, there are a large number of WordPress templates that have the pagination function by default. Besides, you can also manually add the pagination by entering the coding stuff into your functions.php file or your style.css file. Detailed coding information can be learned from this page.