function blog_list_shortcode($atts) {
ob_start();
$atts = shortcode_atts(array(), $atts);
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$posts_per_page = get_option('posts_per_page');
$cat = isset($_GET['cat'])?$_GET['cat']:'';
$args = array(
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => $posts_per_page,
'paged' => $paged,
);
$tax_query = [];
if (!empty($cat)) {
$tax_query[] = [
'taxonomy' => 'category',
'field' => 'slug',
'terms' => [$cat],
];
}
if (!empty($tax_query)) {
$args['tax_query'] = $tax_query;
}
$query = new WP_Query($args);
if ($query->have_posts()) {
?>
<form method="GET" action="" class="frmFilterPost">
<input type="hidden" value="" name="cat" class="category_val" />
<?php
$category = get_terms([
'taxonomy' => 'category',
'hide_empty' => true,
]);
if(!empty($category)):
$column_item = ceil(count($category) / 4);
$total = count($category);
?>
<div class="rst-box-filter">
<div class="rst-box-filter-list deskop">
<div class="rst-box-filter-list-all">
<a class="rst-box-filter-item <?php echo $cat ? '' : 'active' ?>" data-slug="" >All<span class="count">(<?php echo $query->found_posts; ?>)</span></a>
</div>
<div>
<?php
$i = 0;
foreach ($category as $key => $value){
$i++;
$class="";
if(!empty($cat) && $cat == $value->slug){
$class="active";
}
?>
<a class="rst-box-filter-item <?php echo $class; ?>" data-slug="<?php echo $value->slug ?>" ><?php echo $value->name ?><span class="count">(<?php echo $value->count ?>)</span></a>
<?php
if($i%$column_item == 0 && $i != $total ){
echo '</div><div>';
}
}
?>
</div>
</div>
<div class="rst-box-filter-list mobile">
<div class="rst-box-filter-list-all">
<a class="rst-box-filter-item <?php echo $cat ? '' : 'active' ?>" data-slug="" >All<span class="count">(<?php echo $query->found_posts; ?>)</span></a>
</div>
<?php
foreach ($category as $key => $value){
$class="";
if(!empty($cat) && $cat == $value->slug){
$class="active";
}
?>
<div>
<a class="rst-box-filter-item <?php echo $class; ?>" data-slug="<?php echo $value->slug ?>" ><?php echo $value->name ?><span class="count">(<?php echo $value->count ?>)</span></a>
</div>
<?php
}
?>
</div>
</div>
<?php endif; ?>
</form>
<div class="rst-blog-lists-container-ajax">
<div class="rst-blog-lists-container">
<div class="rst-blog-lists">
<?php
while ($query->have_posts()) {
$query->the_post();
$post_id = get_the_ID();
$permalink = get_permalink();
$title = get_the_title();
$excerpt = wp_trim_words(get_the_excerpt(), 22, '...');
$thumbnail = get_the_post_thumbnail_url($post_id, 'full');
$post_date = get_the_date();
?>
<div class="blog-item">
<a href="<?php echo esc_url($permalink); ?>"></a>
<span class="icon-more">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.25 7.25C15.6562 7.25 16 7.59375 16 8C16 8.4375 15.6562 8.75 15.25 8.75H8.75V15.25C8.75 15.6875 8.40625 16 8 16C7.5625 16 7.25 15.6875 7.25 15.25V8.75H0.75C0.3125 8.75 0 8.4375 0 8C0 7.59375 0.3125 7.25 0.75 7.25H7.25V0.75C7.25 0.34375 7.5625 0 8 0C8.40625 0 8.75 0.34375 8.75 0.75V7.25H15.25Z" fill="#0A5660"/>
</svg>
</span>
<?php if($thumbnail):?>
<div class="rst-blog-post-image">
<img src="<?php echo esc_url($thumbnail); ?>" alt="<?php echo esc_attr($title); ?>">
</div>
<?php endif;?>
<div class="rst-blog-post-content">
<div class="rst-blog-post-content-top">
<h3><?php echo esc_html($title); ?></h3>
<p><?php echo get_the_excerpt(); ?></p>
</div>
<div class="rst-blog-post-meta">
<span class="rst-post-date"><?php echo get_the_date(); ?></span><span class="rst-space"></span><span class="rst-post-author">by <a href="<?php echo get_author_posts_url( get_post_field('post_author', $post_id) ); ?>" class="meta-author"><?php the_author()?></a></span>
</div>
</div>
</div>
<?php
}
?>
</div>
<?php
echo rst_the_posts_navigation($query);
?>
</div>
</div>
<?php
} else {
echo '<p>No posts found.</p>';
}
wp_reset_postdata();
?>
<script type="text/javascript">
(function($){
$('.rst-box-filter-item').click(function(){
var value = $(this).attr('data-slug');
$('.rst-box-filter-item').removeClass('active');
$(this).addClass('active');
$('.category_val').val(value);
$('.frmFilterPost').submit();
return false;
});
function customAjaxSend(form,fullUrl){
$.ajax({
url: fullUrl,
method: form.attr('method'),
data: form.serialize(),
dataType: 'html',
beforeSend: function () {
$('.rst-blog-lists-container').addClass('loading')
},
success: function(response) {
const html = $(response);
const items = html.find('.rst-blog-lists-container');
$('.rst-blog-lists-container-ajax').html(items);
$('.rst-blog-lists-container').removeClass('loading')
},
error: function(jqXHR, textStatus, errorThrown) {
console.log('Error submitting form');
console.log(textStatus, errorThrown);
}
});
}
$('.frmFilterPost').on('submit', function(e) {
e.preventDefault();
var form = $(this);
var url = form.attr('action');
var fullUrl = url + '?' + form.serialize();
var link_page = $('.link_page').val();
//history.pushState({}, '', link_page);
let currentUrl = window.location.href;
let newUrl = currentUrl.replace(/page\/\d+\//, '');
customAjaxSend(form, newUrl);
});
$('body').on('click','#tf-pagination a',function(e){
e.preventDefault();
var form = $('.frmFilterPost');
var fullUrl = $(this).attr('href');
$('html, body').animate({
scrollTop: $(".rst-blog-lists").offset().top - 300
}, 1000);
customAjaxSend(form, fullUrl);
})
})(jQuery);
</script>
<?php
return ob_get_clean();
}
add_shortcode('blog_list', 'blog_list_shortcode');