Make Your Own 123 WordPress Paging

WordPress Paging

Hello, In this tutorial I will show you how to make your WordPress paging looks eye-catching without using plugins. But hey, there are many plugins out there could do it automatically without any programming skills required. Yes I know, at least, I assume that you want to do it yourself by using PHP. Yes you can do it with easy.

Basically, WordPress has its own built in functions to create paging. So do not have to think about how to write database query or other complex  coding. All we need to do is create a function to generate paging, and call in the theme where you want to paging should appear.

1. Create a my_wordpress_paging() function in your functions.php under theme directory.

<?php
//PAGING
function my_wordpress_paging($prev='<< Previous', $next='Next >>', $currentclass='currentpage', $pagingclass='navigation', $echo=true){
	global $wp_query,$paged;
$paging_maxpage = $wp_query->max_num_pages;
$paging_current  = $paged ? $paged : 1;
$paging_prev 	= get_pagenum_link($paging_current-1);
$paging_next 	= get_pagenum_link($paging_current+1);
if($paging_current == $paging_maxpage){
	$paging_next = '';
}
if($paging_current == 1){
	$paging_prev = '';
}
$pre_output = '

2. Call the function in theme file.

Then in your template (example: index.php, archive.php, category.php etc) paste this code outside the loop:

< ?php my_wordpress_paging();?>

If you using TwentyTen theme, open each files named loop-xxx.php and find these lines and replace with code above:

<div id="nav-below" class="navigation">
    <div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', 'twentyten' ) ); ?></div>
    <div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</span>', 'twentyten' ) ); ?></div>
</div>

3. Styling

Here is the basic style css for the paging links, please customize to fit your needs.

.navigation{
	text-align:center;
	padding:10px;
	font-size:20px;
}
 .navigation ul li{
	display:inline;
}
.navigation ul li a{
	text-decoration:none;
}
.navigation ul li a:hover{
	text-decoration:underline;
}

4. Parameters

The my_wordpress_paging() above accepts some parameters.

• $prev, previous link text, default value ‘<< Previous’,
• $next, next link text, default value ‘Next >>’,
• $currentclass, class for current page, default ”currentpage’,
• $pagingclass, class for wrapper div, default value ‘navigation’,
• $echo, whether paging will be echoed or not, if you want to store it in a variable set it to false, default ‘true’

That’s all, any bug report or feedback are welcome. Thank you.

5. Demo?

Ah, I forget it, see this blog homepage. I already use it in this blog.