How To Add Pagination In Any WordPress Theme Without Any Plugin

Here Is the step by step process of adding pagination In any WordPress Theme or in Thesis Theme without any WordPress plugin.Well there lot of plugins available for adding pagination in WordPress themes.But using plugin for every thing is not a good habit.Using too many plugin Surely hampered your Website Performance.

I am writing this article for Normal WordPress Theme and for Thesis Theme.First I am going to show you How to add Pagination in Normal WordPress Theme.

How To Add Pagination In Any WordPress Theme Without Any Plugin

Note:-Do take backup of Your Current Theme Functions (functions.php) and Main Index Template (index.php).

1.Pagination In Normal WordPress Theme

Open your Dashboard go to –>Appearance –>Editor—>Open Theme Functions (functions.php).

1.Now Copy Below Code And paste Inside your functions.php

//WP Pages
function pagination($pages = '', $range = 3)
{ $showitems = ($range * 2)+1;
 global $paged; if(empty($paged)) $paged = 1;
 if($pages == '') {
 global $wp_query; $pages = $wp_query->max_num_pages; if(!$pages)
 { $pages = 1; } }
 if(1 != $pages)
 { echo "<div class="pagination"><span>Page ".$paged." of ".$pages."</span>";
 if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>&laquo; First</a>";
 if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>&lsaquo; Previous</a>";
 for ($i=1; $i <= $pages; $i++)
 { if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
 { echo ($paged == $i)? "<span class="current">".$i."</span>":"<a href='".get_pagenum_link($i)."' class="inactive">".$i."</a>";
 } } if ($paged < $pages && $showitems < $pages) echo "<a href="".get_pagenum_link($paged + 1)."">Next &rsaquo;</a>";
 if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>Last &raquo;</a>";
 echo "</div>n"; }}

2.After Copying above code Inside your functions.php Open your Main Index Template (index.php) and find

<?php next_posts_link('&laquo; Previous Entries')?>
<?php previous_posts_link('Next Entries &raquo;') ?>

Just remove this lines and paste below php code here.

<?php if (function_exists("pagination"))
 { pagination($additional_loop->max_num_pages); } ?>

3.Now Open your theme style.css and paste below code inside your Css file.
.pagination{clear:both; margin: 0 40px; position:relative; font-size:14px; line-height:15px} .pagination span,.pagination a{display:block; float:left; margin:5px 5px 20px 0; padding:10px 12px 10px 11px; text-decoration:none; width:auto; color:#fff;background:#198DC9} .pagination a:hover {color:#AD4F1F ;background:#fff ;border:1px solid #AD4F1F;}

Now save your file and open Your website Enjoy stylish Pagination Without Plugin.

2.Pagination In Thesis WordPress Theme.

Note:-Do take backup of Your Current Theme Functions (custom_functions.php)Before editing .

Open your Dashboard go to –>Thesis –>Thesis Custom File Editor–>custom/custom_functions.php

1.Copy Above Php code and paste inside custom_functions.php

2. Now copy below Php code and paste inside your custom_functions.php

function add_Pagination() { ?>
<div id="pagination ">
 <?php if (function_exists("pagination"))
{ pagination($additional_loop->max_num_pages); } ?>
</div>
<?php }
remove_action('thesis_hook_after_content', 'thesis_post_navigation');
add_action('thesis_hook_before_footer','add_Pagination');

Click Save.

3.Copy Above Css Code and paste inside your custom/custom.css.

Click on save button.

All Done.Check your website.You can see live demo on this website itself.Now you can easily Add Pagination to any theme

What about you?Are You using Any Plugin for Pagination or any Custom code like one shown above.Do share with us.

Tagged as: thesis customization, Wordpress Theme

{ 16 comments }

Manendra

Thank Q for the tutorial this is really nice since from a long time i am looking for this code. This menu brought my blog new look

Anuj Sharma: your welcome mate

Yopi Hasopa

Thanks for your tutorial..

Aman Arora

Image is not showing up
http://i.min.us/iGykI.jpg

Anuj Sharma: looking cool

Here is my custom style for the implementation

Thanks for this article Anuj, I successfully implemented this in my theme,
I just wanted to know one thing, doesn’t it show next and previous links when pages are huge.

Anuj Sharma: yes Aman it show’s next and previous links when pages are huge.

Bjorn

The defult result without any mods, looks a bit boring.
So using your CSS code will make the pagination look nice..

Anuj Sharma: Ya you might be right.Let me try some day.

It looks like the commentbox removed my html code.
If you use the nextpage command in the editor the pagination comes automaticly. here is the wordpress codex ref:http://codex.wordpress.org/Styling_Page-Links

Anuj Sharma: yes you are right mate,what you still need to edit you core file.

It is possible to add in the code editor without doing any more on the functions.php. Styling the pagination in CSS makes it look better.

Anuj Sharma: Hi,Bjorn
thanks for your comment.i am not trying yet Styling the pagination in CSS without doing any thing in functions.php,so i don’t have any idea about yet.let me try first then i come back to you.

Atish

Hey nice blog design you have…

Anuj Sharma: Thanks mate:)

How To Add Pagination In Any WordPress Theme Without Any Plugin