To add pagination to a WordPress site, or rather to change the standard navigation to ordinal pagination buttons, we use the WP-pagenavi plugin and 5 other plugins tested on 4.9.5.

From the author

Adding page-by-page navigation to the site of any system has both advantages (convenience for the visitor) and disadvantages (pages with duplicate titles appear in title tags). To add page-by-page navigation to a WordPress site, or rather, to change the standard navigation (previous page - next page) to ordinal buttons for page-by-page paging, we use the WP-pagenavi plugin.

Standard WordPress pagination

To begin with, I will note that the calls to the WP functions that are responsible for showing the site navigation are in the working template files. Therefore, if you have installed a working theme that is different from the standard one, then it may well be that the author of the theme has already included page navigation in the theme files and you already have it. If not, then the site navigation is standard, these are labels like "Previous page" and "Next page" at the bottom of the page.

Functions that output standard navigation: next_posts_link and previous_posts_link. Let's remember them, they will be useful to us.

WP-pagenavi plugin will help you add pagination to your WordPress site

To change the page-by-page navigation of the blog and add buttons for selective paging, we use the WP-pagenavi plugin. Plugin page: https://wordpress.org/plugins/wp-pagenavi/installation/

It can be done in three standard ways:

1. From by searching by name;
2. Download the plugin from its WordPress.org page (link at the bottom of the article);
3. Or download the plugin from its WordPress.org page, unpack the archive and upload the wp-pagenavi plugin directory to the / wp-content / plugins / folder and activate the plugin from the blog console.

How to run WP-pagenavi plugin

But activating the plugin is not enough, you need to work with the code of the working theme.

Note: When starting to make changes to your work theme files, do backup your site and its database. If something goes wrong, you can roll back to the backup.

The task for activating wp-pagenavi is as follows. You need to find the next_posts_link and previous_posts_link functions in the work theme files and replace the lines with them with:

Where and how to look for next_posts_link and previous_posts_link functions

Typically, the next_posts_link and previous_posts_link functions can be found in the theme files: index, archive, functions. This can be done in the Editor from the blog console.

Add paginated navigation to your WordPress site

If a search from the console does not bring quick results, and you simply do not see these functions, do the following:

• Using an FTP connection, copy the files of the working theme to our computer.
• Open all downloaded files in text editor, for example Notepadd ++.
• Next, we use the editor's search "Find in all files" and look for the names of our functions: next_posts_link and previous_posts_link.

• Having found them, we replace them with:

After replacement, we fill the edited file back into the site directory and check the appearance of the page navigation buttons on the site.

How to change the appearance of WP-pagenavi buttons

• By default, palagin buttons with page numbers are white / gray. The frames are square. Change appearance buttons, you can in the file: pagenavi-css.css. This file is located in the directory: wp-content / plugins / wp-pagenavi.

To edit, download the file to your computer and edit it in a text editor. At the same time, keep the original source of the file intact, as a backup.

More page navigation plugins

• Pagination by BestWebSoft. https://ru.wordpress.org/plugins/pagination/
• Simplistic page navi. https://ru.wordpress.org/plugins/simplistic-page-navi/
• Alphabetic Pagination. https://ru.wordpress.org/plugins/alphabetic-pagination/
• SX No Homepage Pagination. https://ru.wordpress.org/plugins/sx-no-homepage-pagination/
• WP-Paginate. https://ru.wordpress.org/plugins/wp-paginate/

Convenient site navigation is one of the key factors in overall site usability. When a user visits the site, he wants to find the information he needs as soon as possible. Site navigation includes: convenient search, clear categories, page-by-page navigation. In this article, I will show you how to create paginated navigation for a wordpress site.

Page navigation for blog Is just a must, especially if your blog has a news feed architecture. There are two options for how you can implement page navigation on wordpress without a plugin and using a plugin. In my opinion, to implement page-by-page navigation using a plugin, it is most convenient to use WP-PageNavi, it is very popular, easy to set up and installs without any problems on almost all WordPress themes, but still sometimes it doesn't work either. Therefore, I would advise as many features of the site as possible, including page navigation, implement without using plugins.

By default or you can say in its standard configuration CMS WordPress displays only records and there are only two navigation buttons: "previous" and "next" page. Agree, this significantly complicates the search. For example, if the user wanted to return to the first page, and he is on the seventh, then he will have to flip through seven pages.

Page navigation using the plugin.

As I said, the easiest way to create a user-friendly page navigation- this is WP-PageNavi plugin... The plugin starts working immediately after it is activated in the site console, you do not need to configure anything further in the plugin options for it to work. There is nothing difficult in installing it. I want to note that plugins are not always installed through the WordPress admin panel. The plugin can also be manually installed by hand, simply by uploading the plugin directly to the hosting in the wpcontet-plagins folder, after downloading, you will need to activate the plugin in the admin panel.

Page navigation without plugin.

In order to implement page navigation without a plugin, you need to add several files to your site theme, first, edit the file a little functions.php and add the job description code to it page navigation.

/*******************************

Navigation

*******************************/

function emm_paginate ($ args = null) (
$ defaults = array (
‘Page’ => null, ‘pages’ => null,
‘Range’ => 3, ‘gap’ => 3, ‘anchor’ => 1,
‘Before’ => ‘

’,‘ After ’=>‘

’,
‘Title’ => __ (”),
‘Nextpage’ => __ (‘‘ ’),‘ previouspage ’=> __ (‘ ‘’),
‘Echo’ => 1
);

$ r = wp_parse_args ($ args, $ defaults);
extract ($ r, EXTR_SKIP);
if (! $ page &&! $ pages) (
global $ wp_query;
$ page = get_query_var (‘paged’);
$ page =! empty ($ page)? intval ($ page): 1;
$ posts_per_page = intval (get_query_var (‘posts_per_page’));
$ pages = intval (ceil ($ wp_query-> found_posts / $ posts_per_page));
}

$ output = “”;
if ($ pages> 1) (
$ output. = “$ before $ title”;
$ ellipsis = “ …”;
if ($ page> 1 &&! empty ($ previouspage)) (
$ output. = “$ previouspage”;
}

$ min_links = $ range * 2 + 1;
$ block_min = min ($ page - $ range, $ pages - $ min_links);
$ block_high = max ($ page + $ range, $ min_links);
$ left_gap = (($ block_min - $ anchor - $ gap)> 0)? true: false;
$ right_gap = (($ block_high + $ anchor + $ gap)< $pages) ? true: false;
if ($ left_gap &&! $ right_gap) (
$ output. = sprintf (”,

$ ellipsis,
emm_paginate_loop ($ block_min, $ pages, $ page));
}

else if ($ left_gap && $ right_gap) (
$ output. = sprintf (”,
emm_paginate_loop (1, $ anchor),
$ ellipsis,
emm_paginate_loop ($ block_min, $ block_high, $ page),
$ ellipsis,

}

else if ($ right_gap &&! $ left_gap) (
$ output. = sprintf (”,
emm_paginate_loop (1, $ block_high, $ page),
$ ellipsis,
emm_paginate_loop (($ pages - $ anchor + 1), $ pages));
}

else (
$ output. = emm_paginate_loop (1, $ pages, $ page);
}

if ($ page< $pages && !empty($nextpage)) {
$ output. = “ $ i”;
}
return $ output;
}

The next step is to display the navigation, for this in the place we need, where page-by-page navigation will be used, for example index.php, serch.php, archive.php

add the code:

That's all, if everything is done correctly, then we already have page-by-page navigation on the site. All that remains is to edit the stylesheet for your site.

To do this, at the end of your style file, add the following code

/ * Navigation * /

Emm-paginate (margin-bottom: 60px; clear: both;)
.emm-paginate a (border: 0px solid #ccc; background: #ebebeb; color: # 333; margin-right: 7px; padding: 6px 14px; text-align: center; text-decoration: none;)
.emm-paginate .emm-title (color: # 555; margin-right: 4px;)
.emm-paginate .emm-gap (color: # 999; margin-right: 4px;)
.emm-paginate a: hover, .emm-paginate a: active, .emm-paginate .emm-current (color: #fff; background: # 5cbfd7; border: 0px solid # 63800c; margin-right: 7px; padding: 6px 14px;)
.emm-paginate .emm-page ()
.emm-paginate .emm-prev, .emm-paginate .emm-next ()

If you are editing someone else's theme, rather than creating a theme from scratch, then it is quite possible that it already uses the default pagination output and you may see the following code

You need to delete or comment it out so that you have duplicate navigation output and not display two navigation at the same time.

On the main page, as well as on the pages of categories, archives and in the search results, as a rule, page-by-page navigation (also known as pagination) is needed. WordPress blogs are no exception, they also use pagination when the output is split across multiple pages.

Previously, to implement this feature, third-party plugins were used, or special functions that were placed in the file functions.php... However, with the release of WordPress 4.1, the pagination function has been built into the core of the CMS, and now the internal WordPress functions are enough to implement page navigation, and there is no need to add third-party code or plugins.

I wrote earlier about a similar improvement on the part of WordPress regarding the TITLE tag - https://aboutwordpress.ru/post/wordpress-title/.

What is pagination

Pagination is the pagination of information. Also, this concept means the sequential numbering of pages, denoted by numbers located at the bottom, top or side of the page.

WP-PageNavi - WordPress pagination plugin

The most popular WordPress pagination plugin is WP-PageNavi. In all fairness, it copes with the task of pagination so well that there is no point in discussing and comparing other plugins.

WordPress Pagination - WP-PageNavi Plugin

Pagination wordpress without plugin

In order to make pagination on a site without plugins, we will use the built-in WordPress function the_posts_pagination (). In the right place we need to insert the following code (as a rule, these are files index.php, category.php and others like them):

The result of the the_posts_pagination () function will be something like this HTML code:

Removing the H2 heading from pagination

The H2-heading "Navigation through records" is immediately striking. Which in most cases does not belong on the site. To get rid of it, add the following code to the file functions.php:

/ * Remove H2 from pagination * / add_filter ("navigation_markup_template", "my_navigation_template", 10, 2); function my_navigation_template ($ template, $ class) (return "

"; }

Setting up pagination pages

By default, the_posts_pagination () displays the first and last page, and one page at a time around the current one. All others are replaced with ellipsis. This behavior can be changed using arguments:

• show_all - show all pages
• end_size - number of pages at the beginning and end of the list
• mid_size - number of pages to the left and right of the current page

For example like this:

2, "end_size" => 2,)); ?>

CSS pagination styles

(3)

WordPress is a very versatile blogging platform and plugins can make it even more user-friendly.

This also applies to page-by-page navigation (pagination) of pages, which is initially absent in WordPress. But you can easily fix this by choosing one of the 10 best plugins for your site.

1. WP-PageNavi

One of the most popular and frequently used plugins. Using the built-in function wp_pagenavi () familiar links ← Back | Next → will change to attractive pagination.

2.WP Smart Pagination

Another useful plugin that has a very handy feature. You can go to the required page by entering its number in the additional window.

3. Simple Pagination

One of the best and simplest plugins that can set additional pagination for posts and comments, greatly simplifying navigation on your WordPress site.

4. Alphabetic Pagination

Using this plugin, you can filter your posts and pages alphabetically. It is not only easy to install but also easy to use.

5. jPages pagination for WordPress

This is one of the best plugins for creating pagination for gallery pages, comments, and more. It transforms galleries into a paginated gallery.

6. Paginate

This plugin allows you to create page pagination according to your requirements. You can increase the numbering on one page, select the number of units to display. By default, there can be 10.

7. Next Post Fly Box For WordPress

One of the best plugins that creates navigation between the next and previous post in the form of a pop-up box on the left or right side of the window. When the user scrolls the page, a pop-up box appears where you can select the next or previous entry.

8. jQuery Paginator Plugin

The plugin allows you to choose between 3 types of pagination, if you set the desired parameter. This is one of the more attractive pagination plugins out there.

9. Smart Pagination

Great plugin that offers 11 different pagination options.

Bonus. CSS styles for WP-PageNavi plugin

A great collection of CSS styles for popular WordPress plugins WP-PageNavi and WP-Paginate. Includes HTML pages showing styles, and each style contains a separate CSS file.

Good day, dear friends! Today we will talk with you about how to make such a beautiful and convenient thing on WordPress as page navigation using WP-PageNavi plugin or simple code. I don’t know about you, but I personally don’t like the built-in navigation in the WordPress engine at all.

What kind of navigation is this? Okay, if the blog was still young and there wouldn't be many articles on it, but what if there are already more than 200-300 of them? In this case, this kind of navigation can easily scare away many of your readers, because no one wants to press the "previous entry" button until they lose their pulse in order to get to the desired material. In addition, this inscription looks so imperceptible that it may simply not be seen, which ultimately will lead to a decrease in page views per visitor, and the time spent on the site, and this is now very much when promoting any site that cannot be ignored. So, if you are still going to do page-by-page navigation, then you can use any method presented below.

Pagination for WordPress using the WP-PageNavi plugin.

Method 1... Download the WP-PageNavi plugin here and upload it to the blog, activate it, go to the "settings" "list of pages" in the blog admin area. Here we need to configure only one parameter, this is the "number of pages to display". I personally specified 10 to keep my navigation very visible to visitors. By the way, if suddenly your entire page navigation won't fit into your theme template, that is, if it looks something like this:

then you can simply subtract this number or, even better, remove the "page" caption from the plugin settings and replace them with arrows. Ok, after that we click save, and we see how we have a simple page-by-page navigation on the blog. If this did not happen, then go to the "appearance" "editor", open the main template file (index.php) and look for something like this: or something like that and change it to: , we save the record.

We do the same operation with the archive.php and search.php files if you want this navigation to be not only on the main page, but also in separate headings and when searching. Good, I want to warn you for every fireman that this plugin does not work for everyone, so if you fail, you can install yourself a similar WP-Page Numbers plugin. If you install it, then you will also need to insert a special code in the same files.

Beautiful stylesheets for page-by-page navigation plugin WP-PageNavi and WP-Page Numbers.

You have probably already noticed that my page navigation looks much better and more attractive than yours. This is due to the fact that I have an additional plugin WP-Page Numbers style , which works for both WP-PageNavi and WP-Page Numbers. If suddenly you are in codes, like me, so to speak, not a pro, in order to prescribe designs in the plugin files yourself, then you can just install this plugin for yourself. After installing it, a new PageNavi Style tab will appear in your admin area. In it, you can choose any page navigation styles you like.

In total, the plugin has 20 types of styles with all the colors that are available. Also, if you suddenly do not like anything from the list, then in the Select StyleSheet tab you can change the settings from "Existing Styles" to "Custom", an editor will appear in front of you, where you can specify the settings you need, colors, etc. If anything, here's their translation:

Heading Color - color of the heading.

Background Color - background color.

Active / Current Background Color- the color of the button when the mouse cursor is hovering over it.

Font Size - font size.

Link Mouse Hover / Active Color- the color of the link when you hover over it with the mouse cursor.

Link Border Color - border color of the page number button.

Link Border Mouse Hover / Active Color- border color, when you hover the mouse cursor.

Align Navigation - alignment on the page: center, left or right.

How to make pagination navigation without WP-PageNavi plugin?

If you are not a fan of installing new ones in order to improve the functionality and, then you can go a workaround - just install the code that will display this navigation, but before that, do it just in case.

Method 2. Go to the "appearance" "editor" and open the theme function file (functions.php) and at the very end before the tag?>

function wp_corenavi () (

$ pages = "";
$ max = $ wp_query-> max_num_pages;


$ a ["total"] = $ max;
$ a ["current"] = $ current;
$ total = 1; // 1 - display the text "Page N of N", 0 - do not display
$ a ["mid_size"] = 3; // how many links to show to the left and right of the current one
$ a ["end_size"] = 1; // how many links to show at the beginning and at the end
$ a ["prev_text"] = "" "; // link text "Previous page"
$ a ["next_text"] = "" "; // link text "Next page"
if ($ max> 1) echo "

";
}

By the way, there are some explanations in the code in Russian, so you can play with the numbers a little if you need it. Now, as with the WP-PageNavi plugin, go to the files: functions.php, index.php and archive.php we find there a line and after it, or a few more lines, add the code

Method 3... This method is similar to the second one, but the code is still slightly different. In the theme function file (functions.php) at the very end, before the?> Tag, insert the following code and save the entry.

function navigation () (
global $ wp_query, $ wp_rewrite;
$ pages = "";
$ max = $ wp_query-> max_num_pages;
if (! $ current = get_query_var ("paged")) $ current = 1;
$ a ["base"] = str_replace (999999999, "% #%", get_pagenum_link (999999999));
$ a ["total"] = $ max;
$ a ["current"] = $ current;
$ total = 0; // 1 - display the text "Page N of N", 0 - do not display
$ a ["mid_size"] = 2; // how many links to show to the left and right of the current one
$ a ["end_size"] = 5; // how many links to show at the beginning and at the end
$ a ["prev_text"] = "" Previous "; // link text "Previous page"
$ a ["next_text"] = "Next" "; // link text "Next page"
if ($ max> 1) echo "

";
}

. Now go to the style sheet file (style.css) and insert this style code somewhere, where the file codes start with a dot, and save the record.

.navigator (margin: 10px 7px;
background: #fff;
border: 1px solid #aaa;
padding: 15px;
overflow: hidden;
font-size: 13px;
color: # 000;)

.navigator a (background: #fff;
border: 1px solid #DDDDDD;
color: # 000000;
font-size: 13px;
padding: 10px;
text-decoration: none;)

background: # f1f8f9;
border: 1px solid # C6D2D4;)

.navigator a: hover (background: #fff;
border: 1px solid # 111;
color: # 0000cc;
font-size: 13px;
padding: 10px;
text-decoration: none;)

.navigator span.pages (padding: 3px 5px;
background: # f1f8f9;
border: 1px solid # C6D2D4;)

.navigator span.current (background: #fff;
border: 1px solid # 111;
color: # 0000cc;
font-size: 15px;
padding: 10px;
text-decoration: none;)

.navigator span.extend (padding: 3px 5px;
background: # f1f8f9;
border: 1px solid # C6D2D4;)

.str (background: #fff;
border: 1px solid #DDDDDD;
color: # 000000;
font-size: 13px;
padding: 10px;
text-decoration: none;)

Method 4... In the theme function file (functions.php) at the very end, before the?> Tag, insert the following code and save the entry.

function my_pagenavi ($ pages = "", $ range = 2)
{
$ showitems = ($ range * 2) +1;

global $ paged;
if (empty ($ paged)) $ paged = 1;

if ($ pages == "")
{
global $ wp_query;
$ pages = $ wp_query-> max_num_pages;
if (! $ pages)
{
$ pages = 1;
}
}

if (1! = $ pages)
{
echo "

»;
}
}

In the files: functions.php, index.php and archive.php we find the line there and after it, or a few more lines, add the code . Now go to the style sheet file (style.css) and, as in the previous example, insert this code and save the entry.

.pagination (
clear: both;
font-size: 12px;
margin-top: 10px;
text-align: center;
}

.pagination span, .pagination a (
text-decoration: none;
border: 1px solid #BFBFBF;
padding: 3px 5px;
margin: 2px;
}

.pagination a: hover (
border-color: # 000;
}
.pagination .current (
font-weight: bold;
}

Method 5... Download this file, take the code from it and paste it into (functions.php) at the very end before the?> Tag and save the entry. If anything, I apologize in advance for the inconvenience, as the code was too large to publish. Now in the files: functions.php, index.php and archive.php we find there the line and after it, or a few more lines, add the code

If anything, all the codes have been tested for operability, so one of the examples should work for you anyway. That's all, good luck.