Single Post Navigation

Thumbnail

// <PageNav>
.uk-margin-top.uk-margin-bottom
  .uk-grid-collapse.uk-padding.uk-padding-remove-horizontal.uk-child-width-1-2.uk-grid-divider.grid-divider-secondary(uk-grid)
    div
      a(href='#')
        .uk-position-relative
          i.uk-position-center-left.uk-text-secondary(uk-icon='icon:chevron-left; ratio: 2;' style='left: -.5rem;')
          .uk-grid-small.uk-margin-left(uk-grid)
            div(class='uk-width-1-3@m uk-visible@m')
              .uk-width-1-1.uk-background-cover.uk-display-block(data-src="img/default_image.png" uk-img style="padding-top: calc(115 / 172 * 100%);")
            div(class='uk-width-2-3@m')
              p.text-white.text-xsmall.uk-text-center(class='uk-text-left@s')
                span.uk-background-secondary.uk-position-relative(style='top: .2rem; padding: .2rem .5rem;' class='uk-visible@s') PREV | 上一篇
                span.uk-background-secondary.uk-position-relative.text-remove-spacing.uk-text-nowrap(style='top: 0; padding: .2rem .5rem;' class='uk-hidden@s') PREV | 上一篇
              p.text-medium-m.text-default.uk-padding-default-top.uk-text-bold(class='uk-visible@s' style='letter-spacing: .9px; line-height: 1.94') AA
    div
      a(href='#')
        .uk-position-relative
          i.uk-position-center-right.uk-text-secondary(uk-icon='icon:chevron-right; ratio: 2;' style='right: -.5rem;')
          .uk-grid-small.uk-margin-right(uk-grid)
            div(class='uk-width-1-3@m uk-visible@m')
              .uk-width-1-1.uk-background-cover.uk-display-block(data-src="img/default_image.png" uk-img style="padding-top: calc(115 / 172 * 100%);")
            div(class='uk-width-2-3@m padding-remove-left-s')
              p.text-white.text-xsmall.uk-text-center(class='uk-text-left@s')
                span.uk-background-secondary.uk-position-relative(style='top: .2rem; padding: .2rem .5rem;' class='uk-visible@s') NEXT | 下一篇
                span.uk-background-secondary.uk-position-relative.text-remove-spacing.uk-text-nowrap(style='top: 0; padding: .2rem .5rem;' class='uk-hidden@s') NEXT | 下一篇
              p.text-medium-m.text-default.uk-padding-default-top.uk-text-bold(class='uk-visible@s' style='letter-spacing: .9px; line-height: 1.94') BB
// </PageNav>
.uk-grid-divider.grid-divider-secondary > :not(.uk-first-column)::before {
  border-color: $global-secondary-background;
}

<div class="uk-margin-top uk-margin-bottom">
  <div class="uk-grid-collapse uk-padding uk-padding-remove-horizontal uk-child-width-1-2 uk-grid-divider grid-divider-secondary" uk-grid="">
    <div>
      <?php if(get_previous_post()): ?>
      <a href="<?php echo esc_url(get_previous_post()->guid); ?>">
        <div class="uk-position-relative">
          <i class="uk-position-center-left uk-text-secondary" uk-icon="icon:chevron-left; ratio: 2;" style="left: -.5rem;"></i>
          <div class="uk-grid-small uk-margin-left" uk-grid="">
            <div class="uk-width-1-3@m uk-visible@m">
              <div class="uk-width-1-1 uk-background-cover uk-display-block" data-src="<?php echo esc_url(get_the_post_thumbnail_url(get_previous_post()->ID),'full'); ?>" uk-img="" style="padding-top: calc(115 / 172 * 100%);"></div>
            </div>
            <div class="uk-width-2-3@m">
              <p class="text-white text-xsmall uk-text-center uk-text-left@s"><span class="uk-background-secondary uk-position-relative uk-visible@s" style="top: .2rem; padding: .2rem .5rem;">PREV | 上一篇</span><span class="uk-background-secondary uk-position-relative text-remove-spacing uk-text-nowrap uk-hidden@s" style="top: 0; padding: .2rem .5rem;">PREV | 上一篇</span></p>
              <p class="text-medium-m text-default uk-padding-default-top uk-text-bold uk-visible@s" style="letter-spacing: .9px; line-height: 1.94"><?php echo esc_html(get_previous_post()->post_title); ?></p>
            </div>
          </div>
        </div>
      </a>
      <?php endif; ?>
    </div>
    <div>
      <?php if(get_next_post()): ?>
      <a href="<?php echo esc_url(get_next_post()->guid); ?>">
        <div class="uk-position-relative">
          <i class="uk-position-center-right uk-text-secondary" uk-icon="icon:chevron-right; ratio: 2;" style="right: -.5rem;"></i>
          <div class="uk-grid-small uk-margin-right" uk-grid="">
            <div class="uk-width-1-3@m uk-visible@m">
              <div class="uk-width-1-1 uk-background-cover uk-display-block" data-src="<?php echo esc_url(get_the_post_thumbnail_url(get_next_post()->ID),'full'); ?>" uk-img="" style="padding-top: calc(115 / 172 * 100%);"></div>
            </div>
            <div class="uk-width-2-3@m padding-remove-left-s">
              <p class="text-white text-xsmall uk-text-center uk-text-left@s"><span class="uk-background-secondary uk-position-relative uk-visible@s" style="top: .2rem; padding: .2rem .5rem;">NEXT | 下一篇</span><span class="uk-background-secondary uk-position-relative text-remove-spacing uk-text-nowrap uk-hidden@s" style="top: 0; padding: .2rem .5rem;">NEXT | 下一篇</span></p>
              <p class="text-medium-m text-default uk-padding-default-top uk-text-bold uk-visible@s" style="letter-spacing: .9px; line-height: 1.94"><?php echo esc_html(get_next_post()->post_title); ?></p>
            </div>
          </div>
        </div>
      </a>
      <?php endif; ?>
    </div>
  </div>
</div>

Lists of users with Pagination

The sample code of pagination with get_users query.

Thumbnail

PHP
<div class="uk-grid-small uk-margin-medium-bottom uk-grid-match uk-child-width-1-4@l uk-child-width-1-3@m uk-child-width-1-2@s" uk-grid>
  <?php 
  $number = get_option('posts_per_page',);
  $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
  $offset = ($paged - 1) * $number;
  $users = get_users(array('role__in' => array('author','innews_admin')));
  $args = array(
    'offset' => $offset,
    'number' => $number,
    'role__in' => array('author','innews_admin')
  );
  $query = get_users($args);
  $total_users = count($users);
  $total_query = count($query);
  $total_pages = ($total_users / $number);
  foreach ( $query as $user ): ?>
    <div>
      <a class="uk-background-muted uk-padding-default uk-position-relative uk-display-block" href="<?php echo esc_url(home_url().'/author/'.$user->user_login); ?>">
      <img class="uk-position-top-center" src="<?php echo get_template_directory_uri(); ?>/assets/img/icon-hot_news.svg" style="transform: translateX(-50%) scale(1.5,1.8); top: 8px;">
        <p class="uk-text-center uk-margin-medium-top uk-margin-bottom text-default uk-text-primary text-large-weight text-small-spacing"><?php echo get_field('author_job','user_'.$user->ID); ?></p>
        <p class="uk-text-center uk-margin-bottom text-dark text-xxlarge text-large-weight text-small-spacing"><?php echo esc_html($user->display_name); ?></p>
        <p class="uk-text-center uk-margin-bottom text-small text-large-weight text-small-spacing" style="color:#606060"><?php echo esc_html(get_user_meta($user->ID,'description',true)); ?></p>
        <p class="uk-text-center uk-margin-bottom"><span class="uk-background-cover uk-display-block uk-margin-auto" data-src="<?php echo (get_field('author_avatar','user_'.$user->ID))?get_field('author_avatar','user_'.$user->ID)['url']:get_template_directory_uri().'/assets/img/default_image.png'; ?>" uk-img style="width:107px;height:107px;border-radius:100%;"></span></p>
    </a>
  </div>
  <?php endforeach; ?>
</div>
<?php
if ($total_users > $total_query) {
  $pages = paginate_links( array(
    'base' => get_pagenum_link(1) . '%_%',
    'format' => '?paged=%#%',
    'current' => max(1, get_query_var('paged')),
    'total' => is_float($total_pages) ? intval($total_users / $number) + 1 : intval($total_users / $number),
    'type'  => 'array',
    'prev_text' =>'<span uk-pagination-previous></span>',
    'next_text' =>'<span uk-pagination-next></span>',
  ));
  if( is_array( $pages ) ) {
    echo '<ul class="uk-pagination uk-flex-center">';
    foreach ( $pages as $page ) {
        echo "<li>$page</li>";
    }
    echo '</ul>';
    echo '<script>jQuery(".page-numbers.current").wrap("<a href></a>");jQuery(".page-numbers.current").parent().parent().addClass("uk-active")</script>';
  }
}
?>

Pagination

ul.uk-pagination.uk-flex-center(uk-margin="")
  li
    a(href="#")
      span(uk-pagination-previous="")
  li
    a(href="#") 1
  li
    a(href="#") 2
  li
    a(href="#") 3
  li.uk-disabled
    span ...
  li
    a(href="#") 5
  li
    a(href="#") 6
  li.uk-active
    span 7
  li
    a(href="#") 8
  li
    a(href="#")
      span(uk-pagination-next="")
.uk-pagination {
  margin-top: rem(62px);
}
.uk-pagination>* {
  width: rem(40px);
  height: rem(40px);
  text-align: center;
  color: #222;
  margin-left: 10px;
  padding-left: 0;
  @include mq(640px){
    margin-left: 0;
  }
  a {
    padding: .5rem;
    color: #4D4D4D;
    &:hover {
      color: $global-secondary-background;
    }
  }
}

.uk-pagination>.uk-disabled>* {
  color: #4D4D4D;
  line-height: 30px;
}

.uk-pagination>.uk-active>* {
  width: 40px;
  background-color: rgba(225, 49, 51,.8);
  padding: 12px 0;
  margin-top: -3px;
  color: #fff;
}

.uk-pagination-previous,
.uk-pagination-next {
  color: #ccc;
  transform: scale(1.8);
  &:hover,
  &:focus {
    color: $global-secondary-background;
  }
}
<?php 

global $wp_query;
  $cats = $wp_query->get_queried_object();
  if ( $wp_query->max_num_pages <= 1 ) return; 
  $big = 999999999; // need an unlikely integer
  $pages = 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,
    // 'total' => ceil(wp_count_posts('post')->publish / get_option('posts_per_page')), // for static page
    'type'  => 'array',
    'prev_text' =>'<span uk-pagination-previous></span>',
    'next_text' =>'<span uk-pagination-next></span>',
  ));
  if( is_array( $pages ) ) {
    echo '<ul class="uk-pagination uk-flex-center">';
    foreach ( $pages as $page ) {
        echo "<li>$page</li>";
    }
    echo '</ul>';
    echo '<script>jQuery(".page-numbers.current").wrap("<a href></a>");jQuery(".page-numbers.current").parent().parent().addClass("uk-active")</script>';
  }