Show next / previous text (button) all the time

Question

As you see this pagination. there is no "pre" button or text. because there is no previous posts. ( http://prntscr.com/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.com/bmutmv )

I use this code and refer this codex ( https://codex.wordpress.org/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,

Answer 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.

Answer 2

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.