WordPress navigation

index.php

<?php

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

$args = array(
  'post_type'         => 'post',
    'posts_per_page'    => 12,
    'post_status'       => 'publish',
    'paged'              => $paged,
);

$the_query = new WP_Query( $args );

if ( $the_query->have_posts() ) :
    while ( $the_query->have_posts() ) :
        $the_query->the_post();

        $terms = wp_get_object_terms( get_the_ID(), 'category' );

        $iconCat = 'default';
        $maincat = false;
        if( $terms ) {
            $maincat = $terms[0];
            $iconCat = get_field('icon_cat', $maincat);
        }

        ?>

        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
            <div class="push-border push-article">
                <div class="head-article">
                    <div class="container-icon">
                        <span class="icon <?php echo $iconCat; ?>"></span>
                    </div>
                    <div class="info-article">

                        <?php if($terms[0]): ?>
                            <div class="category">
                                <?php echo $terms[0]->name; ?>
                            </div>
                        <?php endif; ?>
                        <div class="date">
                            <?php echo get_the_date('d/m/Y'); ?>
                        </div>
                    </div>
                </div>
                <div class="title">
                    <?php echo truncated(get_the_title(), 60) ?>
                </div>
                <div class="intro">
                    <?php echo truncated(get_the_excerpt(), 80); ?>
                </div>

                <a href="<?php echo get_the_permalink(); ?>" class="link-block">
                    <p class="link-arrow">
                        <span class="icon-arrow icon"></span>
                        Lire la suite
                    </p>
                </a>

            </div>
        </div>
    <?php endwhile ?>

    <div class="col-xs-12">
    <?php

    if ( function_exists( 'get_pagination' ) ) {
        echo get_pagination( $the_query->max_num_pages, 12 );
    }

    ?>
    </div>
<?php wp_reset_postdata(); ?>
<?php endif ?>

navigation.php

<?php

/**
 * Get pagination
 *
 * @param  	string  $pages
 * @param  	integer $range
 * @see    	https://www.wpblog.com/use-wp_query-to-create-pagination/
 * @author  Moeez
 */
function get_pagination( $pages = '', $range = 4 ) {
	// var_dump($range);
    $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;
        }
    }

    $output = '';

    if ( 1 !== $pages ) {
        $output .= '<div class="Pagination">';
        $output .= '<ul class="Pagination__navigation">';


        // $output .= "<span>Page {$paged} of {$pages}</span>";

        // First
        // if ( $paged > 2 && $paged > $range + 1 && $showitems > $pages ) {
        // 	$output .= '<a href="' . get_pagenum_link( 1 ) . '"">&laquo; First</a>';
        // }


        // Previous
        if ( $paged > 1 && $showitems > $pages ) {
        	$output .= '<li class="Pagination__previous"><a href="';
        	$output .= get_pagenum_link( $paged - 1 );
        	$output .= '" ';
        	$output .= 'data-content="' . __( 'Précédente', 'theme_name' ) . '"';
        	$output .= '>';
        	$output .= '</li></a>';
        }


        // Pages
        for ( $i = 1; $i <= $pages; $i++ ) {
            if ( 1 != $pages && ( ! ( $i >= $paged + $range + 1 || $i <= $paged - $range - 1 ) || $pages <= $showitems ) ) {

            	if ( $paged === $i ) {
            		$output .= "<li class=\"Pagination__item --is-current\">{$i}</li>";

            		continue;
            	}

                $output .= '<li class="Pagination__item --is-inactive">';
                $output .= '<a href="' . get_pagenum_link( $i ) . '">';
                $output .= $i;
                $output .= '</a></li>';
            }
        }



        // Next
        if ( $paged < $pages && $showitems > $pages ) {
        	$output .= '<li class="Pagination__next"><a href="';
        	$output .= get_pagenum_link( $paged + 1 );
        	$output .= '" ';
        	$output .= 'data-content="' . __( 'Suivante', 'theme_name' ) . '"';
        	$output .= '>';
        	$output .= '</a></li>';
        }

        // Last
        // if ( $paged < $pages - 1 && $paged + $range - 1 < $pages && $showitems > $pages ) {
        // 	$output .= '<a href="' . get_pagenum_link( $pages ) . '"">Last &raquo;</a>';
        // }

        $output .= '</ul>';
        $output .= '</div>';
    }

    return $output;
}

navigation.scss

/**
 * Pagination
 *
 * @uses .Pagination
 */
.Pagination {

	position: relative;

	margin-bottom: 30px;
	padding: {
		top: 15px;
		bottom: 15px;
	}

	background-color: #ffffff;
	border: 1px solid $lightGrey;

	text-align: center;


	/**
	 * Navigation link
	 *
	 * @param  str $pseudo-element 	before or after
	 * @param  str $arrow          	icon name
	 */
	@mixin navigation-link( $pseudo-element, $arrow, $pseudo-element-positions, $transform-origin, $border, $positions, $transform ) {
		display: inline-block;
		vertical-align: middle;
		width: 50px;
		height: 50px;

		position: absolute;
		top: 0;
		bottom: 0;

		@each $position, $value in $positions {
			#{ unquote( $position ) }: #{ unquote( $value ) };
		}



		a {
			display: block;
			width: 100%;
			height: 100%;
			position: relative;

			background: {
				image: url( '../images/svg/arrow-#{ $arrow }.svg' );
				position: center;
				repeat: no-repeat;
			}

			font: {
				size: 13px;
				weight: 700;
			}
			line-height: 18px;
			letter-spacing: .2em;
			text-transform: uppercase;
			transition: .3s ease .3s;

			&::#{ $pseudo-element } {
				display: block;
				position: absolute;
				top: 0;
				padding: {
					#{ unquote( $border ) }: 20px;
				}
				color: transparent;

				border-#{ unquote( $border ) }: 1px solid $lightGrey;
				height: 100%;
				line-height: 50px;

				@each $position, $value in $pseudo-element-positions {
					#{ unquote( $position ) }: #{ unquote( $value ) };
				}

				content: attr( data-content );

				transform: translate3d( #{ $transform }, 0, 0 );
				transform-origin: #{ unquote( $transform-origin ) };
				transition: ease .3s;

				pointer-events: none;
			}

			&:hover {
				&::#{ $pseudo-element } {
					transform: translate3d( 0, 0, 0 );
					color: black;
					pointer-events: auto;
				}
			}
		}
	}


	/**
	 * Navigation
	 *
	 * @uses .Pagination .pagination__navigation
	 */
	&__navigation {
		display: inline-block;
	}


	/**
	 * Items
	 *
	 * @uses .Pagination .Pagination__item
	 */
	&__item {
		display: inline-block;
		vertical-align: middle;
		padding: {
			right: 10px;
			left: 10px;
		}

		&:first-child {
			padding-left: 0;
		}
		&:last-child {
			padding-right: 0;
		}

		&.--is-current {
			font-weight: 700;
		}

		&.--is-inactive {}

		a {
			color: #000000;
		}
	}


	/**
	 * Previous
	 *
	 * @uses .Pagination .Pagination__previous
	 */
	&__previous {
		$previous_pseudo_element_position: ( right: 'auto', left: '100%' );
		$previous_position: ( right: 'auto', left: '0' );
		@include navigation-link( 'after', 'left', $previous_pseudo_element_position, '0% 50%', 'right', $previous_position, '-100%' );
	}


	/**
	 * Next
	 *
	 * @uses .Pagination .Pagination__next
	 */
	&__next {
		$next_pseudo_element_position: ( right: '100%', left: 'auto' );
		$next_position: ( right: '0', left: 'auto' );
		@include navigation-link( 'before', 'right', $next_pseudo_element_position, '100% 50%', 'left', $next_position, '100%' );
	}
}