Pagination in WP_Query?

Put the following code in functions.php

# +++++++++++++++++++++++++++++++Pagination ++++++++++++++++++++++++++++++++++++++
function kriesi_pagination($pages="", $range = 2)
{
    $prev = __('« Prev');
    $next = __('Next »');
    $showitems = ($range * 2)+1;

    global $paged;
    if(empty($paged)) $paged = 1;

    if($pages == '') {
        global $wp_query;
        $pages = $wp_query->max_num_pages;
        if(!$pages) {
            $pages = 1;
        }
    }

    if(1 != $pages) {
        echo "<ul class="pagination">";
        if($paged > 2 && $paged > $range+1 && $showitems < $pages && false)
            echo "<li><a href="".get_pagenum_link(1)."">&laquo;</a></li>";
        if($paged > 1 && $showitems < $pages)
            echo "<li><a href="".get_pagenum_link($paged - 1)."">$prev</a></li>";

        for ($i=1; $i <= $pages; $i++) {
            if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )) {
                echo ($paged == $i)? "<li class="active"><a href="https://wordpress.stackexchange.com/questions/222979/javascript:void(0)">".$i."</a></li>":"<li class="inactive"><a href="".get_pagenum_link($i)."">".$i."</a></li>";
            }
        }

        if ($paged < $pages && $showitems < $pages)
            echo "<li><a href="".get_pagenum_link($paged + 1)."">$next</a></li>";
        if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages && false)
            echo "<li><a href="".get_pagenum_link($pages)."">&raquo;</a></li>";
        echo "</ul>\n";
    }
}

function kriesi_pagination2($pages="", $range = 1)
{
    $showitems = ($range * 2)+1;

    global $paged;
    if(empty($paged)) $paged = 1;

    if($pages == '')
    {
        global $wp_query;
        $pages = $wp_query->max_num_pages;
        if(!$pages)
        {
            $pages = 1;
        }
    }

    if(1 != $pages)
    {
        echo "<div class="pagination">";
        if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href="".get_pagenum_link(1)."">&laquo;</a>";
        if($paged > 1 && $showitems < $pages) echo "<a href="".get_pagenum_link($paged - 1)."">&lsaquo;</a>";

        for ($i=1; $i <= $pages; $i++)
        {
            if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
            {
                echo ($paged == $i)? "<span class="current">".$i."</span>":"<a href="".get_pagenum_link($i)."" class="inactive" >".$i."</a>";
            }
        }

        if ($paged < $pages && $showitems < $pages) echo "<a href="".get_pagenum_link($paged + 1)."">&rsaquo;</a>";
        if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) echo "<a href="".get_pagenum_link($pages)."">&raquo;</a>";
        echo "</div>\n";
    }
}
# +++++++++++++++++++++++++++++++Pagination ++++++++++++++++++++++++++++++++++++++

Place the following code at your listing page

<?php $catquery = new WP_Query( 'post_type=article&posts_per_page=4&article-visibility=fitness' );
while($catquery->have_posts()) : $catquery->the_post();
?>

   <article class="post home-post">
       <a href="https://wordpress.stackexchange.com/questions/222979/<?php the_permalink(); ?>">
           <div class="post-thumbnail-img">
               <?php the_post_thumbnail('small-thumbnail'); ?>
           </div>
           <h2><?php the_title(); ?></h2>
       </a>
       <p class="post-info">
           <?php the_time('F jS, Y'); ?> |
           <?php get_template_part('block-athlete-archive'); ?>
        </p>

       <p>
           <?php echo get_the_excerpt(); ?>
           <span class="readmore">
               <br><a href="https://wordpress.stackexchange.com/questions/222979/<?php the_permalink(); ?>">Read more &raquo;</a>
           </span>
       </p>

   </article>

<?php endwhile; ?>`

<div class="pagination">
            <?php kriesi_pagination($catquery->max_num_pages); ?>
</div>

After complete the above process you must update your permalink.