Wordpress pagination number

Question

I want to add a number navigation in order to browse through the posts.

In the home of my theme I have this code that shows the posts.

<div class="container mt-80 mb-80">
<div class="card-columns">

<?php $args['tax_query'] = array(
    array(
    'taxonomy' => 'category',
    'terms' => array('portfolio'),
    'field' => 'slug',
    'operator' => 'NOT IN',
),
);

query_posts($args);?>

<?php while(have_posts()) : the_post(); ?>
    <div class="card">

    <div class="card-body">
    <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
    <?php the_post_thumbnail('full', array('class' => 'image-post card-img-top')); ?>
        </a>
        <h3 class="card-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
            <p class="card-text"><?php echo get_the_excerpt(); ?> ...</p> 
                <span class="entry-date"><?php echo get_the_date(); ?></span>
                    </div>
                    </div>
                    <?php endwhile; wp_reset_query(); ?>
                        </div>
                        </div>

To show the pagination I tried to add this code on the function.php
I want to insert the page numbers below the posts to browse them but I don't want to install any plugins.

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

And this on the index.php

<?php numeric_posts_nav(); ?>

The navigation appears but does not work properly. Does anyone know why?

Answer 1

    <?php    
    $paged = ( get_query_var( 'paged' ) ) ? absint( get_query_var( 'paged' ) ) : 1;
        $args = array(
            'post_per_page' => 10,
            'paged'=> $paged, 
            'tax_query'=> array(
                         'taxonomy' => 'category',
                         'terms' => array('portfolio'),
                          'field' => 'slug',
                           'operator' => 'NOT IN',
                           ),
             ); ?>
             <?php $wp_query = new WP_Query($args); ?>
                <?php if ($wp_query->have_posts()) : ?>
                        <?php while ( $wp_query -> have_posts() ) : $wp_query->the_post(); ?>
                          // Post content goes here...
                        <?php endwhile; ?>
                        <?php numeric_posts_nav(); ?>
                <?php endif; ?>
                <?php wp_reset_postdata(); ?>

Answer 2

Add below thing in the argument

$args = array(
    'post_per_page' => 10,
    'paged'=> 'paged', //'paged' for the home page and for other pages we need to set 'page',
    'tax_query'=> array(
                 'taxonomy' => 'category',
                 'terms' => array('portfolio'),
                  'field' => 'slug',
                   'operator' => 'NOT IN',
                   ),
     );

And add the function just after your loop ends

<?php numeric_posts_nav(); ?>

Answer 3

put below code in function.php file

function pagination_nav() {
 global $wp_query;
 if ( $wp_query->max_num_pages > 1 ) { ?>
    <nav class="pagination" role="navigation">
        <div class="nav-previous"><?php next_posts_link( '&larr; Older posts' ); ?></div>
        <div class="nav-next"><?php previous_posts_link( 'Newer posts &rarr;' ); ?></div>
    </nav>
  }
}

and this code in index.php file :

pagination_nav();