Custom Page Pagination in wordpress - wordpress

I have placed below function in functions.php file
if ( ! function_exists( 'post_pagination' ) ) :
function post_pagination() {
global $wp_query;
$pager = 999999999; // need an unlikely integer
echo paginate_links( array(
'base' => str_replace( $pager, '%#%', esc_url( get_pagenum_link( $pager ) ) ),
'format' => '?paged=%#%',
'current' => max( 1, get_query_var('paged') ),
'total' => $wp_query->max_num_pages
) );
}
endif;
My current page includes this code which will give me pagination based on custom query i have created. I dont get around why query_posts() is not working.
<?php
//Template Name:dummy
?>
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
query_posts(array(
'post_type' => 'page',
'paged' => $paged,
'posts_per_page' => 3,
));
if (have_rows('portfolio_listing', 117)) { /* first group */
while (have_rows('portfolio_listing', 117)) {
the_row();
if (have_rows('all', 117)) { /* second group */
while (have_rows('all', 117)) {
the_row(); ?>
<div class="col-lg-4 col-md-6 mt-lg-5">
<a href="<?= the_sub_field('page_link'); ?>" class="portfolio-wrap">
<div class="portfolio-img">
<img src="<?= the_sub_field('portfolio_image'); ?>" alt="">
</div>
<div class="portfolio-content">
<h6><?= the_sub_field('title'); ?></h6>
<h2><?= the_sub_field('content'); ?></h2>
<div>
<button class="portfolio-btn"><?= the_sub_field('btn'); ?></button>
</div>
</div>
</a>
</div>
<?php }
post_pagination();
}
}
}
?>

Related

Pagination does not display WP Query

I can't seem to get my pagination working.
I have been through many similar questions on Stack Overflow and tried to modify it but nothing seems to work.
EDIT - I'm trying to get numbered pagination - I'm not even sure the
examples I have tried are numbered.
My code without any attempts is
<section id="blog-posts" class="latest-blog-posts full-width standard-padding">
<div class="full-width-inner">
<div class="the-posts">
<?php
// Define our WP Query Parameters
$the_query = new WP_Query( 'posts_per_page=9' ); ?>
<?php
// Start our WP Query
while ($the_query -> have_posts()) : $the_query -> the_post();
// Display the Post Title with Hyperlink
?>
<div class="post">
<div class="post-thumb">
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
<img src="<?php echo $image[0]; ?>" alt="" />
</div>
<h2 class="post-title-teaser"><?php the_title(); ?></h2>
<div class="post-date-preview"><p><?php echo get_the_date(); ?></p></div>
<div class="post-excerpt"><?php
the_excerpt(); ?></div>
<div class="elc-button post-button"><a class="read-on elc-button" aria-label="read more of the article about '<?php the_title(); ?>'" href="<?php the_permalink() ?>">Read More</a></div>
</div>
<?php
// Repeat the process and reset once it hits the limit
endwhile;
wp_reset_postdata();
?>
</div>
</div>
</section>
My latest attempts at adding pagination are
<section id="blog-posts" class="latest-blog-posts full-width standard-padding">
<div class="full-width-inner">
<div class="the-posts">
<?php
if ( ! function_exists( 'pagination' ) ) :
function pagination( $paged = '', $max_page = '' ) {
$big = 999999999; // need an unlikely integer
if( ! $paged ) {
$paged = get_query_var('paged');
}
if( ! $max_page ) {
global $wp_query;
$max_page = isset( $wp_query->max_num_pages ) ? $wp_query->max_num_pages : 1;
}
echo paginate_links( array(
'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
'format' => '?paged=%#%',
'current' => max( 1, $paged ),
'total' => $max_page,
'mid_size' => 1,
'prev_text' => __( '«' ),
'next_text' => __( '»' ),
'type' => 'list'
) );
}
endif;
?>
<?php
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
$args = array(
'post_status' => 'publish',
'orderby' => 'publish_date',
'order' => 'DESC',
'paged' => $paged,
'posts_per_page' => 12
);
$loop = new WP_Query( $args );
if ( $loop->have_posts() ) :
while ( $loop->have_posts() ) :
?>
<div class="post">
<div class="post-thumb">
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
<img src="<?php echo $image[0]; ?>" alt="" />
</div>
<h2 class="post-title-teaser"><?php the_title(); ?></h2>
<div class="post-date-preview"><p><?php echo get_the_date(); ?></p></div>
<div class="post-excerpt"><?php
the_excerpt(); ?></div>
<div class="elc-button post-button"><a class="read-on elc-button" aria-label="read more of the article about '<?php the_title(); ?>'" href="<?php the_permalink() ?>">Read More</a></div>
</div>
<?php
// Repeat the process and reset once it hits the limit
endwhile;
pagination( $paged, $loop->max_num_pages); // Pagination Function
endif;
wp_reset_postdata();
?>
</div>
</div>
</section>
The truth is I didn't know if the initial portion (the if function) should be part of the PHP template or in functions PHP but I tried both
I have also tried this
<div class="the-posts">
<?php
// WP_Query arguments
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
$args = array(
'post_status' => array( 'publish' ),
'nopaging' => false,
'posts_per_page' => '9',
'order' => 'DESC',
'orderby' => 'date',
'paged' => $paged
);
// The Query
$query = new WP_Query( $args );
// The Loop
if ( $query->have_posts() ) {
while ( $query->have_posts() ) { ?>
<div class="post">
<div class="post-thumb">
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
<img src="<?php echo $image[0]; ?>" alt="" />
</div>
<h2 class="post-title-teaser"><?php the_title(); ?></h2>
<div class="post-date-preview"><p><?php echo get_the_date(); ?></p></div>
<div class="post-excerpt"><?php
the_excerpt(); ?></div>
<div class="elc-button post-button"><a class="read-on elc-button" aria-label="read more of the article about '<?php the_title(); ?>'" href="<?php the_permalink() ?>">Read More</a></div>
</div>
<?php }
} else {
// no posts found
}
echo paginate_links( array(
'base' => str_replace( 999999999, '%#%', esc_url( get_pagenum_link( 999999999 ) ) ),
'total' => $query->max_num_pages,
'current' => max( 1, get_query_var( 'paged' ) ),
'format' => '?paged=%#%',
'show_all' => false,
'type' => 'plain',
) );
// Restore original Post Data
wp_reset_postdata();
?>
</div>
But the page won't load and eventually, I get a 503
This kind of thing isn't my forte so I tried all the examples but nothing seemed to work
Any help would be greatly appreciated
need to check the PHP error log details for help, also you can comments out the template part by part, to find out the error happen on which part exactly.
Okay so after trying for days, I actually got it working not long after posting this like so
<section id="blog-posts" class="latest-blog-posts full-width standard-padding">
<div class="full-width-inner">
<div class="the-posts">
<?php
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
$args = array(
'posts_per_page' => 6,
'paged' => $paged
);
$custom_query = new WP_Query( $args );
while($custom_query->have_posts()) :
$custom_query->the_post();
?>
<div class="post">
<div class="post-thumb">
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
<img src="<?php echo $image[0]; ?>" alt="" />
</div>
<h2 class="post-title-teaser"><?php the_title(); ?></h2>
<div class="post-date-preview"><p><?php echo get_the_date(); ?></p></div>
<div class="post-excerpt"><?php
the_excerpt(); ?></div>
<div class="elc-button post-button"><a class="read-on elc-button" aria-label="read more of the article about '<?php the_title(); ?>'" href="<?php the_permalink() ?>">Read More</a></div>
</div>
<?php endwhile; ?>
</div>
<?php if (function_exists("pagination")) {
pagination($custom_query->max_num_pages);
} ?>
</div>
</div>
</section>
Functions.php
// numbered pagination
function pagination($pages = '', $range = 4)
{
$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;
}
}
if(1 != $pages)
{
echo "<div class=\"pagination\">";
if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>« First</a>";
if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>‹ Previous</a>";
for ($i=1; $i <= $pages; $i++)
{
if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
{
echo ($paged == $i)? "<span class=\"current\">".$i."</span>":"".$i."";
}
}
if ($paged < $pages && $showitems < $pages) echo "Next ›";
if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>Last »</a>";
echo "</div>\n";
}
}
Thanks to this article
https://www.evan-herman.com/how-to-add-numeric-wordpress-pagination/#.Yxy4S-zML2I

How to define fallback image for get_the_post_thumbnail_url inside a shortcode

My shortcode is working fine but how to set a fallback image in there? Please suggestion
// display default post as a shortcode with prev/next link
function genericposts_shortcode($atts){
extract( shortcode_atts( array(
'expand' => '',
), $atts) );
global $paged;
$posts_per_page = 10;
$settings = array(
'showposts' => $posts_per_page,
'post_type' => 'post',
'orderby' => 'menu_order',
'order' => 'ASC',
'paged' => $paged
);
$post_query = new WP_Query( $settings );
$total_found_posts = $post_query->found_posts;
$total_page = ceil($total_found_posts / $posts_per_page);
$list = '<div class="bloglist">';
while($post_query->have_posts()) : $post_query->the_post();
$list .= '
<div class="bloglist__item">
<div class="bloglist__imgwrap">
<img src=" '. get_the_post_thumbnail_url(get_the_ID(),'full') .'">
</div>
<div class="bloglist__wrapt">
<div class="bloglist__datetitle">
<span class="bloglist__date"> '. get_the_date( 'd' ) . '</span>
<span class="bloglist__mnt"> '. get_the_date( 'M' ) . '</span>
<span class="bloglist__yr"> '. get_the_date( 'Y' ) . '</span>
<div class="bloglist__title"> '. get_the_title() .' </div>
</div>
<div class="bloglist__more">
Read More
</div>
</div>
</div>
';
endwhile;
$list.= '</div>';
if(function_exists('wp_pagenavi')) {
$list .='<div class="page-navigation">'.wp_pagenavi(array('query' => $post_query, 'echo' => false)).'</div>';
} else {
$list.='
<span class="prev-posts-links">'.get_previous_posts_link('Previous page').'</span>
<span class="next-posts-links">'.get_next_posts_link('Next page', $total_page).'</span>
';
}
return $list;
}
add_shortcode('post-shortcode', 'genericposts_shortcode');
I have solved the issue below way.
add_shortcode( 'post-shortcode', 'genericposts_shortcode' );
function genericposts_shortcode( $atts ) {
ob_start();
global $paged;
$posts_per_page = 9;
$settings = array(
'showposts' => $posts_per_page,
'post_type' => 'post',
'orderby' => 'menu_order',
'order' => 'ASC',
'paged' => $paged
);
$post_query = new WP_Query( $settings );
$total_found_posts = $post_query->found_posts;
$total_page = ceil($total_found_posts / $posts_per_page);
if ($post_query->have_posts() ) { ?>
<div class="bloglist">
<?php while ( $post_query->have_posts() ) : $post_query->the_post(); ?>
<div class="bloglist__item" id="post-<?php the_ID(); ?>">
<div class="bloglist__imgwrap">
<?php if( !empty(get_the_post_thumbnail()) ) { ?>
<?php the_post_thumbnail('full');?>
<?php } else { ?>
<img src="https://kanooelite.com/upgrade/wp-content/uploads/2020/11/placeholder.png" />
<?php } ?>
</div>
<div class="bloglist__wrapt">
<div class="bloglist__datetitle">
<span class="bloglist__date"> <?php echo get_the_date( 'd' ); ?></span>
<span class="bloglist__mnt"> <?php echo get_the_date( 'M' ); ?></span>
<span class="bloglist__yr"> <?php echo get_the_date( 'Y' ); ?></span>
<div class="bloglist__title"> <?php echo get_the_title(); ?></div>
</div>
<div class="bloglist__more">
Read More
</div>
</div>
</div>
<?php endwhile;
wp_reset_postdata(); ?>
</div>
<span class="prev-posts-links"><?php echo get_previous_posts_link('Previous page'); ?></span>
<span class="next-posts-links"><?php echo get_next_posts_link('Next page', $total_page); ?></span>
<?php $myvariable = ob_get_clean();
return $myvariable;
} ?>
<?php } ?>

Pagenation in single agent page not working wordpress

I have created a single agent page in that page i am trying to list all the property by the agent in that property area i have kept an bootstrap pagination that was not working it was showing the page numbers but when you click that was not taking to page1 or page 2 etc. But it was redirecting to the same page. Here is my code.
get_header();
<div class="container-fluid"><div class="row bkg-white bkg-pd-top">
<div class="container">
<?php if (have_posts()) :
while (have_posts()) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?> >
<div class="col-md-9"><div class="row">
<div class="single-details">
<div class="single-sec-prop-title">Agent Details</div>
<div class="single-prop-detail">
<div class="col-md-4 col-sm-4 col-xs-4"><div class="row"><div class="agent-single-image">
<?php the_post_thumbnail('small-img-featured', array('class' => 'img-responsive')); ?>
</div></div></div>
</div>
</div></div>
</div></div>
<div class="single-details">
<div class="single-sec-prop-title">Description</div>
<div class="single-prop-detail">
<?php the_content(); ?>
</div>
</div>
<div class="col-xs-12"><div class="row">
<div class="single-sec-prop-title agent-single-title">Listed Properties</div>
<?php
endwhile;
endif;
if (get_query_var('paged')) {
$paged = get_query_var('paged');
} elseif (get_query_var('page')) {
$paged = get_query_var('page');
} else {
$paged = 1;
}
$args = array(
'post_type' => array('forsale', 'forrent'),
'numberposts' => -1,
'posts_per_page' => 10,
'post_status' => 'publish',
'paged' => $paged, //very important
'meta_key' => 'select-agent',
'meta_value' => get_the_id(),
);
$custom_query = new WP_Query($args);
if ($custom_query->have_posts()) :
while ($custom_query->have_posts()) : $custom_query->the_post();
get_template_part( 'template-parts/property', 'agent' );
endwhile; ?>
<?php
if ($custom_query->max_num_pages > 1) :
$orig_query = $wp_query;
$wp_query = $custom_query;
?><nav class="prev-next-posts">
<?php
if (function_exists('wp_bootstrap_pagination')){
wp_bootstrap_pagination();
}
?>
</nav>
<?php endif;
wp_reset_postdata();
else:
get_template_part( 'template-parts/no', 'post' );
endif; //ends loop
?>
<?php
get_footer();
Here is the link for bootstrap pagenation code Bootstrap pagenatio
Here is a answer for your question. If you need to add an pagenation to your single page for example your single agent page you need to set a template redirect function in wordpress for that you need to add the following code to your active themes function.php In this code please change the agent to your custom post type if your custom post is not agent.
add_filter('redirect_canonical','redirect_single_page');
function redirect_single_page($redirect_url) {
if (is_singular('agent')) $redirect_url = false; // change 'agent' to your custom post type, obviously
return $redirect_url;
}
you can try this with wordpress.
<?php
get_header(); ?>
<div class="container-fluid"><div class="row bkg-white bkg-pd-top">
<div class="container">
<?php if (have_posts()) :
while (have_posts()) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?> >
<div class="col-md-9"><div class="row">
<div class="single-details">
<div class="single-sec-prop-title">Agent Details</div>
<div class="single-prop-detail">
<div class="col-md-4 col-sm-4 col-xs-4"><div class="row"><div class="agent-single-image">
<?php the_post_thumbnail('small-img-featured', array('class' => 'img-responsive')); ?>
</div></div></div>
</div>
</div></div>
</div></div>
<div class="single-details">
<div class="single-sec-prop-title">Description</div>
<div class="single-prop-detail">
<?php the_content(); ?>
</div>
</div>
<div class="col-xs-12"><div class="row">
<div class="single-sec-prop-title agent-single-title">Listed Properties</div>
<?php
endwhile;
endif;
if (get_query_var('paged')) {
$paged = get_query_var('paged');
} elseif (get_query_var('page')) {
$paged = get_query_var('page');
} else {
$paged = 1;
}
$args = array(
'post_type' => array('forsale', 'forrent'),
'numberposts' => -1,
'posts_per_page' => 10,
'post_status' => 'publish',
'paged' => $paged, //very important
'meta_key' => 'select-agent',
'meta_value' => get_the_id(),
);
$custom_query = new WP_Query($args);
if ($custom_query->have_posts()) :
while ($custom_query->have_posts()) : $custom_query->the_post();
get_template_part( 'template-parts/property', 'agent' );
endwhile;
customPagination($paged,$custom_query);
endif;
wp_reset_postdata();
else:
get_template_part( 'template-parts/no', 'post' );
endif; //ends loop
?>
<?php
get_footer();
?>
<?php
function customPagination($paged,$probj){
$data = '';
$data .='<nav aria-label="Page navigation example">';
$pager = 999999999;
$pargs = array(
'base' => str_replace( $pager, '%#%', esc_url( get_pagenum_link( $pager ) ) ),
'format' => '?paged=%#%',
'current' => max( 1, $paged ),
'total' => $probj->max_num_pages,
'prev_next'=> false,
'type'=> 'array'
);
$links = paginate_links( $pargs );
if ( $links ) :
$data .= '<ul class="pagination justify-content-center">';
// get_previous_posts_link will return a string or void if no link is set.
if ( $prev_posts_link = get_previous_posts_link( __( 'Previous Page' ) ) ) :
$data .= '<li class="prev-list-item">';
$data .= $prev_posts_link;
$data .= '</li>';
endif;
$data .= '<li class="page-item">';
$data .= join( '</li><li class="page-item">', $links );
$data .= '</li>';
// get_next_posts_link will return a string or void if no link is set.
if ( $next_posts_link = get_next_posts_link( __( 'Next Page' ) ) ) :
$data .= '<li class="next-list-item">';
$data .= $next_posts_link;
$data .= '</li>';
endif;
$data .= '</ul>';
endif;
$data .='</nav>';
echo $data;
}
?>
I have added one function at your code please refere this.

WordPress pagination not working on custom post types and taxonomy terms

Trying to paginate custom post types by custom taxonomy terms and default posts by category but it does not working. I'm novice to WordPress, I did lots of googling and didn't find a detailed solution to solve my issue.
If anyone knows please share your answer, it's really appreciated.
Note: I created a custom theme.
Here is my taxonomy-product_category.php page code:
<?php get_header();?>
<div class="container-fluid pages">
<div class="container" style="margin-top: 10%;">
<div class="row">
<div class="col-sm-8">
<div class="panel panel-default">
<?php $term = get_queried_object();
$taxonomy = get_taxonomy($term->taxonomy);
?>
<div class="panel-heading"><h4><?php echo 'محصولات : '.$term- >name;?></h4></div>
<div class="panel-body">
<?php
$paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
$args = array('post_type'=>'my_product',
'taxonomy'=>$taxonomy->name,
'posts_per_page'=> 1,
'term'=>$term->slug,
'paged'=>$paged);
$query = new WP_Query($args);
if ($query->have_posts()) {
while ($query->have_posts()): $query->the_post(); ?>
<div class="thumbnail">
<?php if (has_post_thumbnail()) {
the_post_thumbnail('featured');
} ?>
<div class="caption caption-content">
<h3 class="product-name"><?php the_title(); ?></h3>
<p class="text-muted">
<!-- <strong>نویسنده:</strong> <?php //the_author();?> -->
تاریخ: <?php the_date(); ?> </p>
<p> <?php the_excerpt(); ?> </p>
<div>
<p class="price-box">
<i class="fa fa- circle"> </i>قیمت:
<?php if (the_field('price') == '') {
// echo "00.00";
} else {
the_field('price');
} ?>
</p>
</div>
</div>
<hr>
</div>
<?php endwhile;
}
else {
echo '<h3>هیچ موردی درین بخش یافت نشد.</h3>';
}
?>
<!-- pagination here -->
<p>
<nav>
<?php if ( function_exists( 'custom_pagination' ) ) {
custom_pagination($custom_query- >max_num_pages,"", $paged);
} ?>
</nav>
<?php wp_reset_postdata(); ?>
</p>
</div>
</div>
</div>
<?php get_sidebar(); ?>
</div>
</div>
</div>
<?php get_footer();?>
When I click on next page it redirects me to index page where the url is still:
http://localhost/goldsotre/product_category/ring/page/2/
Custom_pagination function:
function custom_pagination($numpages = '', $pagerange = '', $paged='') {
if (empty($pagerange)) {
$pagerange = 2;
}
global $paged;
if (empty($paged)) {
$paged = 1;
}
if ($numpages == '') {
global $wp_query;
$numpages = $wp_query->max_num_pages;
if(!$numpages) {
$numpages = 1;
}
}
$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>";
}
Chance is posts_per_page got overridden by Blog pages show at most value.
I assume you're using the paginate_link() function, try this in functions.php:
add_action('pre_get_posts', function($query)
{
if ($query->is_tax('product_category')) {
$query->set('posts_per_page', 1);
}
});
Make sure product_category is the taxonomy of the archive page. This article maybe helpful for you.
If I use below function instead of that I can see the pagination links but not working, when clicking on the next link, I get 404 page.
$big = 999999999;
echo paginate_links( array(
'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
'format' => '?paged=%#%',
'current' => max( 1, get_query_var('paged') ),
'total' => $query->max_num_pages ) );

Bootstrap acf wp pagination with get_posts

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>
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);
}
?>

Resources