Helps to quickly add pagination styles and provide 'wp_link_pages' markup.
<?php
$defaults = array(
'before' => '<nav class="navigation pagination" role="navigation"><ul class="page-numbers"><li>',
'after' => '</li></ul>',
'separator' => '</li><li>',
'pagelink' => '<span>%</span>',
'echo' => 1
);
wp_link_pages( $defaults );
<?php
$args = array(
'type' => 'list',
'prev_text' => '<span aria-hidden="true"><i class="fa fa-angle-left"></i></span>',
'next_text' => '<span aria-hidden="true"><i class="fa fa-angle-right"></i></span>',
);
the_posts_pagination( $args );
// change variables with your own variables/colors
.navigation {
text-align: center;
margin: 40px 0 0;
.screen-reader-text {
display: none;
}
.page-numbers {
margin: 0;
.fa {
font-size: 18px;
position: relative;
top: 2px;
}
.label{
width: 85px;
span{
display: inline-block;
vertical-align: middle;
}
.fa-angle-left{
margin-right: 5px;
}
.fa-angle-right{
margin-left: 5px;
}
}
> li {
> a,
> span {
padding: $padding-base-vertical 0;
min-width: 43px;
text-align: center;
margin-left: 10px;
margin-top: 10px;
&:hover,
&.current {
background-color: $link-hover-color;
border-color: $link-hover-color;
color: #fff;
}
}
> span {
background-color: $link-hover-color;
border-color: $link-hover-color;
color: #fff;
}
}
}
}