Bootstrap acf wp pagination with get_posts - wordpress

Question

I have this problem creating a navigation that reacts with my get_posts($args). Have tried everything, and all I can find on the web is solutions done with wp query.
I use ACF and Bootstrap, so I would really like to stick with get_posts.
The code beneath here is my current code, that works perfectly to only show 5 post. But how do I create a navigation for the pagination?
<div class="articles">
<?php
$args = array( //'numberposts' => -1
'orderby' => 'post_date',
'order' => 'DESC',
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => 5,
'paged' => $paged,);
$posts= get_posts( $args );
if ( $posts ) :
$counter = 1;
foreach ( $posts as $p ) :
$classCount = 'post-'.$counter;
if( $classCount == 'post-1' ) : echo '<div class="mediumPost col-xs-12 col-sm-6 col-md-6 col-lg-6">';
elseif( $classCount == 'post-2' || $classCount == 'post-3' ) : echo '<div class="smallPost col-xs-12 col-sm-6 col-md-6 col-lg-6">';
elseif( $classCount == 'post-4' ) : echo '<div class="largePost col-xs-12 col-sm-12 col-md-12 col-lg-12">';
elseif( $classCount == 'post-5' ) : echo '<div class="mediumPost col-xs-12 col-sm-6 col-md-6 col-lg-6">';
elseif( $classCount == 'post-6' || $classCount == 'post-7' ) : echo '<div class="smallPost col-xs-12 col-sm-6 col-md-6 col-lg-6">';
else : echo '<div class="smallPost col-xs-12 col-sm-6 col-md-6 col-lg-6">';
endif; ?>
<?php $postImg = get_field('post_image', $p->ID ); if( !empty($postImg) ): ?>
<img src="<?php echo $postImg['url']; ?>" alt="<?php if(!empty($postImg['alt'])): echo $postImg['alt']; else : echo the_title(); endif; ?>" />
<?php endif; ?>
<div class="iconBox">
<?php $getIcon = get_field('post_type', $p->ID); ?>
<?php $catIcon = get_field($getIcon, 132); ?>
<?php if( !empty($catIcon) ): ?>
<img class="iconImg" src="<?php echo $catIcon['url']; ?>" alt="<?php if(!empty($catIcon['alt'])): echo $catIcon['alt']; else : echo the_title(); endif; ?>" />
<?php endif; ?>
</div>
<?php $categories = get_the_category($p->ID);
$category_id = $categories[0]->cat_ID; ?>
<?php if( $category_id == 9 ) : ?>
<h4 data-toggle="modal" data-target="#myModal-<?php echo $counter ?>"><?php echo get_the_title( $p->ID ); ?></h4>
<span class="articles-btn" data-toggle="modal" data-target="#myModal-<?php echo $counter ?>">Watch link</span>
<!-- Modal -->
<div class="modal fade" id="myModal-<?php echo $counter ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h5 class="modal-title" id="myModalLabel"><?php echo get_the_title( $p->ID ); ?></h5>
</div>
<div class="modal-body">
<div class="embed-container">
<?php // get iframe HTML
$iframe = get_field('post_embed', $p->ID);
// use preg_match to find iframe src
preg_match('/src="(.+?)"/', $iframe, $matches);
$src = $matches[1];
// add extra params to iframe src
$params = array(
'controls' => 1,
'hd' => 1,
'autohide' => 1
);
$new_src = add_query_arg($params, $src);
$iframe = str_replace($src, $new_src, $iframe);
// add extra attributes to iframe html
$attributes = 'frameborder="0"';
$iframe = str_replace('></iframe>', ' ' . $attributes . '></iframe>', $iframe); ?>
<?php echo $iframe; ?>
</div>
</div>
</div>
</div>
</div>
<?php else : ?>
<h4><?php echo get_the_title( $p->ID ); ?></h4>
<span class="articles-btn">READ MORE</span>
<?php endif; ?>
</div> <!--postSize div-->
<?php $counter++; if ( 11 === $counter ) $counter = 1; endforeach; wp_reset_postdata();?>
<?php endif; ?>
</div>

Answer 1

Copy this function in your functions.php
function custom_pagination($numpages = '', $pagerange = '', $paged='') {
if (empty($pagerange)) {
$pagerange = 2;
}
/**
* This first part of our function is a fallback
* for custom pagination inside a regular loop that
* uses the global $paged and global $wp_query variables.
*
* It's good because we can now override default pagination
* in our theme, and use this function in default queries
* and custom queries.
*/
global $paged;
if (empty($paged)) {
$paged = 1;
}
if ($numpages == '') {
global $wp_query;
$numpages = $wp_query->max_num_pages;
if(!$numpages) {
$numpages = 1;
}
}
/**
* We construct the pagination arguments to enter into our paginate_links
* function.
*/
$pagination_args = array(
'base' => get_pagenum_link(1) . '%_%',
'format' => 'page/%#%',
'total' => $numpages,
'current' => $paged,
'show_all' => False,
'end_size' => 1,
'mid_size' => $pagerange,
'prev_next' => True,
'prev_text' => __('«'),
'next_text' => __('»'),
'type' => 'plain',
'add_args' => false,
'add_fragment' => ''
);
$paginate_links = paginate_links($pagination_args);
if ($paginate_links) {
echo "<nav class='custom-pagination'>";
echo "<span class='page-numbers page-num'>Page " . $paged . " of " . $numpages . "</span> ";
echo $paginate_links;
echo "</nav>";
}
}
Put this in your css
.custom-pagination span,
.custom-pagination a {
display: inline-block;
padding: 2px 10px;
}
.custom-pagination a {
background-color: #ebebeb;
color: #ff3c50;
}
.custom-pagination a:hover {
background-color: #ff3c50;
color: #fff;
}
.custom-pagination span.page-num {
margin-right: 10px;
padding: 0;
}
.custom-pagination span.dots {
padding: 0;
color: gainsboro;
}
.custom-pagination span.current {
background-color: #ff3c50;
color: #fff;
}
Put this above your arguments list in get_posts()
$paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
after the loop of get posts at the bottom paste this
<?php
if (function_exists(custom_pagination)) {
custom_pagination(count($posts) ,"",$paged);
}
?>