I'm using the Yoko theme and WP-PageNavi here at soderlind.no


Yoko is a modern three-column blog theme. A responsive layout optimizes the theme for mobile devices like tablet pcs and modern smartphones (the layout switches to a two- or one-column layout depending on the screen size the theme is viewed on).

Here's how I added WP-PageNavi:

  1. Downloaded WP-PageNavi from the WordPress plugin directory
  2. From the Yoko theme folder, copied author.php, category.php, index.php, search.php and tag.php to my Yoko child theme folder and added wp_pagenavi(); to each file. I replaced
    <br />
&lt;nav id=&quot;nav-below&quot;&gt;<br />
	&lt;div class=&quot;nav-previous&quot;&gt;&lt;?php next_posts_link( __( '&lt;span class=&quot;meta-nav&quot;&gt;&amp;larr;&lt;/span&gt; Older posts', 'yoko' ) ); ?&gt;&lt;/div&gt;<br />
	&lt;div class=&quot;nav-next&quot;&gt;&lt;?php previous_posts_link( __( 'Newer posts &lt;span class=&quot;meta-nav&quot;&gt;&amp;rarr;&lt;/span&gt;', 'yoko' ) ); ?&gt;&lt;/div&gt;<br />
&lt;/nav&gt;<br />

    with

    <br />
&lt;nav id=&quot;nav-below&quot;&gt;<br />
	&lt;div id=&quot;pagenavi&quot;&gt;&lt;?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?&gt;&lt;/div&gt;<br />
&lt;/nav&gt;<br />

  3. Configured WP-PageNavi (in Settings -> PageNavi) 
    Page Navigation Text

Text For Number Of Pages:    <blank>
Text For Current Page:       %PAGE_NUMBER%
Text For Page:               %PAGE_NUMBER%
Text For First Page:         1
Text For Last Page:          %TOTAL_PAGES%
Text For Previous Page:	     «
Text For Next Page:	     »
Text For Previous:           ...
Text For Next:               ...

Page Navigation Options

Use pagenavi-css.css:        unchecked
Page Navigation Style:       Normal
Always Show Page Navigation: checked
Number Of Pages To Show:     5
Number Of Larger Page
Numbers To Show:             0
Show Larger Page Numbers
In Multiples Of:             10
  4. Added the following to the style.css in my Yoko child theme folder:
    [css]
    .wp-pagenavi {
    clear: both;
    text-align:center;
    height:30px;
    padding-left: 22.507%;
    }

    @media screen and (max-width : 620px) {
    .wp-pagenavi {
    padding-left: 0;
    }
    }

    .wp-pagenavi a, .wp-pagenavi span, #pagenavi .page {
    border: 1px solid #BFBFBF;
    margin: 2px;
    padding: 3px 5px;
    text-decoration: none;
    }
    .wp-pagenavi a:hover, .wp-pagenavi span.current {
    border-color: #000000;
    }
    .wp-pagenavi span.current {
    font-weight: bold;
    }
    [/css]