1

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,

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.

| improve this answer | |
  • CK, thanks.. your is mostly closed to what I need. however I used "ul, li" (type=>'list') and it seems out of ul .. is there any way to make it better? I will try to find. btw very thanks for your suggestion. – pulla Jul 1 '16 at 19:02
  • That's why I described the other answer as possibly more optimal, since it would, I believe (haven't tested it), already integrate the "deco" links within whatever list you output. Using my solution, you'd have to emulate the formatting applied to the "real" links. You could, for instance, make each deco link a one item "list" and float each, but how exactly you went about the whole thing would depend on specifics of how and where the pagination was being styled and shown. – CK MacLeod Jul 1 '16 at 19:14
  • Note also made a change in the code - $post_deco instead of $posttext in the final conditional (so you get the full html with classes not just the text) – CK MacLeod Jul 1 '16 at 19:35
  • Apologize for late reply. Yes you're right. I use css and it seems look fine. (not 100% but much better with your tip). btw, can you please give me little more details (if your time is allowed. no pressure at all) "you'd have to emulate the formatting applied to the "real" links. You could, for instance, make each deco link a one item "list" and float each" . I understood briefly but not sure. thanks anyway. – pulla Jul 3 '16 at 21:23
  • Hi, pulla. I just meant that, if you wanted the "deco" links to look like the "real" links, and the real links are formatted as <li> elements each class'd "page-numbers" with "previous" or "next" additional classes, in div "page-nav" , you might try doing each deco link just like that - as <div class="page-nav"><ul><li class="page-numbers previous">[pre_deco]</li></ul></div> and then apply whatever needed other style modifications on top or after that. Alternatively, you might try just copying the previous/next CSS and applying it to the deco links. – CK MacLeod Jul 4 '16 at 14:18
1

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.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.