jump to navigation

Installing and activating an Page-Navigation Plugin on WordPress Thesis Theme June 6, 2011

Posted by Tournas Dimitrios in Wordpress - 3.
trackback

Although WordPress has an build-in page navigation mechanism , it’s very primitive  .
In some cases your theme design , may need a more sophisticated  page navigation indication –> . Fortunately for us the WordPress community has released many plug-ins that can full-fill our demands . One of my favorite page navigation  plugin  is  ” WP-Pagenavi”  . Although it works out of the box for many themes , in the Thesis Theme we have to take one more step to make it functional . Let’s demonstrate the steps ……

  • First download , install and activate the plugin on your self-hosted WordPress  application
  • As pre-mentioned , most themes will function without any configuration . On Thesis Theme we have to paste the following code on the two files  custom_functions.php  and custom.css  . The best way to apply these code is through our browser : Administration_Panel -> Thesis -> Custom-Filter-Editor  -> from-Drop-down-menu select the file in which the code must be appended
    /*paste in custom_functions.php file*/
    function pagenavi(){
    ?>
    <div align="left">
    <?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>
    <br />
    </div>
    <?php
    }
    add_action('thesis_hook_after_content','pagenavi');
    
    /* css code for page navigation menu
    This css-code is optional for applying some styling
    -------- wp-pagenavi----------------------------------- */
    .wp-pagenavi { margin: 15px 0px 15px 0px; }
    .wp-pagenavi a, .wp-pagenavi a:link { font-size:14px; padding: 5px 9px; margin: 2px; text-decoration: none; border: 1px solid #e1e1c8; color: #413f36; background-color: #eeeeee; }
    .wp-pagenavi a:visited { font-size:14px; padding: 5px 9px; margin: 2px; text-decoration: none; border: 1px solid #e1e1c8; color: #413f36; background-color: #eeeeee; }
    .wp-pagenavi a:hover { font-size:14px; border: 1px solid #608e7a; color: #FFF; background-color: #75040b; }
    .wp-pagenavi a:active { font-size:14px; padding: 5px 9px; margin: 2px; text-decoration: none; border: 1px solid #e1e1c8; color: #413f36; background-color: #eeeeee; }
    .wp-pagenavi span.pages { font-size:14px; padding: 5px 9px; margin: 2px 2px 2px 2px; color: #000000; border: 1px solid #e1e1c8; color: #413f36; 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: #75040b; }
    .wp-pagenavi span.extend { font-size:14px; padding: 5px 9px; margin: 2px; border: 1px solid #608e7a; color: #FFF; background-color: #75040b; }
  • And finally store your changes …….

.

 

Comments»

No comments yet — be the first.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s