Skip to content

Instantly share code, notes, and snippets.

@sloped
Created March 19, 2012 16:21
Show Gist options
  • Save sloped/2117898 to your computer and use it in GitHub Desktop.
Save sloped/2117898 to your computer and use it in GitHub Desktop.
Bootstrap Paging and Wordpress
<?php
//Use this function to create pagingation links that are styleable with Twitter Bootstrap
function paging() {
global $wp_query;
$total_pages = $wp_query->max_num_pages;
if ($total_pages > 1){
$current_page = max(1, get_query_var('paged'));
$count = 0;
$previous_page = $current_page - 1;
$next_page = $current_page + 1;
echo '<div class="pagination">';
echo '<ul>';
if($total_pages > 3) {
if($current_page > 1) echo '<li class="last"><a href="' . get_bloginfo('url') . '/posts/page/1/?"><<</a></li>' ;
if($current_page > 1) echo '<li class="previous"><a href="' . get_bloginfo('url') . '/posts/page/' . $previous_page . '/?"><</i></a></li>' ;
}
while($count < $total_pages) {
$count = $count + 1;
if($count == $current_page) echo '<li class="active"><a href="' . get_bloginfo('url') . '/posts/page/' . $count . '/?">' . $count . '</a></li>' ;
else echo '<li class="inactive"><a href="' . get_bloginfo('url') . '/posts/page/' . $count . '/?">' . $count . '</a></li>' ;
}
if($total_pages > 3) {
if($current_page < $total_pages) echo '<li class="next"><a href="' . get_bloginfo('url') . '/posts/page/' . $next_page . '/?pp=1">></i></a></li>' ;
if($current_page < $total_pages) echo '<li class="last"><a href="' . get_bloginfo('url') . '/posts/page/' . $total_pages . '/?pp=1">>></a></li>' ;
}
?>
</ul>
</div>
<?php
}
@GabLeRoux
Copy link

Managed to do this instead:

<?php
/**
 * Numeric Bootstrap3 Pagination
 * This is some shameless copy paste edited to use bootstrap3 classes
 * http://www.wpbeginner.com/wp-themes/how-to-add-numeric-pagination-in-your-wordpress-theme/
 * http://getbootstrap.com/components/#pagination
 */
function numeric_bootstrap_posts_nav()
{
    if (is_singular()) {
        return;
    }
    global $wp_query;
    /** Stop execution if there's only 1 page */
    if ($wp_query->max_num_pages <= 1) {
        return;
    }
    $paged = get_query_var('paged') ? absint(get_query_var('paged')) : 1;
    $max = intval($wp_query->max_num_pages);
    /** Add current page to the array */
    if ($paged >= 1) {
        $links[] = $paged;
    }
    /** Add the pages around the current page to the array */
    if ($paged >= 3) {
        $links[] = $paged - 1;
        $links[] = $paged - 2;
    }
    if (($paged + 2) <= $max) {
        $links[] = $paged + 2;
        $links[] = $paged + 1;
    }
    echo '<div class="pagination_wrapper"><ul class="pagination">' . "\n";
    /** Previous Post Link */
    if (get_previous_posts_link()) {
        printf('<li>%s</li>' . "\n", get_previous_posts_link("<<"));
    }
    /** Link to first page, plus ellipses if necessary */
    if (!in_array(1, $links)) {
        $class = 1 == $paged ? ' class="first active"' : ' class="first"';
        printf('<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url(get_pagenum_link(1)), '1');
        if (!in_array(2, $links)) {
            echo '<li>…</li>';
        }
    }
    /** Link to current page, plus 2 pages in either direction if necessary */
    sort($links);
    foreach ((array)$links as $link) {
        $class = $paged == $link ? ' class="last active"' : ' class="last"';
        printf('<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url(get_pagenum_link($link)), $link);
    }
    /** Link to last page, plus ellipses if necessary */
    if (!in_array($max, $links)) {
        if (!in_array($max - 1, $links)) {
            echo '<li><span class="btn disabled">…</span></li>' . "\n";
        }
        $class = $paged == $max ? ' class="active"' : '';
        printf('<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url(get_pagenum_link($max)), $max);
    }
    /** Next Post Link */
    if (get_next_posts_link()) {
        printf('<li>%s</li>' . "\n", get_next_posts_link(">>"));
    }
    echo '</ul></div>' . "\n";
}

@Shaz3e
Copy link

Shaz3e commented Mar 20, 2016

That's good but the last page doesn't show dots on the right place
image

Correction:
image

/**
 * Numeric Bootstrap3 Pagination
 * This is some shameless copy paste edited to use bootstrap3 classes
 * http://www.wpbeginner.com/wp-themes/how-to-add-numeric-pagination-in-your-wordpress-theme/
 * http://getbootstrap.com/components/#pagination
 */
function numeric_bootstrap_posts_nav()
{
    if (is_singular()) {
        return;
    }
    global $wp_query;
    /** Stop execution if there's only 1 page */
    if ($wp_query->max_num_pages <= 1) {
        return;
    }
    $paged = get_query_var('paged') ? absint(get_query_var('paged')) : 1;
    $max = intval($wp_query->max_num_pages);
    /** Add current page to the array */
    if ($paged >= 1) {
        $links[] = $paged;
    }
    /** Add the pages around the current page to the array */
    if ($paged >= 3) {
        $links[] = $paged - 1;
        $links[] = $paged - 2;
    }
    if (($paged + 2) <= $max) {
        $links[] = $paged + 2;
        $links[] = $paged + 1;
    }
    echo '<div class="pagination_wrapper"><ul class="pagination">' . "\n";
    /** Previous Post Link */
    if (get_previous_posts_link()) {
        printf('<li>%s</li>' . "\n", get_previous_posts_link("<<"));
    }
    /** Link to first page, plus ellipses if necessary */
    if (!in_array(1, $links)) {
        $class = 1 == $paged ? ' class="first active"' : ' class="first"';
        printf('<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url(get_pagenum_link(1)), '1');
        if (!in_array(2, $links)) {
            echo '<li><span class="btn disabled">…</span></li>' . "\n"; // Here is the correction
        }
    }
    /** Link to current page, plus 2 pages in either direction if necessary */
    sort($links);
    foreach ((array)$links as $link) {
        $class = $paged == $link ? ' class="last active"' : ' class="last"';
        printf('<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url(get_pagenum_link($link)), $link);
    }
    /** Link to last page, plus ellipses if necessary */
    if (!in_array($max, $links)) {
        if (!in_array($max - 1, $links)) {
            echo '<li><span class="btn disabled">…</span></li>' . "\n";
        }
        $class = $paged == $max ? ' class="active"' : '';
        printf('<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url(get_pagenum_link($max)), $max);
    }
    /** Next Post Link */
    if (get_next_posts_link()) {
        printf('<li>%s</li>' . "\n", get_next_posts_link(">>"));
    }
    echo '</ul></div>' . "\n";
}```

@brettalton
Copy link

Do you know how this could be modified for Bootstrap 4?
https://v4-alpha.getbootstrap.com/components/pagination/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment