How to add Page Navigation to WordPress and Thesis Theme-WP PageNavi Plugin

Gowtham V
3 Min Read

We have been working on thesis customization continuously and we are posting many posts about thesis customization which is helping many Thesis users.If you are not using thesis theme do read our post about Features of thesis theme

Here is a thesis tutorial on How to add Page Navigation to Thesis and wordpressTheme and CSS Style it using Thesis OpenHook and WP-PageNavi Plugins

Installing WP-PageNavi Plugin:

1.Download WP-PageNavi  plugin here or use below link with your plugin central for direct installation.

Learn more about How to install plugins easily- Plugin central

https://downloads.wordpress.org/plugin/wp-pagenavi.2.81.zip

2.Or download it and  install  by navigating to Plugins>>Add New>>Upload tab in your WordPress dashboard.

3.Activate the plugin after upload,now you have successfully installed the plugin.

wordpress-page-navigation-homepage

How to Add page navigation to WordPress theme: 

Follow these steps to add navigation to WordPress theme

1.Open your themes folder and choose the php file where you wanted to add it,here i am adding to footer.php file

2.Add the below code to the footer.php file or to the file where you wanted to show the navigation accordingly

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

2.Save the file.

How to Add page navigation to thesis theme: 

1.Add the below code to custom_functions.php file in your thesis custom folder using Ftp client like Filezilla

Note:Backup your custom_functions.php file before editing it

2.Add the following code to  custom_functions.php file and save it

/*Begin  mytechshout navi*/

function thesis_page_navi() { ?>
<div id=”pagenavi”>
<div class=”wp-pagenavi”>
<?php if(function_exists(‘wp_pagenavi’)) { wp_pagenavi(); } ?></div></div>
<? }
add_action(‘thesis_hook_after_content’, ‘thesis_page_navi’);

/*end mytechshout navi*/

3.After adding the code save the file.

Page navigation customization:

1.Add the below css codings to your custom.css file of your theme

#pagenavi{margin:0 20px;font-size:18px;padding:10px 20px;border-top:1px solid #eee;border-bottom:1px solid #eee;}
.wp-pagenavi{float:left;}
.wp-pagenavi a{margin:0 5px;padding:3px 10px;}
.wp-pagenavi a:hover{background:#fff;box-shadow:0 0 8px #ccc inset;}
.wp-pagenavi span.pages{margin:0 5px;}
.wp-pagenavi span.current{margin:0 5px;padding:3px 10px;background:#fff;box-shadow:0 0 8px #ccc inset;}

Hope you have added them successfully to your WordPress or thesis theme.If you have any doubt do contact us via comment.Will be glad to help you.

Subscribe to Mytechshout.com by Email

 Thanks.Do subscribe to our email updates  for getting our latest updates 🙂
Share This Article
1 Comment

Leave a Reply

Your email address will not be published. Required fields are marked *