Pagination
User Guide
Pagination | 1.2.0 * |
WordPress | 5.7.2 * |
*When using other versions some differences are possible to occur
** Screenshots were taken from a PC
Table of Contents
2.2.3. Hide Standard Pagination for
2.3.2. Current (Total) Page Count
2.3.3. Next & Previous Buttons
2.4.6. Single Post/Page Content Selector
2.5.1. Display Load More Button After
2.5.7. Single Post/Page Content Selector
2.6.2. Next & Previous Buttons
2.6.8. Single Post/Page Content Selector
2.7.1. Custom Pagination Style
2.7.7. Background Color for Current Page
2.7.9. Text Color for Current Page
You can download 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 “”Load More” button” pagination type will look on a page as follows.
2.2.2.3. 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.4. 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 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 to 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 its’ 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 “"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
Ust 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 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
Ust 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” 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 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 to your theme template.
2.6.2. Next & Previous Buttons
Use the “Next & Previous Buttons” option to display buttons and change its’ 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
Ust 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 of the “Custom Styles” section to change the appearance of the pagination.
Note: The “Background Color for Current Page”, “Text Color for Page”, “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 align.
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 align.
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. Paginations 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 by means of 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 by means of 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 by means of the color picker.
2.7.10.1. The customized color on 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 by means of 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/
