Page navi slider


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 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)



Faitmain-Faitcoeur The first site that has ever used page-navi-slider


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


CSS sizes calculation made with PxToEm


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


Color picker of the settings page by JS Color


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

لقطات الشاشة

  • Standard settings
  • Rounded pages
  • Gradient background
  • Preview options
  • General settings
  • Caption
  • Step by step font definition
  • Easy colors settings
  • Easy borders definition
  • Autodisplay


You can either install it automatically from the WordPress admin, or do it manually.

  1. Unzip the archive and put the page-navi-slider folder into your plugins folder (/wp-content/plugins/)
  2. Activate the plugin through the Plugins menu in WordPress
  3. Keep defaults settings or customize and preview through the Setting / Page navi slider menu
  4. Place <?php if(function_exists('page_navi_slider')){page_navi_slider();}?> in your templates.
  5. Or activate the auto display feature in the settings (not recommanded).

الأسئلة المتكررّة

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 or max-width for the wpns_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?

  1. Just copy your customized caption in the ‘you_strings_to_translate.php’ file as follow : $a=__('you cusomized string','page-navi-slider');

  2. Copy the /lang/ to /lang/ (ISOSTANDARD = language code)

  3. 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?

  1. Save your icons files in /wp-content/plugins/page-navi-slider/style

  2. In the settings, set the background colors (for page and/or current and/or on hover) to

Of course change your_file.ext to the actual file name.


19 نوفمبر، 2016
Doing nothing in my page code <?php /** * @package injsoft Atro - Page **/ get_header(); ?> <div id="wrapper" class="wrapper single-page section no-wider-page no-sidebar full-width"> <div id="content" class="grid12"> <div class="content-indent"> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <div class="post <?php echo the_slug(); ?>-page" id="post-<?php the_ID(); ?>"> <?php if( meta_options('meta_title_show') == 'off' && meta_options('main_title') =='') { ?> -------------- PLUGIN CODE WAS PLACED HERE ---------------- <div class="main page-title"><h1 class="heading realtitle"><div class="hrwrap"><?php the_title(); ?></div></h1></div> <?php } ?> <div class="entry"> <?php the_content(); ?> </div> </div> <?php endwhile; endif; ?> </div> </div> </div> <?php get_footer(); ?>
إقرأ جميع المراجعات 6

المساهمون والمطوّرون

“Page navi slider” هو برنامج مفتوح المصدر. وقد ساهم هؤلاء الأشخاص بالأسفل في هذه الإضافة.


ترجمة ”Page navi slider“ إلى لغتك.

مُهتم بالتطوير؟

تصفّح الشفرة، تحقق من مستودع SVN، أو الاشتراك في سجل التطوير بواسطة RSS.

سجل التغييرات

* Fix a bug whith wome permalinks sctuture

* Tested on WP 5.8.1
* Fix minor bugs in settings page
* Look of the setting page minor changes
* Fix deprecated instruction

* Tested on WP 5.3.2
* Minor translations improved

* Minor typos fixed.

* Deprecated ereg PHP instruction replaced by preg_match – Another one found in the code !
* Tested on WP 4.6.1
* Tested with PHP 7

* Bug fixed for urls with params ; Thanks StepanovM who fixed the bug
* Tested on WP 4.5.2
* Tested with PHP 7


  • 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


  • Minor bug fixed (show total pages option was automatically checked when the plugin was deacitvated/reactivated)
  • Tested on WP 3.7.1


  • Fatal error depending on PHP version fixed


  • Settings page style improved
  • Ability to save settings without preview
  • Code optimization for easy maintenance


  • Minor bug of the previous version fixed: messages when saving settings actually displayed


  • 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.


  • 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


  • Initial release – Unfortunately I made a mistake when importing the files!