Online Tips for Web Developer/Designer

Task needed to complete.

1. Download and Install the plugin
2. Inserting the php code to your theme
3. Setting up your PageNavi plugin
4. Changing the CSS style on your PageNavi Plugin

Step 1 – Download the plugin

First you will need to download the latest plugin that fit your wordpress version. You can download it from here.

Step 2 – Installation

There’s 2 way to install to the wordpress. 1. Upload the plugin from the admin panel of wordpress. Go to YOURDOMAIN.com/wp-admin, please login and go to the following section. Plugins > Add New > Upload > select file to upload > Install Now

Step 3 – Coding

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

From the author site “Open wp-content/themes/< YOUR THEME NAME >/footer.php” You can put this code anywhere e.g. footer.php , but in this tutorial we are going to put it in the index.php file. Open wp-content/themes/< YOUR THEME NAME >/index.php.

Step 4 – Settings

Basically this page give you the possibility to change the way of display without touching any code. Feel free to test this around.

Step 5 – Settings

Basically this page give you the possibility to change the way of display without touching any code. Feel free to test this around.

Step 6 – CSS Styling

WP-PageNavi will load ‘pagenavi-css.css‘ from your theme’s directory if it exists. If it doesn’t exists, it will just load the default ‘pagenavi-css.css’ that comes with WP-PageNavi. This will allow you to upgrade WP-PageNavi without worrying about overwriting your page navigation styles that you have created.

First, I will suggest you to make a copy of the css to your theme folder.
In this tutorial, I will show you a simple way to change color and add a web2.0 gradient in your a tag.

First in your photoshop, create a new file called the number_bg.gif. you can download our gif here.

.wp-pagenavi span, .wp-pagenavi a{background:url('images/number_bg.gif');}

The pagenavi class structure are base on span and a tag, so this css will create a background image on all related span and a tag within the class of wp-pagenavi.