WordPress custom post type pagination

example.php

<?php

/**
 * Template Name: Issues Archive
 */

$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

$args = [
  'post_type' =>  'page',
  'post_parent' => 2,
  'orderby' =>  'ID',
  'order' => 'DESC',
  'posts_per_page'  =>  18,
  'paged' => $paged
];

$issues = new WP_Query( $args );
?>

<section id="issue">
  <div class="">
    <?php if (!$issues->have_posts()) : ?>
      <div class="alert alert-warning">
        <?php _e('Sorry, no results were found.', 'beat'); ?>
      </div>
      <?php get_search_form(); ?>
    <?php endif; ?>

    <?php if( $issues->have_posts() ) : ?>
      <ul class="o-list-bare c-issue-list">
        <?php while ($issues->have_posts()) : $issues->the_post(); ?>
          <li class="c-issue-list__item">
            <div class="c-issue">
              <a class="c-issue__title" href="<?= esc_url( home_url( '/issues/' . $post->post_name ) ); ?>"><?php the_title(); ?></a>

              <div class="c-issue__cover">
              <?php $featured_image_url = wp_get_attachment_url( get_post_thumbnail_id( $post->ID ) ); ?>
                <a href="<?= esc_url( home_url( '/issues/' . $post->post_name ) ); ?>">
                  <?php if(false !== $featured_image_url) : ?>
                    <?php the_post_thumbnail('archive_thumbnail'); ?>
                  <?php else: ?>
                    <img src="<?= get_template_directory_uri(); ?>/dist/images/img-fallback-old.png" width="183" height="240" alt="Caribbean logo on purple gradient background">
                  <?php endif; ?>
                </a>
              </div>

              <div class="c-issue__period">
                <span><?= get_post_meta($post->ID, 'issueperiod', true); ?></span>
              </div>
            </div>
          </li>
        <?php endwhile; ?>
      </ul>
    <?php endif; ?>


    <?php posts_pagination($issues->max_num_pages,'?paged=%#%'); ?>

  </div> <!-- / .container -->
</section>

pagination.php

<?php

/**
 * Custom Post Pagination
 *
 * @param string $num_pages
 * @param string $paged
 * @param integer $page_range
 * @return void
 */
function posts_pagination( $num_pages = '', $format='', $paged='', $page_range = 2 ) {

  /**
   * Fallback for custom pagination inside a regular loop that
   * uses the global $paged and global $wp_query variables.
   *
   * Good because we can override default pagination
   * in our theme, and use this function in default queries
   * and custom queries.
   */
  global $paged;

  if( empty($paged) ) {
    $paged = 1;
  }

  if( $num_pages == '' ) {
    global $wp_query;
    $num_pages = $wp_query->max_num_pages;

    if( !$num_pages ) {
      $num_pages = 1;
    }
  }

  /** End Fallback **/

  if( empty($format) ) {
    $format = 'page/%#%';
  }

  /**
   * Construct the pagination arguments for WordPress' paginate_links
   * function.
   */
  $pagination_args = array(
    'base'                => get_pagenum_link(1) . '%_%',
    'format'              => $format,
    'total'               => $num_pages,
    'current'             => $paged,
    'show_all'            => false,
    'end_size'            => 1,
    'mid_size'            => $page_range,
    'prev_next'           => true,
    'prev_text'           => __('&laquo; Previous', 'beat'),
    'next_text'           => __('Next &raquo;', 'beat'),
    'type'                => 'array',
    'add_args'            => false,
    'add_fragment'        => '',
    'before_page_number'  => '',
    'after_page_number'   => '<span class="page-number-divider">/</span>'
  );

  $paginate_links = paginate_links($pagination_args);

  if ($paginate_links) {
    echo "<nav class='c-pagination'>";
      echo "<ul class='o-list-bare o-list-inline c-pagination__list'>";
        foreach( $paginate_links as $link ) {
          if(strpos($link, 'prev') !== false) {
            $next_prev_class = 'prevlink';
          } elseif(strpos($link, 'next') !== false) {
            $next_prev_class = 'nextlink';
          } else {
            $next_prev_class = '';
          }

          echo "<li class='o-list-inline__item " .$next_prev_class . "'>" . $link . "</li>";

        }
      echo "</ul>";
    echo "</nav>";
  }
}

pagination.scss

/*=============================================
=            #Pagination            =
=============================================*/

.c-pagination {
  padding-top: var(--unit);
  padding-bottom: var(--unit);
  text-align: center;
}

.c-pagination__list {
  margin-left: 0;
  list-style: none;
}

.c-pagination__list li {
  display: inline-block;

  &.nextlink:last-child {
    float: right;
  }

  &.prevlink:first-child {
    float: left;
  }
}

.page-numbers {
  text-decoration: none;
}

.page-number-divider {
  margin-left: var(--unit);
  margin-right: var(--unit);
  color: var(--feature-stroke);
}

.page-numbers.dots,
.wp-pagenavi .extend {
  margin-right: var(--unit);
}

/* WP Pagenav */
.wp-pagenavi {
  padding-top: var(--unit);
  padding-bottom: var(--unit);
  text-align: center;

  .page-numbers:after,
  .current:after {
    display: inline-block;
    content: '/';
    margin-left: var(--unit);
    margin-right: var(--unit);
    color: var(--feature-stroke);
  }

  .prevlink {
    float: left;
  }

  .nextlink {
    float: right;
  }
}

.prevlink,
.nextlink {
  text-decoration: none;
}