Jump Pagination

Finally, another tutorial. It’s been too long since my last one.

I received a message in my ask box the other day requesting for a tutorial on using jump pagination. If you’re not familiar with what jump pagination is, click here.

Basic Code

{block:JumpPagination length=”5”}

                {block:CurrentPage}

                    <span class=”current_page“>{PageNumber}</span>

                {/block:CurrentPage}

                {block:JumpPage}

                    <a class=”jump_page” href=”{URL}”>{PageNumber}</a>

                {/block:JumpPage}

            {/block:JumpPagination}

                    &#8230;

                    <a class=”jump_page” href=”page/{TotalPages}”>Last</a>

This is a modified version of the code that you can find in the Tumblr theme docs.

Where do you paste this code? Anywhere! Preferably after {/block:Posts} or at the end of your sidebar. Wherever it looks nice, really.

A few points to consider with this code:

• length=”5” – You can change this number to anything you like, most people like to use 5 or 10.
• jump_page & current_page – These are classes. We’re going to need this once we start styling our jump pagination.

Without styling, it looks like this:

Styling

The only things we have to add in the CSS (inside <style> … </style>) are the classes “jump_page” and “current_page”

Let’s add a border, change some colors, and make the font weight bold.

.current_page,
.jump_page:hover {

        padding: 3px 7px 3px 7px;
        border: 1px solid #D4A217;
        background-color: #FEC216;
        color: #FFF;
        font-weight: bold;

    }

    .jump_page {

        padding: 3px 7px 3px 7px;
        border: 1px solid #FEC216;
        background-color: white;
        font-weight: bold;

    }

It now looks way better than just using the starting code. You can add whatever you want to the CSS to style your jump pagination. Maybe some shadows, rounded corners, and a bit of text styling.

Here’s a few more examples to get you started:

.current_page,
.jump_page:hover {

        padding: 3px 7px 3px 7px;
        border: 1px solid #1779D4;
        background-color: #2D8FEB;
        color: #FFF;
        font-weight: bold;
        -moz-border-radius: 11px;
        -webkit-border-radius: 11px;

    }

    .jump_page {

        padding: 3px 7px 3px 7px;
        border: 1px solid #2DA5EB;
        color: #2DA5EB;
        background-color: white;
        font-weight: bold;
        -moz-border-radius: 11px;
        -webkit-border-radius: 11px;

        }

.current_page,
.jump_page:hover {

        padding: 3px 7px 3px 7px;
        border-right: 1px solid #646464;
        border-bottom: 1px solid #646464;
        background-color: #858585;
        color: #FFF;
        font-weight: bold;

    }

    .jump_page {

        padding: 3px 7px 3px 7px;
        border-right: 1px solid #BEBEBE;
        border-bottom: 1px solid #BEBEBE;
        background-color: #DFDFDF;
        font-weight: bold;

    }

.current_page,
.jump_page:hover {

        padding: 3px 7px 5px 7px;
        border-right: 1px solid #DBCAA8;
        border-bottom: 1px solid #DBCAA8;
        background-color: #ECD9B4;
        color: #333;
        font-family: Georgia;
        font-weight: normal !important;
        -moz-border-radius: 14px;
        -webkit-border-radius: 14px;
        font-size: 11px;
        font-style: italic;

    }

    .jump_page {

        padding: 3px 7px 5px 7px;
        border-right: 1px solid #DACFBB;
        border-bottom: 1px solid #DACFBB;
        background-color: #EBE0CA;
        color: #F38F54;
        font-family: Georgia;
        font-style: italic;
        -moz-border-radius: 14px;
        -webkit-border-radius: 14px;
        font-weight: normal !important;
        font-size: 11px

    }

If this walkthrough/tutorial isn’t clear enough, questions are accepted via Disqus comments :)