How to make Pagination awesome ? please help


#1

Hello everyone,

Can I get a solution here ? My problem is that I’m using Reboon free WordPress theme and want to customize pagination. My pagination showing in default like this image -

1 2 3 4 5 6 7 8 9 10

And my default code in Index.php is -

<?php if ($options['mts_pagenavigation'] == '1') { ?> <?php pagination($additional_loop->max_num_pages);?> <?php } else { ?> <div class="pagination"> <div class="nav-previous"><?php next_posts_link( __( 'Previous; '.'Older posts', 'mythemeshop' ) ); ?></div> <div class="nav-next"><?php previous_posts_link( __( 'Newer posts'.' Next;', 'mythemeshop' ) ); ?></div> </div>

And default function.php file code is -

/* Pagination /-----------------------------------------------------------------------------------/ function pagination($pages = '', $range = 3) { $showitems = ($range * 3)+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'><ul>";

if($paged > 1 && $showitems < $pages) echo "<li><a rel='nofollow' href='".get_pagenum_link($paged - 1)."' class='inactive'>&lsaquo; Previous</a></li>"; for ($i=1; $i <= $pages; $i++) { if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )) { echo ($paged == $i)? "<li class='current'><span class='currenttext'>".$i."</span></li>":"<li><a rel='nofollow' href='".get_pagenum_link($i)."' class='inactive'>".$i."</a></li>"; } } if ($paged < $pages && $showitems < $pages) echo "<li><a rel='nofollow' href='".get_pagenum_link($paged + 1)."' class='inactive'>Next &rsaquo;</a></li>";

echo "</ul></div>"; }}

?>

And default CSS code for pagination is -

.pagination { clear : both; overflow : hidden; float : left; width : 100%; padding : 0; margin-bottom : 20px; } .pagination ul { list-style : none; margin : 0; } .pagination ul li { float : left; margin-right : 8px; } .currenttext, .pagination a:hover { color : #fff; margin : 0 1px 0 0; display : inline-block; float : left; line-height : 1.2em; text-decoration : none; padding : 10px 14px; border : #ccc solid 1px; } .pagination a, .pagination2 { border : #ccc solid 1px; background : #777777; margin : 0 1px 0 0; display : inline-block; float : left; line-height : 1.2em; text-decoration : none; color : #ffffff; padding : 10px 14px; } .pagination a:hover { color : #fff; } .pagination2 { clear : both; } .top { float: right; } .pnavigation2 { display : block; width : 100%; overflow : hidden; padding : 10px 0; float : left; margin-bottom : 10px; } .nav-previous { float : left; } .nav-next { float : right; } .nav-previous a, .nav-next a { color : #ffffff; border : #CCCCCC solid 1px; padding : 5px 13px; background : #fff; } .nav-previous a:hover, .nav-next a:hover { color : #fff !important ; border : #000000 solid 1px; }

So I want to customize with default CSS code pagination style like this -

1 2 3 4 Next>> Last>>

Please help…

My Blog link - bloglon.com

Thanks in advance.