Plugin Directory

Test out the new Plugin Directory and let us know what you think.

Page navi slider

An advanced and fully customizable navigation plugin using jQuery slider.

Where must I insert the code?

Page navi slider is displayed by the following instruction :

<?php if(function_exists('page_navi_slider')){page_navi_slider();}?>

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:

<div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">?</span> Older posts', 'twentyten' ) ); ?></div>
<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/page-navi-slider-fr_FR.mo to /lang/page-navi-slider-ISOSTANDARD.mo (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.

Requires: 2.7 or higher
Compatible up to: 4.6.2
Last Updated: 4 months ago
Active Installs: 1,000+


5 out of 5 stars


Got something to say? Need help?


Not enough data

0 people say it works.
0 people say it's broken.

100,1,1 100,1,1