Wp pagination. Paginate_links() - Displays pagination links for archive pages

• Helpful Hints

Note: The code above is used as an example. If you just copy it and paste it into your file, then all styles will be broken. If necessary, the code can be adjusted to suit your requirements. Also note the variable we are using to store our query, $custom_query, as it will be used to display the pagination for this particular query.

At the very beginning of our request, we set the $paged variable, which will be used inside our custom request. It is needed in order to tell WordPress which pagination page we are currently on. Without these two variables, numeric pagination in WordPress will not work properly.

Pagination styles

The following styles are placed directly in your theme's main CSS file. These styles define how your site's pagination is displayed.

/* Pagination */ .pagination ( clear:both; position:relative; font-size:11px; /* Pagination text size */ line-height:13px; float:right; /* Pagination float direction */ ) .pagination span , .pagination a ( display:block; float:left; margin: 2px 2px 2px 0; padding:6px 9px 5px 9px; text-decoration:none; width:auto; color:#fff; /* Pagination text color */ background : #555; /* Pagination non-active background color */ -webkit-transition: background .15s ease-in-out; -moz-transition: background .15s ease-in-out; -ms-transition: background .15s ease-in-out; -o-transition: background .15s ease-in-out; transition: background .15s ease-in-out; ) .pagination a:hover( color:#fff; background: #6AAC70; /* Pagination background on hover */ ) .pagination .current( padding:6px 9px 5px 9px; background: #6AAC70; /* Current page background */ color:#fff; )

Pagination function

The code below is all the code we need in order for pagination to work correctly. It is here that the returned request data is processed and our beautiful pagination is formed. Copy and paste this code into your functions.php file. You don't need to make any changes:

max_num_pages; if(!$pages) ( $pages = 1; ) ) if(1 != $pages) ( echo "

Display Numeric Pagination in WordPress

Now that everything is set up, we can display pagination on the site. Add the following block of code directly to your theme or template (depending on where exactly you want to display the pagination).

max_num_pages); ) ?>

Greetings, dear readers of the blog site. Today we will talk about the very popular WP-PageNavi plugin, which allows you to take the page navigation of your WordPress blog to a new level.

In principle, pagination, which is used by default, is quite digestible, but still the option that this extension offers looks much more attractive.

Why Use the WP-PageNavi Plugin

Judge for yourself, this is what the default pagination looks like:

And after installing the plugin:

or like this:

it depends on the options you select in its settings window.

In my opinion, the second option is much prettier than the first one, which is used by default. If you also think so, then you should read this article to the end and learn all about the nuances of installing and configuring this wonderful extension.

The plugin will need to be downloaded first. from here. Find the “Download” button on the right and save the wp-pagenavi.zip archive on your computer. Then unzip it and upload the resulting folder to the hosting server in the plugins directory wp-content/plugins/ .

To do this, you will need to access the files and folders of your WP blog using the FTP () protocol.

When unzipping, it happens that an extra external folder appears, so check this and get rid of it if necessary. I hope I explained clearly? Otherwise, WordPress will not see the plugin you installed otherwise. Okay let's continue.

After you copy the plugin files to the hosting server in the wp-content/plugins/ folder, you will need to go to the WordPress admin panel (http://your_sait.ru/wp-admin/) and select the "Plugins" item from the left menu of the admin panel ". At the top of the "Management" window that opens, you need to click on the "Inactive" link (or, if there is no translation, then "Inactive").

A window will open with all installed but not yet activated extensions. Find among them "WP-PageNavi" and click on the "Activate" link located under its name.

Paste the output code of the plugin into the desired WordPress templates

The plugin is activated, but in order to see the results of its work on your blog, you will also need to insert the wp_pagenavi function call code into the files of your current theme. .

Typically, pagination is used on the main page of a blog (the INDEX.PHP file in your theme folder), on archived content web pages (ARCHIVE.PHP), and in search results (the SEARCH.PHP file). Actually, we will need to insert the call code of the function we need into these files (templates).

Those. you will need to connect again via FTP and go to the folder with the current theme:

wp-content/themes/Name of folder with your theme

Find INDEX.PHP in it and open it for editing in an editor convenient for you (I use advanced Notepad ++ for this purpose - I have an article on working with it). Now your task is to find the section of code in INDEX.PHP that is responsible for moving to the previous or next page. Difficult task, isn't it? Although, of course, for whom.

INDEX.PHP is not very large, study its contents carefully for comments related to pagination, for example, these:

Typically, the creators of WordPress themes include in such comments the code area responsible for displaying pagination. The standard code itself may look, for example, like this:

Once you have identified the desired fragment, you will need to replace it with the line calling the wp_pagenavi function:

Now you need to save the changes made in INDEX.PHP, go to the main page of your blog and make sure everything works as it should. Those. instead of the standard pagination used in WordPress, you are using the beauty of WP-PageNavi.

By the way, the standard pagination can not be removed from the INDEX.PHP code, so that when you remove this plugin, you will not have problems with it later. To do this, you will need to write in INDEX.PHP, instead of the standard navigation code, a condition that determines when to display the standard and when the WP-PageNavi panel.

The condition will depend on whether the WP-PageNavi plugin is installed on your blog or not. It might look something like this:

Condition in this code:

If(function_exists("wp_pagenavi"))

checks if the plugin is installed, and if it is not installed, then the standard script will work:

else(?>

And if WP-PageNavi is installed, then the navigation bar will be formed by its forces:

{ ?>

Although, of course, you can not bother and just replace one with another, but that's up to you.

So, now you will have to do the same for the ARCHIVE.PHP and SEARCH.PHP files from your theme folder (wp-content/themes/Name of your theme folder).

WP-PageNavi plugin settings for WordPress blog

In order to get into them, you will need to select in the admin panel from the left menu, in the "Parameters" area, the "List of pages" item. A window will open with the active tab "Page list templates":

In the field "Template of the general list of pages", in the figure above, the display of the current page and the total number of pages is set. With this option to fill in this field, the WP-PageNavi panel will look like this:

You can add the word "Page" to this field if you prefer:

Page %CURRENT_PAGE% of %TOTAL_PAGES%

And if you want, you can even clean it up. In the columns "Element "Current Page"" and "Element" Page "" leave everything as it is. Here you can set the display of the inscription for the current and all other web pages as a serial number. It will turn out something like this:

In the fields "Text For First Page" and "Text For Last Page" you can set the text for the buttons to go to the first and last:

Instead of text in the “Text For First Page” column, you can write one, and the “Text For Last Page” field - %TOTAL_PAGES% (instead of this inscription, the number of all web pages will be displayed):

In the fields "Text For Next Post" and "Text For Previous Post" arrow signs are written to display on the buttons for moving to the next and previous:

I cleared the next two fields, because otherwise, two white buttons with no text were displayed instead. It is possible that you will not have this and you yourself decide what they are for.

Let's move on to further settings called "List settings":

The "Use pagenavi-css.css" checkbox allows you to disable or include the Cascading Style Sheets (CSS) file that comes with the plugin. In the "List style" field, you can choose one of two CSS styles from the drop-down list.

You have seen the “Normal” in the previous screenshots, and when choosing the “Drop-down List” style, you will get something like this view of the WP-PageNavi panel in WordPress:

If you check the "Always Show Page Navigation" box, then even for web pages that do not yet require numbering (let's say that there are not enough posts on the main page to make the split), navigation will still be displayed something like this :

In "Number Of Pages To Show" you can set how many pages will be displayed as a continuous (consecutive) series of numbers. The transition to the rest will be possible using the next and previous buttons, as well as the buttons for moving to the first and last. I put a five there, as a result I got:

In "Number Of Larger Page Numbers To Show" you can set how many far web page numbers (greater than the currently displayed numerical value numbers) will be shown after the next button.

And in the "Show Larger Page Numbers In Multiples Of" field, you can set the step with which the numbers of distant web pages will be displayed. Let's say that in the first field I put a three, and in the second two:

As a result, the PageNavi panel will look like this:

Those. the numbers of only three distant web pages are displayed with an interval (step) equal to two (6, 8, 10). In order not to use the display of distant numbers, it will be enough for you to put a zero in the column “Number Of Larger Page Numbers To Show”.

To apply and display the changes you set, in the plugin settings you will need to click on the "Save changes" button located at the bottom.

Changing the Appearance of the Pagination Bar

In order to change the color scheme, padding, fonts, and other appearance attributes of the pagination bar displayed on your blog, you will need to add the necessary CSS properties to the cascading style sheet file of this plugin.

True, in order for it to take the form shown in the screenshots in this article, I added additional properties not to the plugin CSS file (/wp-content/plugins/wp-pagenavi/pagenavi-css.css), but to the file I use themes (wp-content/themes/name of the folder with the theme/style.css).

In this file, the CSS properties that define the appearance of the WP-PageNavi panel look like this:

#content .wp-pagenavi a, #content .wp-pagenavi a:link, #content .wp-pagenavi a:active ( padding: 3px 8px 3px 8px; margin: 2px; text-decoration: none; color: #fff; border: 0px line-height:24px; background-color: #2b99ff; ) #content .wp-pagenavi a:hover ( color:#fff; background-color: #154b7d; ) #content .wp-pagenavi span.pages ( padding: 3px 8px 3px 8px; margin: 2px 2px 2px 2px; ) #content .wp-pagenavi span.current ( padding: 3px 8px 3px 8px; margin: 2px; line-height:25px; font-weight: bold; color: #add352; background:#26343c; )

I draw your attention to the fact that the class names and ID () that are used here refer specifically to my template. Let me explain the purpose of some CSS rules and properties.

#content .wp-pagenavi a, #content .wp-pagenavi a:link, #content .wp-pagenavi a:active ( padding: 3px 8px 3px 8px; margin: 2px; text-decoration: none; color: #fff; border: 0px line-height:24px; background-color: #2b99ff; )

sets outer and inner margins (see about them) for panel buttons (actually for links from these buttons, since these properties will be applied to links specified by the A tag and placed in the wp-pagenav container).

This rule also sets the color of the link text (white color is set in the color property: #fff; - ).

There will be no border around the links (border property: 0px), and the background color for containers with these links will be determined by the background-color property: #2b99ff; . It is this color that you can see in the screenshots above for the inactive buttons of the pagination panel.

CSS rule:

#content .wp-pagenavi a:hover ( color:#fff; background-color: #154b7d; )

sets the color for the text and background of the container (button) with the link to which the mouse cursor is currently hovering (CSS properties of the hover link - a:hover - ).

The link text color is still white, but the background color (actually the color of the button) is changed to a darker one (background-color: #154b7d;). Those. the visitor, moving the mouse cursor over the navigation bar buttons, will see the button change color, which creates a sense of interactivity.

CSS rule:

#content .wp-pagenavi span.current ( padding: 3px 8px 3px 8px; margin: 2px; line-height:25px; font-weight: bold; color: #add352; background:#26343c; )

Sets the appearance of the button with the number of the currently open blog page (this link will have a SPAN tag with the CURRENT class in the code). Such a button would look the same as the button with the number one in the figure below:

This CSS rule changes the background color of this active button (background property: #26343c), the color of the link text on this button (color: #add352 property), and besides this, the font of the link text will be bold due to this CSS property — font-weight :bold().

But to change the appearance of the pagination panel, you can add the necessary CSS properties to the stylesheet of the plugin itself. You can open this cascading style sheet file for editing from the folder:

/wp-content/plugins/wp-pagenavi/pagenavi-css.css

For example, in order to get a panel like this:

You will need to download this archive, unpack it and copy the IMAGES folder to the folder with the WP-PageNavi plugin, which you can find in the following path:

/wp-content/plugins/wp-pagenavi

The IMAGES folder contains a graphic file fon.gif , which will form the background for the PageNavi panel. Now you will need to open the /wp-content/plugins/wp-pagenavi/pagenavi-css.css file for editing and replace the code there with the following rules:

wp-pagenavi ( width: 100%; overflow:hidden; padding: 4px 0px 4px 0px; margin-left: 0px; border: 1px solid #00598F; background: url("images/fon.gif") center left repeat-x ; ) .wp-pagenavi a, .wp-pagenavi a:link, .wp-pagenavi a:visited ( padding: 4px 5px 4px 5px; margin: 2px 0px 2px 0px; color: #ffffff; font-weight: bold; text -decoration: none; ) .wp-pagenavi a.last ( padding: 4px 5px 4px 5px; ) .wp-pagenavi a.first ( padding: 4px 5px 4px 5px; ) .wp-pagenavi a:hover ( background-color: #00598F; color: #FFFFFF; font-weight: bold; ) .wp-pagenavi span.pages ( padding: 4px 5px 4px 5px; margin: 2px 0px 2px 0px; color: #FFFFFF; background: url("images/fon .gif") center left repeat-x; background-color: #4f4f4f; font-weight: bold; ) .wp-pagenavi span.current ( padding: 4px 7px 4px 7px; margin: 2px 0px 2px 0px; font-weight: bold; border-top: 1px solid #00598F; border-bottom: 1px solid #00598F; color: #FFFFFF; background-color: #00598F; font-weight: bold; ) .wp-pagenavi span.extend( padding: 4px 0px 4px 0px; margin: 2px 0px 2px 0px; margin-right: 0px; margin-left: 0px; border-top: 1px solid #00598F; border-bottom: 1px solid #00598F; color: #FFFFFF; background: url("images/fon.gif") center left repeat-x; font-weight: bold; ) .wp-pagenavi span.next-prev ( font-family: Arial; /* IE fix */ )

Save your changes to pagenavi-css.css and visit your blog to see if the navigation has changed. If it has not changed, then try refreshing the contents of the window in the browser by holding the SHIFT button, and if this does not help, then clear the browser cache.

In this article, I will show you how to add pagination to WordPress. Although the engine displays links to the next and previous post to the user, pagination improves the viewing of the site's pages.

Using a Theme

An easy way to add pagination to WordPress is by using themes. Some themes already include this feature and tools for customizing pagination links. For example, changing the color and appearance of links.

To see if a theme supports this feature, go to the Appearance section of your WordPress admin panel.

Click the " Customize " button. Depending on the theme you are using, a pagination section may appear here. It can also be included in other theme customization sections.

If you did not find the settings WordPress pagination without a plugin, click "X" to return to the administration panel. You will need to use one of the methods to add pagination to your site.

Installing a theme with pagination support

Features that are supported by one theme are not always available in another. The tricky part is finding a theme that contains the features you need and then tweaking it with plugins or code editing.

To add a theme that supports pagination:

In the search field, enter " pagination". WordPress automatically filters topics and finds those in the description that contain the given term.

Find a theme you like, install and activate it. If you are not sure if it is suitable, click on the " Preview».

Note. The preview is a simple system and does not take into account many elements such as the header image, widgets, and overall site layout.

Using pagination plugins

In this article, I will talk about the Pagination by BestWebSoft plugin. With it, you can add pagination for various sections of your WordPress site.

To install the Pagination by BestWebSoft plugin, do the following:

• In the WordPress admin panel, go to the "Plugins" section and click on the button to add a new plugin.

• Find plugin " Pagination by BestWebSoft". Install and activate it.

• A new feature will be added to the admin panel menu. Click on the new menu item to open the BWS panel. All BestWebSoft tools are contained in this section. If you have other tools installed, click the Pagination link.

In settings WordPress pagination plugin you can set up pagination for various parts of the site: for the main page, for archive pages, blog, and so on.

Go to the "Appearance" tab. In this section, you can change the way pagination is displayed on the site. And also change the background and text color, borders and other parameters. After you've made your changes, click on the "Save" button at the bottom of the page.

Go to the " Custom code". Here you can set your own CSS styles to customize the display of pagination. After you finish editing the code, click on the " Save Changes", located in the lower left corner.

After that, the plugin will do the rest automatically. After WordPress pagination output you just have to add content.

Other plugins

There are many plugins available for WordPress that provide various pagination customization options.

WP-PageNavi

The plugin allows you to change the text of the pagination section, as well as the number of links to the posts that will be displayed. One of the reasons why so many people use the plugin is that it has its own CSS file. This allows developers to set a unique pagination display.

WP-Paginate

The plugin provides flexible settings. It also supports the ability to add custom CSS code. This plugin contains a few basic options, including displaying links and using blue or gray buttons.

Pagination by HocWP

Simple Plugin pagination of WordPress posts, which doesn't contain a lot of customization options. However, it allows you to effectively add pagination links at the bottom of your posts.

Using pagination for WordPress posts

If you have a CSS code editor, then you can make changes to themes and plugins. For example, the PageNavi plugin provides access to its own CSS file.

You can add custom code for other areas of the page through the theme's style.css file. And also change the background color, the display of elements on hover, and much more.

How to make your site more interactive

Pagination of WordPress pages makes the site more interactive. With its help, visitors can choose which pages to go to. This is one of those additions that any developer can make. At the same time, it significantly improves the user experience.

WordPress is a very versatile blogging platform and with the help of plugins it can be made even more user friendly.

This also applies to page navigation (pagination) of pages, which is not natively available on WordPress. But this can easily be fixed by choosing one of the top 10 plugins for your site.

1.WP-PageNavi

One of the most popular and frequently used plugins. With built-in function wp_pagenavi() habitual 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 desired page by entering its number in the additional box.

3. Simple Pagination

One of the best and simplest plugins that allows you to set additional pagination for posts and comments, making it much easier to navigate your WordPress site.

4. Alphabetic Pagination

With this plugin, you can filter 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 pagination of gallery pages, comments, etc. It transforms galleries into paginated galleries.

6. Paginate

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

7. Easy Pagination for WordPress

Make long posts and pages more attractive with sliders: Horizontal Slider, Vertical Slider or Fade. Horizontal and vertical sliders can be combined with 32 jQuery effects.

8. 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 popup 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 post.

9.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 most attractive pagination plugins.

10. Smart Pagination

A great plugin that offers 11 different pagination options.

Bonus. CSS styles for WP-PageNavi plugin

An excellent collection of CSS styles for popular WordPress plugins - WP-PageNavi and WP-Paginate. Includes HTML pages with style demonstrations, and each style contains a separate CSS file.

09/24/2013 Romchik

The first thing we need to do is download the plugin. I chose a plugin for a long time from a variety of plugins that allow you to make pagination. But one heavily loads the system, the second is somehow not adequate. And my choice was the WordPress plugin WP-Paginate, which you can download from the official repository. The plugin is easy to install. And it has basic settings, which we will consider below. Let's move on to setting up pagination.

The second thing we need to do is set up in the CMS itself how many posts we want to display on the page. To do this, in the admin panel, go to "Options"->"Reading" and in the field "Display no more than on blog pages" specify the required number. So, I have 5, i.e. No more than five posts will be displayed per page. And click "Save Changes".

Ok, now let's move on to the third step. In the admin panel, go to "Plugins" -> "Installed" and find our plugin WP-Paginate. Let's activate it. To do this, click on the link under the name of the plugin "Activate"

Fourth - configure the plugin. To do this, we can immediately click "Settings"

Or in the admin panel go to "Settings"->"WP-Paginate"

Which way to choose is up to you. We get to the pagination plugin settings window.

• Pagination Label - specify the text that will be placed before the list of pages.
• Previous Page - specify the text of the link to the previous page
• Next Page - specify the text of the link to the next page
• Before Markup and After Markup - specify the html code that will be placed before and after the list of pages.
• Markup Display - if we check the box, then the html code that we indicated above will be displayed even if the list of pages is empty
• Page Range - the number of pages displayed after the current page
• Page Anchors - the number of links to show at the beginning and end of the list.
• Page Gap - the minimum number of pages before ...

After changing all the settings, click "Save Changes"

All our plugin is configured. Now the pagination plugin needs to be displayed on the page.

Fifth step. Let's go to our template. Open the file that lists the posts. In my case it is index.php, you can have loop.php or another one. And in the place where we want to display pagination, we insert the following code:

Those. we first check for the existence of the wp_paginate function and if it exists, we call it.

Everything on our site appeared pagination.

And the last final sixth step is bringing the pagination to our design. To do this, we will "play" with CSS.

Our list of pages will be framed in the html code that we specified in the Before Markup and After Markup fields. In our case, this is a div with the navigation class. Next comes spsiok

with the wp-paginate class. Next go
1. :
   • With the title class, this is the text before the list of pages
   • With class prev is a link to the previous page
   • With the page class - a link to the page
   • With class page and current is the current page
   • With the next class - a link to the next page

   That's all. By changing the CSS properties of these classes, we bring the appearance of our pagination to the one that is necessary in the design.

   Thus, in just six steps, we set up pagination on our site running the WordPress CMS.