Description
Unsatisfied by the most common navigation plugins?
Need a cool one, fully and easyly customizable with direct preview in setting page…
Want an actually responsive plugin…
Just get it!
This plugin generates cool pagination links
- Easy to customize with its setting page
- See what you get thanks to its preview feature
- Actually responsive as it displays a slider if the page numbers exceed the available width
- Touchscreens compliant
- Caption ready to be localized for multilingual sites
CSS
CSS is located in /wp-content/plugins/page-navi-slider/style/page-navi-slider.css
List of used class
- .wpns_wrapper : the wrapper of the plugin
- .wpns_container : a ‘sub-wrapper’ needed to set alignment, margins, …
- .wpns_title : the caption
- .wpns_selector : everything but the caption
- .wpns_window : everyting of the selector but the slider
- .wpns_sliding_list : the list of page numbers
- .wpns_selector .wpns_element : elements of the list
- .wpns_selector .page-numbers : page numbers (the text inside each element)
- .wpns_first : first element of the list
- .wpns_last : last element of the list
- .wpns_active : the current element
- .wpns_inactive : the other elements (all except the current one)
References
Faitmain-Faitcoeur
Faitmain-Faitcoeur The first site that has ever used page-navi-slider
Stranger-JP
Thanks to stranger-jp who translated in Japanese (and found some bugs!)
Jonhathan @ Geekpress
Thanks to Jonathan for the pagination links tuto
WordPress Codex
Settings page built according to theses WordPress Codex instructions
PixToEm
CSS sizes calculation made with PxToEm
StyleNeat
CSS optimized with StyleNeat
Write code online
PHP tested with Write code online
JS Fiddle
js scripts tested with JS Fiddle
JS compress
JS Script minimized with JS Compress
JSColor
Color picker of the settings page by JS Color
PoEdit
Localization with PoEdit
jQuery Touch Punch
jQuery slider adaptated for touchscreens by that jQuery Touch Punch
jQuery and Co
jQuery, jQuery UI, jQuery UI slider and accordion
Screenshots
Installation
You can either install it automatically from the WordPress admin, or do it manually.
- Unzip the archive and put the
page-navi-slider
folder into your plugins folder (/wp-content/plugins/) - Activate the plugin through the
Plugins
menu in WordPress - Keep defaults settings or customize and preview through the
Setting / Page navi slider
menu - Place
<?php if(function_exists('page_navi_slider')){page_navi_slider();}?>
in your templates. - Or activate the
auto display
feature in the settings (not recommanded).
FAQ
- Where must I insert the code?
-
Page navi slider is displayed by the following instruction :
You should think to insert that code in every templates likely to display several pages:
- index.php
- category.php
- tag.php
- search.php
- pages.php…
Example :
In the twentythirteen theme, file index.php, replace the line 28 (
<?php twentythirteen_paging_nav(); ?>
) by the code above.In the twentytwelve theme, replace both the following lines:
<?php next_posts_link( __( '? Older posts’, ‘twentyten’ ) ); ?>
<div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">?</span>', 'twentyten' ) ); ?></div>
- Page numbers are displayed. But not the slider!
-
The slider does appear only when page numbers exceed the plugin width!
Look at the following FAQ to reduce the plugin width.
- How to set the plugin width?
-
Just set the
margin
in the settings.- e.g. : 1em 20% -> top and bottom margins of 1em / left and right margins of 20%
- e.g. : 10px 50px 10px 0 -> top margin of 10px / right margin of 50 px / right margin of 10px / no bottom margin
You can also define a
width
ormax-width
for thewpns_wrapper
class in the CSS. - Why do page numbers move when I hover them?
-
You have specified different font sizes for “normal” numbers and “on hover” numbers in the settings.
Then total width is changing. - I have a multilingual site – How do I localize the caption text?
-
-
Just copy your customized caption in the ‘you_strings_to_translate.php’ file as follow :
$a=__('you cusomized string','page-navi-slider');
-
Copy the
/lang/page-navi-slider-fr_FR.mo
to/lang/page-navi-slider-ISOSTANDARD.mo
(ISOSTANDARD = language code) -
Open it with PoEdit, Update, find your customized string, translate, Validate and Save!
You can just translate you customized caption and let the other strings empty as they are only used in the setting panel.
But if you want to translate all the strings, share your file!
-
- How does the Auto Display work?
-
Auto display adds an action that will echo the plugin.
The action can be hooked at the get_footer event or at the wp-footer event.
If the first case, the plugin is displayed at the top of the footer.
If the second, the plugin is displayed at the end top of the footer.
Note that WordPress recommends plugins not to echo with theses actions!
- How to use icons as page number background?
-
-
Save your icons files in /wp-content/plugins/page-navi-slider/style
-
In the settings, set the background colors (for page and/or current and/or on hover) to
url(‘your_file.ext’)
Of course change
your_file.ext
to the actual file name. -
Reviews
Contributors & Developers
“Page navi slider” is open source software. The following people have contributed to this plugin.
ContributorsTranslate “Page navi slider” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
=1.3.3=
* Tested on WP 5.3.2
* Minor translations improved
=1.3.2=
* Minor typos fixed.
=1.3.1=
* Deprecated ereg PHP instruction replaced by preg_match – Another one found in the code !
* Tested on WP 4.6.1
* Tested with PHP 7
=1.3.1=
* Bug fixed for urls with params ; Thanks StepanovM who fixed the bug
* Tested on WP 4.5.2
* Tested with PHP 7
1.3
- Previous versions was not working with standard permalinks ; Issue fixed by this release – Thanks to Tdarroussat for having noticed me
- Deprecated ereg PHP instruction replaced by preg_match – Tx Erida for having noticed me
- Tested on WP 4.2.3
1.2.2
- Minor bug fixed (
show total pages
option was automatically checked when the plugin was deacitvated/reactivated) - Tested on WP 3.7.1
1.2.1
- Fatal error depending on PHP version fixed
1.2
- Settings page style improved
- Ability to save settings without preview
- Code optimization for easy maintenance
1.1.1
- Minor bug of the previous version fixed: messages when saving settings actually displayed
1.1
- Preview settings without apply them
- Settings can be reverted
- Code optimization
DEACTIVATE previous version in order to keep your settings.
Unfortunately, some settings are lost! Check fonts and colors.This will be improved in the next release.
1.0.1
- Updated version as the initial release was not the actual one!
- Japanese language file added – Thanks to stranger-jp.
- Tested with WP 3.6.1
1.0
- Initial release – Unfortunately I made a mistake when importing the files!