My Wordpress custom post type has numeric pagination links within a Bootstrap row instead of appearing below the post thumbnails. How can I move them to a new row below the thumbnails without creating a row within a row?
Bootstrap version: 3.3.7
https://i.sstatic.net/PR2j5.jpg
I have tried setting a new class with absolute positioning, but it didn't work as desired. The pagination links must remain within the loop.
<div class="row">
<?php
$paged = ( get_query_var( 'paged' ) ) ? absint( get_query_var( 'paged' ) ) : 1;
// WP_Query arguments
$args = array(
'post_type' => array( 'video' ),
'post_status' => array( 'publish' ),
'nopaging' => false,
'posts_per_page' => 3,
'paged' => $paged
);
// The Query
$video = new WP_Query( $args );
// The Loop
if ( $video->have_posts() ) {
while ( $video->have_posts() ) {
$video->the_post(); ?>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<figure class="snip1567">
<img src="<?php the_post_thumbnail_url(); ?>" class="img-responsive" alt="<?php the_title(); ?>" />
<figcaption>
<h3>Graphic Design</h3>
<p><?php the_title(); ?></p>
</figcaption>
<div class="hover"></div><i class="fa fa-play-circle-o"></i>
<a href="<?php the_permalink(); ?>"></a>
</figure>
</div>
<?php } ?>
<?php $big = 999999999; // need an unlikely integer
echo paginate_links( array(
'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
'format' => '?paged=%#%',
'current' => max( 1, get_query_var('paged') ),
'total' => $video->max_num_pages
) );
?>
<?php } else {
// no posts found
}
// Restore original Post Data
wp_reset_postdata();
?>
CSS
/*
* Custom Video Thumbnail Styles
*/
.snip1567 {
// CSS styles for video thumbnail
}
/*
* Pagination Link Styles
*/
.page-numbers {
// CSS styles for pagination links
}
HTML Output
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
// HTML output for video thumbnail
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
// HTML output for video thumbnail
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
// HTML output for video thumbnail
</div>
// Pagination links displayed here
</div>