As you see this pagination. there is no "pre" button or text. because there is no previous posts. ( )

However I want to show the buttons (previous / next ) even if there is no (previous / next ) posts.

Because of design balance.

I want to make to show like this all the time. ( )

I use this code and refer this codex ( )

<?php
global $wp_query;
$big = 999999999; // need an unlikely integer

echo paginate_links( array(
'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
'format' => '?paged=%#%',
'current' => max( 1, get_query_var('paged') ),
'total' => $wp_query->max_num_pages
) );
?>

I have tried to add more array values. but it seems no way to make it.

Thank you,

As you see this pagination. there is no "pre" button or text. because there is no previous posts. ( http://prntscr/bmuui2 )

However I want to show the buttons (previous / next ) even if there is no (previous / next ) posts.

Because of design balance.

I want to make to show like this all the time. ( http://prntscr/bmutmv )

I use this code and refer this codex ( https://codex.wordpress/Function_Reference/paginate_links )

<?php
global $wp_query;
$big = 999999999; // need an unlikely integer

echo paginate_links( array(
'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
'format' => '?paged=%#%',
'current' => max( 1, get_query_var('paged') ),
'total' => $wp_query->max_num_pages
) );
?>

I have tried to add more array values. but it seems no way to make it.

Thank you,

• pagination

Share Improve this question asked Jun 30, 2016 at 2:16 pullapulla 72355 gold badges1717 silver badges3434 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1

I have no doubt that Suyash Jain's solution above is a good one, possibly even the optimal one, and certainly more elegant as a piece of programming than what I am about to propose.

However, it strikes me that there is a very simple way to add the desired elements before and after the links produced by `paginate_links:

<?php

global $wp_query;
$big = 999999999; // need an unlikely integer

$html = paginate_links( array(
    'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
    //recommended for pretty permalinks, but you could use 'format' => '?paged=%#%', if you prefer
    'format' => '/page/%#%',
    'current' => max( 1, get_query_var('paged') ),
    'total' => $wp_query->max_num_pages
) );

//set your additional decorative elements

//mimics the default for paginate_links()
$pretext = '&laquo; Previous';
$posttext = 'Next &raquo'; 

//assuming this set of links goes at bottom of page
$pre_deco = '<div id="bottom-deco-pre-link" class="deco-links">' . $pretext . '</div>';
$post_deco = '<div id="bottom-deco-post-link" class="deco-links">' . $posttext . '</div>';

 //key variable 
$paged = get_query_var( 'paged' ) ? absint( get_query_var( 'paged' ) ) : 1;

//add decorative non-link to first page
if ( 1 === $paged) {

  $html = $pre_deco . $html;

}

//add decorative non-link to last page    
if ( $wp_query->max_num_pages ==  $paged   ) {

  $html = $html . $post_deco; 

}

//may be helpful to create a larger containing div so...
echo '<div id="pagination-bottom" class="expanded-pagination">';

echo $html;

echo '</div>';


?>

You'd then copy (and modify) the CSS styling of the "real" paginate-links, and maybe add your own color-coding further signifying that the "deco" links are in fact dead.

I achieved it through the following code.

function wpbeginner_numeric_posts_nav() {
    echo '<br>';

    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="navigation"><ul>' . "\n";

    /** Previous Post Link */
    if ( get_previous_posts_link() ) {
        printf( '<li>%s</li>' . "\n", get_previous_posts_link() );
    }else{
        echo '<li>&laquo; Previous Page </li>&nbsp; ';
    }
    /** Link to first page, plus ellipses if necessary */
    if ( ! in_array( 1, $links ) ) {
        $class = 1 == $paged ? ' class="active"' : '';

        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="active"' : '';
        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>…</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";

}

In this function, the following condition is changing the behaviour as per your requirement. If we remove else condition then previous button will hide on first page.

I tested it for previous button only but will work in same manner for next button also.

if ( get_previous_posts_link() ) {
            printf( '<li>%s</li>' . "\n", get_previous_posts_link() );
        }else{
            echo '<li>&laquo; Previous Page </li>&nbsp; ';
        }

call the function wpbeginner_numeric_posts_nav() after loop.