New And Improved Thesis Numbered Page Navigation

A while back I wrote a tutorial over at Art of Blog explaining how to set up numbered page navigation for Thesis without using a plugin. While the code in that post is serviceable, it needs to be updated. If you are filtering any posts from your homepage, using custom templates, or using any custom taxonomy pages then the numbered nav gets a bit buggy.

Why use Numbered Page Navigation?

The main reason to use numbered page navigation is to improve the navigation of your blog. Anything you can do to up your page views will contribute to your blogging goals whether that’s gaining RSS subscribers, newsletter subscribers, selling ads or whatever else.

The New Code

This new code is compatible with every post index on your website! Blog index? Done. Search page? Check. Archive (tag, category, and author) pages? Yup. Custom taxonomies? Yessir! Got a custom loop? Filtering posts from any loop? You’re covered. This code is written to be incredibly flexible, and uses the same pagination method as Thesis itself!

Here’s the code to copy and paste into custom_functions.php.

function numbered_page_nav($prelabel = '', $nxtlabel = '', $pages_to_show = 8) {
    global $wp_query, $paged;
    $custom_range = round( $pages_to_show/2 );
    $max_page = $wp_query->max_num_pages;
    if( is_home() || is_archive() || is_search() || is_tax() ) {
        if(!$paged) {
            $paged = 1;
        }
        if($max_page > 1) { ?>
            <ul class="numbered_nav"><li class="intro">Page <? echo $paged; ?> of <? echo $max_page; ?></li>
            <? if( $paged >= ( $pages_to_show-2) ) { ?>
                <li class="number"><a href="<? echo get_pagenum_link(); ?>">1</a></li><li class="ellipsis">...</li>
            <? }
            for( $i = $paged - $custom_range; $i <= $paged + $custom_range; $i++ ) {
                if( $i >= 1 && $i <= $max_page ) {
                    if( $i == $paged ) { ?>
                        <li class="current_number"><? echo $i; ?></li>
                    <? }
                    else { ?>
                        <li class="number"><a href="<? echo get_pagenum_link($i); ?>"><? echo $i; ?></a></li>
                    <? }
                }
            }
            if ( ($paged + $custom_range) < ($max_page) ) { ?>
                <li class="ellipsis">...</li><li class="number"><a href="<? echo get_pagenum_link($max_page); ?>"><? echo $max_page; ?></a></li>
            <? } ?>
            </ul>
        <? }
    }
}
remove_action('thesis_hook_after_content', 'thesis_post_navigation');
add_action('thesis_hook_after_content', 'numbered_page_nav');

Adding Style

The CSS for this code will vary quite a bit, but here is the CSS I’m using here on Theme Big.

.numbered_nav { list-style-type: none; font-size: 10pt; margin: 0 0 2em; padding-right: 2em; overflow: hidden; color: #7e572e; text-shadow: 0px 1px #fff; font-weight: bold; }
.numbered_nav li { float: left; margin-right: .4em; overflow: hidden; }
.numbered_nav li a { display: block; padding: .5em .7em; color: #7e572e; background: #fefee8; }
.numbered_nav li a:hover { color: #cc661d; }
.numbered_nav li.number a:hover { background: #fefee8; color: #7e572e; text-shadow: 0px 1px #fff; border-bottom: .3em solid #4e973f; }
.numbered_nav li.intro { margin-right: 1.5em; background: #cc661d; color: #fefee8; text-shadow: 0px 1px #0c3144; padding: .5em .7em; }
.numbered_nav li.current_number { padding: .5em .7em; border-bottom: .3em solid #4e973f; background: #fefee8; }
.numbered_nav li.ellipsis { border: 0; padding: .3em 0; }

You’ll need to tweak this to match up to your own design, but this should give you a pretty good starting point. If you have any questions give me a shout in the comments and I’ll do my best to help you out!

Written by Adam Baird

I'm a freelance web designer from a small town in Indiana. I love the Chicago Cubs, my wife, Coca Cola and dark chocolate...in that approximate order.

Bio Twitter Portfolio Contact