Ik wilde de plugin WP-PageNavi laten samenwerken met Thesis. Dit geeft een mooi overzicht van je pagina’s dat net zoals de Breadcrumbs goed is voor je zoekmachine optimalisatie en de navigatie van je site.

Allereerst de plugin WP-PageNavi downloaden en installeren op de normale wijze.

Vervolgens moet je in Thesis aangeven waar de plugin zich moet plaatsen,  zie plaatje hieronder:

Open Theses OpenHook settings en scroll naar de  “After Content” sectie, copy en paste de hier onderstaande code:

<div style="clear: both;"></div>
<pre><?php if(<a href="http://www.php.net/function_exists">function_exists</a>('wp_pagenavi')) { wp_pagenavi(); }
else { ?>
      <div class="pagination">
         <div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
         <div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
      </div>
<?php } ?>

Vergeet niet om de drie opties aan te vinken zoals aangegeven in het plaatje hierboven aangegeven met groene pijlen, “Execute PHP on this hook”, “Remove Thesis post navigation ” en “Remove Thesis prev/next posts” (deze derde is optioneel)

Als laatste volgt de vormgeving de CSS, hiervoor open je de custom.css file en plaatst daar de volgende code in:

/*
-------- pagenavi-----------------------------------
*/
.wp-pagenavi {  margin: 15px 0px 15px 30px; }
.wp-pagenavi a, .wp-pagenavi a:link { font-size:14px; padding: 5px 9px; margin: 2px; text-decoration: none; border: 1px solid #e1e1c8; color: #888888; background-color: #eeeeee; }
.wp-pagenavi a:visited { font-size:14px; padding: 5px 9px; margin: 2px; text-decoration: none; border: 1px solid #e1e1c8; color: #888888; background-color: #eeeeee; }
.wp-pagenavi a:hover { font-size:14px; border: 1px solid #608e7a; color: #FFF; background-color:  #FFAA37; }
.wp-pagenavi a:active { font-size:14px; padding: 5px 9px; margin: 2px; text-decoration: none; border: 1px solid #e1e1c8; color: #888888; background-color: #eeeeee; }
.wp-pagenavi span.pages { font-size:14px; padding: 5px 9px; margin: 2px 2px 2px 2px; color: #666666; border: 1px solid #e1e1c8; color: #888888; background-color: #eeeeee; }
.wp-pagenavi span.current { font-size:14px; padding: 5px 9px; margin: 2px; font-weight: bold; border: 1px solid #608e7a; color: #FFF; background-color:  #FFAA37; }
.wp-pagenavi span.extend { font-size:14px; padding: 5px 9px; margin: 2px; border: 1px solid #608e7a; color: #FFF; background-color:  #FFAA37; }

Ok het een en ander opslaan en eventueel uploaden en je bent klaar. Je kunt de custom.css natuurlijk aanpassen aan je eigen behoeften.