File: /var/www/stg-everycred.com/wp-content/themes/everycred/templates/page-blog-listing.php
<?php
/* Template name: Blog Listing*/
get_header();
?>
<!-- filter section -->
<section class="filter-section">
<div class="container">
<?php
$tags = get_terms(array(
'taxonomy' => 'post_tag',
'hide_empty' => false,
));
if (!empty($tags) && !is_wp_error($tags)) : ?>
<div class="my-5">
<?php endif; ?>
<?php
$blog_query = new WP_Query(array(
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => 3,
'order' => 'DESC',
));
// Store the IDs of the first 3 posts to exclude them later
$excluded_ids = array();
?>
<div class="row pt-5 tag_data">
<?php
$i = 1;
while ($blog_query->have_posts()) :
$blog_query->the_post();
$excluded_ids[] = get_the_ID(); // collect IDs to exclude
$title = get_the_title();
$content = get_the_excerpt();
$blog_img = get_the_post_thumbnail_url($post->ID);
$date = get_the_date('d M, Y', $post->ID);
$permalink = get_permalink();
$arrow_img = get_template_directory_uri() . '/assets/images/upper-right-arrow.svg';
?>
<?php if ($i == 1) : ?>
<div class="col-12 col-lg-6">
<div class="refine-blog-img-left overflow-hidden h-100">
<a href="<?php echo $permalink; ?>" class="h-100 d-block">
<img src="<?php echo $blog_img; ?>" alt="img" width="100%" height="100%" />
</a>
</div>
<?php endif; ?>
<?php if ($i == 2) : ?>
<div class="col-12 col-lg-6 mt-3 mt-lg-0 d-block d-md-flex d-lg-block gap-3 gap-lg-0">
<?php endif; ?>
<?php if ($i == 2 || $i == 3) : ?>
<div class="blog-box d-flex gap-4 <?php echo ($i == 3) ? 'mt-4 mt-md-0 mt-lg-4' : 'mt-4 mt-md-0'; ?>">
<div class="img-box overflow-hidden">
<a href="<?php echo $permalink; ?>" class="h-100 d-block">
<img src="<?php echo $blog_img; ?>" alt="img" width="100%" height="100%" />
</a>
</div>
<div class="blog-img-content">
<?php endif; ?>
<div class="font-14 text-blue my-2"><?php echo $date; ?></div>
<div class="font-20 text-black text-semi blog-box-title">
<a href="<?php echo $permalink; ?>"><?php echo $title; ?></a>
<a href="<?php echo $permalink; ?>">
<img src="<?php echo $arrow_img; ?>" alt="arrow" class="ms-auto" />
</a>
</div>
<div class="font-16 text-black mt-2 mb-3 <?php echo ($i == 2 || $i == 3) ? 'blog-box-content' : ''; ?>">
<?php echo $content; ?>
</div>
<?php if ($i == 2 || $i == 3) : ?>
</div><!-- /.blog-img-content -->
</div><!-- /.blog-box -->
<?php endif; ?>
<?php if ($i == 1) : ?>
</div><!-- /.col (post 1) -->
<?php endif; ?>
<?php if ($i == 3) : ?>
</div><!-- /.col (posts 2-3) -->
<?php endif; ?>
<?php
$i++;
endwhile;
wp_reset_postdata();
?>
</div><!-- /.row -->
</div><!-- /.container -->
</section>
<!-- blog post -->
<?php
$posts_per_page = 12;
$all_posts_query = new WP_Query(array(
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => $posts_per_page,
'order' => 'DESC',
'post__not_in' => $excluded_ids, // exclude first 3 mosaic posts
));
$total_posts = $all_posts_query->found_posts;
$total_pages = ceil($total_posts / $posts_per_page);
if ($all_posts_query->have_posts()) : ?>
<section class="blog-post py-120 pt-5">
<div class="container">
<div class="font-16 text-bold text-black text-uppercase">ALL BLOG POSTS</div>
<div class="row" id="blog-cards-wrapper">
<?php while ($all_posts_query->have_posts()) : $all_posts_query->the_post(); ?>
<?php
$title = get_the_title();
$content = get_the_excerpt();
$blog_img = get_the_post_thumbnail_url($post->ID);
$date = get_the_date('d M, Y', $post->ID);
$blog_read_time = get_field('blog_read_time', $post->ID);
?>
<div class="col-12 col-md-6 d-flex align-items-stretch mb-4">
<div class="w-100">
<div class="blog-card d-flex flex-column mt-4 h-100">
<a href="<?php the_permalink(); ?>" class="blog-post-img overflow-hidden position-relative">
<img src="<?php echo $blog_img; ?>" title="<?php echo $title; ?>" alt="<?php echo $title; ?>" width="100%" height="100%" />
<div class="blog-info d-flex align-items-center">
<div class="d-flex justify-content-between w-100 text-white">
<div>
<div class="font-14"><?php echo $date; ?></div>
</div>
<div class="font-14 text-semi">
<?php
$categories = get_the_category($post->ID);
if ($categories) {
foreach ($categories as $category) {
echo esc_html($category->name) . ' ';
}
}
?>
</div>
</div>
</div>
</a>
<div class="font-20 text-semi text-black my-3">
<a href="<?php echo get_permalink(); ?>"><?php echo $title; ?></a>
</div>
<div class="blog-content">
<?php echo $content; ?>
</div>
<div class="d-flex justify-content-between mt-auto">
<a href="<?php the_permalink(); ?>" class="font-16 text-medium text-blue">
Read post
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/upper-right-arrow-blue.svg" alt="arrow" />
</a>
<div class="font-16 text-black">
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/clock-black.svg" alt="clock" />
<?php display_reading_time(); ?>
</div>
</div>
</div>
</div>
</div>
<?php endwhile;
wp_reset_postdata(); ?>
</div><!-- /.row -->
<!-- Load More Button -->
<?php if ($total_pages > 1) : ?>
<div class="text-center mt-4" id="load-more-wrapper">
<button
id="load-more-btn"
class="mt-4 px-4 font-16 text-medium talk-btn black-btn d-flex align-items-center justify-content-center mx-auto"
data-page="1"
data-max-pages="<?php echo $total_pages; ?>"
data-exclude="<?php echo implode(',', $excluded_ids); ?>"
data-per-page="<?php echo $posts_per_page; ?>">
Load More
</button>
</div>
<?php endif; ?>
</div>
</section>
<?php endif; ?>
<!-- business message -->
<?php
$cta_image = get_field('cta_image');
$cta_description = get_field('cta_description');
$button_url = get_field('button_url');
?>
<section class="business-msg bg-dark-blue position-relative pt-5">
<div class="container">
<div class="d-flex align-items-center flex-wrap pb-5 pb-lg-0">
<?php if ($cta_image) : ?>
<img src="<?php echo $cta_image['url']; ?>" alt="<?php echo $cta_image['alt']; ?>" title="<?php echo $cta_image['title']; ?>" class="business-man-img" />
<?php endif; ?>
<div class="business-detail mt-4 mt-lg-0">
<?php if ($cta_description) : ?>
<div class="font-20"><?php echo $cta_description; ?></div>
<?php endif; ?>
<?php if ($button_url) : ?>
<a href="<?php echo $button_url['url']; ?>" class="d-flex align-items-center justify-content-center msg-btn mt-4 text-white">
<?php echo $button_url['title']; ?>
</a>
<?php endif; ?>
</div>
</div>
</div>
<div class="round-pattern w-100 position-absolute start-0">
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/round-pattern-small.svg" alt="pattern" width="100%" />
</div>
</section>
<script>
(function() {
const loadMoreBtn = document.getElementById('load-more-btn');
if (loadMoreBtn) {
loadMoreBtn.addEventListener('click', function() {
const btn = this;
const currentPage = parseInt(btn.getAttribute('data-page'));
const maxPages = parseInt(btn.getAttribute('data-max-pages'));
const exclude = btn.getAttribute('data-exclude');
const perPage = btn.getAttribute('data-per-page');
const nextPage = currentPage + 1;
btn.textContent = 'Loading...';
btn.disabled = true;
fetch(`<?php echo admin_url('admin-ajax.php'); ?>`, {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: new URLSearchParams({
action: 'load_more_blogs',
page: nextPage,
exclude: exclude,
per_page: perPage,
nonce: '<?php echo wp_create_nonce("load_more_blogs_nonce"); ?>'
})
})
.then(res => res.json())
.then(data => {
if (data.success && data.data.html) {
document.getElementById('blog-cards-wrapper').insertAdjacentHTML('beforeend', data.data.html);
btn.setAttribute('data-page', nextPage);
if (nextPage >= maxPages) {
document.getElementById('load-more-wrapper').style.display = 'none';
} else {
btn.textContent = 'Load More';
btn.disabled = false;
}
} else {
document.getElementById('load-more-wrapper').style.display = 'none';
}
})
.catch(() => {
btn.textContent = 'Load More';
btn.disabled = false;
});
});
}
})();
</script>
<?php get_footer(); ?>