Pagination

[mhulse]

A few different styles to account for:

PHP:

<?php if ($wp_query->max_num_pages > 1): ?>

    <?php

        $pagination = paginate_links(array(
            'type' => 'array',
            'base' => str_replace(999999999, '%#%', esc_url(get_pagenum_link(999999999))), // Make sure the numbers match.
            'format' => '?paged=%#%',
            'current' => max(1, get_query_var('paged')),
            'total' => $wp_query->max_num_pages,
            'prev_next' => FALSE
        ));

    ?>

    <div class="split">
        <p class="split-first pointer"><?php previous_posts_link('&laquo; Newer'); ?></p>
        <p class="split-middle note Aoff Boff">

            <?php foreach($pagination as $key => $value): ?>

                <?=$value?>&nbsp;

            <?php endforeach; ?>

        </p>
        <p class="split-last pointer"><?php next_posts_link('Older &raquo;'); ?></p>
    </div> <!-- /.split -->

    <hr class="Aon Bon">

<?php endif; ?>

Markup:

<div class="split">

    <p class="split-first pointer"><a href="#" >&laquo; Newer</a></p>

    <p class="split-middle note Aoff Boff">

        <a class='page-numbers' href='http://blogs.registerguard.com/oregon-football/page/1/'>1</a>

        <span class='page-numbers current'>2</span>

        <a class='page-numbers' href='http://blogs.registerguard.com/oregon-football/page/3/'>3</a>

        <a class='page-numbers' href='http://blogs.registerguard.com/oregon-football/page/4/'>4</a>

        <span class="page-numbers dots">&hellip;</span>

        <a class='page-numbers' href='http://blogs.registerguard.com/oregon-football/page/271/'>271</a>

    </p>

    <p class="split-last pointer"><a href="http://blogs.registerguard.com/oregon-football/page/3/" >Older &raquo;</a></p>

</div> <!-- /.split -->

... and:

PHP:

<?php

    $older = get_adjacent_post();
    $newer = get_adjacent_post(NULL, NULL, FALSE);

?>

<?php if ($newer || $older): ?>

    <hr>

    <div class="w_row">

        <div class="w_col w_C130 Aoff Boff">&nbsp;</div>

        <div class="w_col w_C640 w_D980">

            <div class="split" style="margin-bottom:0">

                <?php if ($newer): ?>

                    <p class="split-first pointer"><a href="<?=get_permalink($newer->ID)?>" rel="prev">&laquo; Newer</a></p>

                <?php endif; ?>

                <?php if ($older): ?>

                    <p class="split-last pointer"><a href="<?=get_permalink($older->ID)?>" rel="next">Older &raquo;</a></p>

                <?php endif; ?>

            </div> <!-- /.split -->

        </div> <!-- /.w_col -->

        <div class="w_col w_C130 Aoff Boff">&nbsp;</div>

    </div> <!-- /.w_row -->

<?php endif; ?>

Markup:

<div class="split" style="margin-bottom:0">

    <p class="split-first pointer"><a href="http://blogs.registerguard.com/oregon-football/utes-spoil-perfect-week-a-quick-recap-of-saturdays-pac-12-predictions/" rel="prev">&laquo; Newer</a></p>

    <p class="split-last pointer"><a href="http://blogs.registerguard.com/oregon-football/fourth-quarter-oregon-55-wsu-24/" rel="next">Older &raquo;</a></p>

</div> <!-- /.split -->

Here's the CSS:

.split { *zoom: 1; } .split:before, .split:after { content: " "; display: table; } .split:after { clear: both; }
.split {
    position: relative;
    margin-bottom: 10px;
}
    .split .split-middle {
        text-align: center;
        width: 100%;
        position: absolute;
        z-index: 5;
    }
    .split .split-first,
    .split .split-last {
        display: inline;
        position: relative;
        z-index: 10;
    }
    .split .split-first { float: left; }
    .split .split-last { float: right; }

.pointer {
    font: bold .875em/1.71428571428571 Arial, sans-serif;
    text-transform: uppercase;
    color: #000;
    margin: 0;
    padding: 0;
}
    .pointer a {
        color: #000;
        text-decoration: none;
    }
        .pointer a:visited { color: #000; }
        .pointer a:visited:hover,
        .pointer a:focus,
        .pointer a:focus:hover,
        .pointer a:hover,
        .pointer a:active { color: #ae1a1f; }

.note { font: bold 1em/1 Cambria, Georgia, serif; }

That's just an example. A good starting point at least.

[mhulse]

Not satisfied, re-opening. YouTube's prev/next ain't bad:

[mhulse]

Google mobile is nice:

[mhulse]

Another example on Amazon:

[mhulse]

Disqus:

http://help.disqus.com/customer/portal/topics/107054-developers/articles?page=2