fbpx
Documentation and Tutorials for your BestWebSoft products

Pagination

User Guide

Pagination

1.2.0 *

WordPress

6.2 *

*When using other versions some differences are possible to occur

** Screenshots were taken from a PC

Table of Contents

1. Introduction

2. Settings

2.2. General

2.2.1. Add Pagination to

2.2.2. Pagination Type

2.2.3. Hide Standard Pagination for

2.2.4. Hide Custom Pagination

2.2.5. Nofollow Link

2.3. Numeric Pagination

2.3.1. Pagination Position

2.3.2. Current (Total) Page Count

2.3.3. Next & Previous Buttons

2.3.4. Page Range

2.4. "Load More" Button

2.4.1. Posts Selector

2.4.2. Post/Page Selector

2.4.3. Post/Page Separator

2.4.4. Comments Selector

2.4.5. Comment Selector

2.4.6. Single Post/Page Content Selector

2.4.7. Load More Button Text

2.4.8. Loader Image

2.5. Infinite Scroll

2.5.1. Display Load More Button After

2.5.2. Posts Selector

2.5.3. Post/Page Selector

2.5.4. Post/Page Separator

2.5.5. Comments Selector

2.5.6. Comment Selector

2.5.7. Single Post/Page Content Selector

2.5.8. Load More Button Text

2.5.9. Loader Image

2.6. Next/Previous Buttons

2.6.1. Pagination Position

2.6.2. Next & Previous Buttons

2.6.3. Posts Selector

2.6.4. Post/Page Selector

2.6.5. Post/Page Separator

2.6.6. Comments Selector

2.6.7. Comment Selector

2.6.8. Single Post/Page Content Selector

2.7. Custom Styles

2.7.1. Custom Pagination Style

2.7.2. Pagination Block Width

2.7.3. Pagination Align

2.7.4. Left Padding

2.7.5. Right Padding

2.7.6. Background Color

2.7.7. Background Color for Current Page

2.7.8. Text Color for Page

2.7.9. Text Color for Current Page

2.7.10. Hover Color

2.7.11. Border Color

2.7.12. Border Width

2.7.13. Border Radius

3. Miscellaneous Settings

3.1. Track Usage

3.2. Default Settings

4. Custom Code

5. License Key

5.1. Pro License

5.2. Check License Key

5.3.  Manage License Settings

You can download the Pagination Plugin here:

https://bestwebsoft.com/products/wordpress/plugins/pagination/

1. Introduction

Note: Сlick the “Save Changes” button in order to apply any changes.

1.1. Open your WordPress Admin Dashboard and find the menu on the left.

1.2. Open the “Pagination” > Settings page on the dashboard.

2. Settings

Use the options of the “Settings” page to make the global settings for the plugin.

2.2. General

Use the options of the “General” section to make the most important settings for Pagination.

2.2.1. Add Pagination to

Use the “Add Pagination to” option to display pagination on the page types on which pagination should be displayed.

2.2.1.1. The “Homepage” with pagination may look as follows.

2.2.1.2. The “Blog” page with pagination may look as follows.

Note: To display pagination on the Blog” page, open the “Settings” > “Reading” on your WordPress Dashboard and set the number of posts to be shown on one page using the “Blog pages show at most” option.

2.2.1.3. The “Archive” page with pagination may look as follows.

2.2.1.4. Pagination on “Search results” may look as follows.

2.2.1.5. To display pagination on posts/pages open it in the edit mode, and insert the “Page Break” block to the place where pagination should be displayed.

2.2.1.6. To add pagination in HTML format insert the “HTML” block to the place where pagination should be displayed, then insert the “<!--nextpage-->” tag.

2.2.1.7. After inserting the “Page Break” block or “HTML” block with tag post with pagination may look as follows.

2.2.2. Pagination Type

Use the “Pagination Type” option to choose the type of pagination that will be displayed.

2.2.2.1. The “Numeric” pagination type will look on a page as follows.

2.2.2.2. The “Numeric with numbers input”  pagination type will look on a page as follows.

2.2.2.3. The “Load More” button” pagination type will look on a page as follows.

2.2.2.4.  The “Infinite scroll” pagination type loads content continuously as the user scrolls down the page. The page may look as follows while loading.

2.2.2.5. The “Next/Previous buttons” pagination type may look on a page as follows.

2.2.3. Hide Standard Pagination for

Use the “Hide Standard Pagination for” to select where standard pagination should or shouldn’t be displayed.

2.2.4. Hide Custom Pagination

Enable the “Hide Custom Pagination” option to add one (or more comma-separated) CSS classes or ID of blocks that you would like to hide.

2.2.5. Nofollow Link

Enable the “Nofollow Link” option to add a rel="nofollow" attribute to your anchor (aka link) tags in order to exclude paginated pages from search engines’ indexing (recommended).

2.3. Numeric Pagination

Note: This section appears only if the pagination type is set to “Numeric”.

Use the options of the “Numeric Pagination” section to make settings for the “Numeric” pagination type.

2.3.1. Pagination Position

Use the “Pagination Position” option to select the position of the numeric pagination buttons.

2.3.1.1. Pagination position “Below content” will look on a page as follows.

2.3.1.2. Pagination position “Above content” will look on a page as follows.

2.3.1.3. Pagination position “Above & below content” will look on a page as follows.

2.3.1.4. Select the “Custom function position” to display pagination buttons according to the function inserted into your theme template.

2.3.2. Current (Total) Page Count

Enable the “Current (Total) Page Count” option to display the current page and total page count (for example, Page 3 of 7).

2.3.2.1. Page counter may look on a page as follows.

2.3.3. Next & Previous Buttons

Use the “Next & Previous Buttons” option to display buttons and change their titles.

2.3.3.1. Change the titles of the buttons in the appropriate fields.

2.3.3.2. Next & Previous buttons with changed titles may look on a page as follows.

2.3.4. Page Range

Use the “Page Range” option to set the number of page links/buttons to show before and after the current page (set to "0" if you want to display all buttons).

2.3.4.1. Pagination with page range set to 0 may look on a page as follows.

2.4. "Load More" Button

Note: This section appears only if the pagination type is set to the “Load More" button”.

Use the options of the “Load More" button” section to make settings for the “Load More" button” pagination type.

2.4.1. Posts Selector

Use the “Posts Selector” option to set the selector that wraps all posts/pages according to your theme.

2.4.2. Post/Page Selector

Use the “Post/Page Selector” option to set the selector of an individual post/pages according to your theme.

2.4.3. Post/Page Separator

Use the “Post/Page Separator” option to set the separator of an individual post/pages according to your theme.

2.4.4. Comments Selector

Use the “Comments Selector” option to set the selector that wraps all comments according to your theme.

2.4.5. Comment Selector

Use the “Comment Selector” option to set the selector of an individual comment according to your theme.

2.4.6. Single Post/Page Content Selector

Use the “Single Post/Page Content Selector” option to set the selector of single post/page content according to your theme.

2.4.7. Load More Button Text

Use the “Load More Button Text” option to change the title of the “Load more” button.

2.4.7.1. Enter a customized title for “Load more” in the appropriate field.

2.4.7.2. The “Load more” button with customized text may look on a page as follows.

2.4.8. Loader Image

Use the “Loader Image” option to change the loading animation icon.

2.4.8.1. To select the custom icon for the loader click the “Add Media” button, upload the new icon, or select it from your “Media Library” then click the “Insert” button.

2.4.8.2. A custom loader image may look on a page as follows.

2.5. Infinite Scroll

Note: This section appears only if the pagination type is set to “Infinite Scroll”.

Use the options of the “Infinite Scroll” section to make settings for the “Infinite Scroll” pagination type.

2.5.1. Display Load More Button After

Use the “Display Load More Button After” option to stop the auto-loading of content after the specified number of loads. Set it to "0" if you don't want to display the button by default.

2.5.2. Posts Selector

Use the “Posts Selector” option to set the selector that wraps all posts/pages according to your theme.

2.5.3. Post/Page Selector

Use the “Post/Page Selector” option to set the selector of an individual post/pages according to your theme.

2.5.4. Post/Page Separator

Use the “Post/Page Separator” option to set the separator of an individual post/pages according to your theme.

2.5.5. Comments Selector

Use the “Comments Selector” option to set the selector that wraps all comments according to your theme.

2.5.6. Comment Selector

Use the “Comment Selector” option to set the selector of an individual comment according to your theme.

2.5.7. Single Post/Page Content Selector

Use the “Single Post/Page Content Selector” option to set the selector of single post/page content according to your theme.

2.5.8. Load More Button Text

Use the “Load More Button Text” option to change the title of the “Load more” button.

2.5.8.1. Enter a customized title for “Load more” in the appropriate field.

2.5.8.2. The “Load more” button with customized text may look on a page as follows.

2.5.9. Loader Image

Use the “Loader Image” option to change the loading animation icon.

2.5.9.1. To select the custom icon for the loader click the “Add Media” button, upload the new icon, or select it from your “Media Library” and then click the “Insert” button.

2.5.9.2. A custom loader image may look on a page as follows.

2.6. Next/Previous Buttons

Note: This section appears only if the pagination type is set to “Next/Previous buttons”.

Use the options of the “Next/Previous buttons” section to make settings for the “Next/Previous buttons” pagination type.

2.6.1. Pagination Position

Use the “Pagination Position” option to select the position of the Next/Previous buttons.

2.6.1.1. Pagination position “Below content” will look on a page as follows.

2.6.1.2. Pagination position “Above content” will look on a page as follows.

2.6.1.3. Pagination position “Above & below content” will look on a page as follows.

2.6.1.4. Select the “Custom function position” to display pagination buttons according to the function inserted into your theme template.

2.6.2. Next & Previous Buttons

Use the “Next & Previous Buttons” option to display buttons and change their titles.

2.6.2.1. Change the titles of the buttons in the appropriate fields.

2.6.2.2. Next & Previous buttons with changed titles may look on a page as follows.

2.6.3. Posts Selector

Use the “Posts Selector” option to set the selector that wraps all posts/pages according to your theme.

2.6.4. Post/Page Selector

Use the “Post/Page Selector” option to set the selector of an individual post/pages according to your theme.

2.6.5. Post/Page Separator

Use the “Post/Page Separator” option to set the separator of an individual post/pages according to your theme.

2.6.6. Comments Selector

Use the “Comments Selector” option to set the selector that wraps all comments according to your theme.

2.6.7. Comment Selector

Use the “Comment Selector” option to set the selector of an individual comment according to your theme.

2.6.8. Single Post/Page Content Selector

Use the “Single Post/Page Content Selector” option to set the selector of single post/page content according to your theme.

2.7. Custom Styles

Use the options in the “Custom Styles” section to change the appearance of the pagination.

Note: The “Background Color for Current Page”, “Text Color for Page”, and “Text Color for Current Page” options can only be applied for the “Numeric” pagination type.

2.7.1. Custom Pagination Style

Enable the “Custom Pagination Style” to expand additional settings and apply custom CSS styles for pagination.

2.7.2. Pagination Block Width

Use the “Pagination Block Width” option to set the necessary width of the pagination block.

2.7.2.1. Pagination block with changed width may look on a page as follows.

2.7.3. Pagination Align

Use the “Pagination Align” option to change the position on the pagination block by width.

2.7.3.1. Pagination block aligned to the left may look on a page as follows.

2.7.3.2. Pagination block aligned to the center may look on a page as follows.

2.7.3.3. Pagination block aligned to the right may look on a page as follows.

2.7.4. Left Padding

Use the “Left Padding” option to set the necessary padding from the left side of the page for the “Left” or “Right” pagination alignment.

2.7.4.1. Pagination block with changed “Left Padding” may look on a page as follows.

2.7.5. Right Padding

Use the “Right Padding” option to set the necessary padding from the left side of the page for the “Left” or “Right” pagination alignment.

2.7.4.1. Pagination block with changed “Right Padding” may look on a page as follows.

2.7.6. Background Color

Use the “Background Color” option to change the background color of the pagination buttons by means of the color picker.

2.7.6.1. Pagination buttons with customized background color may look on a page as follows.

2.7.7. Background Color for Current Page

Use the “Background Color for Current Page” option to change the background color of the current page button by means of the color picker.

2.7.7.1. The current page button with customized background color may look on a page as follows.

2.7.8. Text Color for Page

Use the “Text Color for Page” option to change the color of the text on the buttons using the color picker.

2.7.8.1. The customized button text color may look on a page as follows.

2.7.9. Text Color for Current Page

Use the “Text Color for Current Page” option to change the color of the text for the current page button using the color picker.

2.7.9.1. The customized current page text color may look on a page as follows.

2.7.10. Hover Color

Use the “Hover Color” option to change the color of the text when the cursor hovered on using the color picker.

2.7.10.1. The customized color on the hover may look on a page as follows.

2.7.11. Border Color

Use the “Border Color option to change the border color of the pagination block using the color picker.

2.7.11.1. The pagination block with customized color may look on a page as follows.

2.7.12. Border Width

Use the “Border Width” option no set the border thickness for the pagination block.

2.7.12.1. The pagination block with a customized border width may look on a page as follows.

2.7.13. Border Radius

Use the “Border Radius” option to set the radius that makes the buttons rounded.

2.7.13.1. The pagination block with a customized border radius may look on a page as follows.

3. Miscellaneous Settings

Use the options of the “Miscellaneous Settings” tab to make the settings regarding the track usage and default settings.

3.1. Track Usage

Enable the “Track Usage” option to allow tracking plugin usage anonymously.

3.2. Default Settings

Click the “Restore Settings button to reset all the settings made previously and revert them to the default ones.


4. Custom Code

Use the “Custom code” tab to insert a CSS, PHP or JavaScript code. To activate a custom code, enable the “Activate custom … code” option and save changes.

5. License Key

Use the “License Key” tab to activate or check the Pro plugin license.

5.1. Pro License

After a successful plugin purchase, you will receive an email notification with a download link and a license key. Activate Pro license by pasting a license key into the “Pagination Pro License” field and clicking the “Save Changes” button.


5.2. Check License Key

To check the license key, click the “Check license key” button. If the entered key is correct, the notification “The license key is valid. Your license will expire on XXXX-XX-XX” will be displayed in the upper left corner of the page.

5.3.  Manage License Settings

Use the “Manage License Settings” option to change your license settings. Click the “Login to Client Area” button to open your personal Client Area dashboard located on the https://bestwebsoft.com/ website. Browse and download purchased products, change the license domain and copy the license keys.

Thank you!

Help & Support

Visit our Help Center if you have any questions — https://support.bestwebsoft.com/

Services

We provide additional services such as WordPress themes & plugins development,

graphic design, custom programming.

Contact us now to get a free quote — https://bestwebsoft.com/contacts/