// AJAX BLOG PAGE
add_action('wp_ajax_filter_posts', 'filter_posts_callback');
add_action('wp_ajax_nopriv_filter_posts', 'filter_posts_callback');
function filter_posts_callback() {
$category = isset($_POST['category']) ? sanitize_text_field($_POST['category']) : 'all';
$paged = isset($_POST['paged']) ? intval($_POST['paged']) : 1;
$args = array(
'post_type' => 'post',
'posts_per_page' => 10,
'paged' => $paged,
);
if ($category !== 'all') {
$args['tax_query'] = array(
array(
'taxonomy' => 'category',
'field' => 'slug',
'terms' => $category,
),
);
}
$query = new WP_Query($args);
ob_start();
if ($query->have_posts()) :
while ($query->have_posts()) : $query->the_post();
$category = get_the_category();
$brand_color = '';
$color_class = 'color-default';
$time_read = get_field('time_read');
if (!empty($category)) {
$category_id = $category[0]->term_id;
$brand_color = get_field('brand_color', 'category_' . $category_id);
if ($brand_color) {
$color_class = 'color-' . esc_attr($brand_color);
}
}
?>
<div class="post-card <?php echo esc_attr(strtolower(str_replace(' ', '-', get_the_category()[0]->name))); ?>">
<div class="post-header">
<img src="<?php the_post_thumbnail_url(); ?>" alt="<?php the_title(); ?>" class="post-feature-image">
</div>
<div class="post-info">
<div class="post-meta">
<?php if ($category || $time_read): ?>
<?php if ($category): ?>
<span class="category <?php echo esc_attr($color_class); ?>">
<?php echo esc_html($category[0]->name); ?>
</span>
<?php endif; ?>
<?php if ($time_read): ?>
<span class="time-read">
<?php if ($category); ?>
<?php echo esc_html($time_read); ?>
</span>
<?php endif; ?>
<?php endif; ?>
</div>
<h3><?php the_title(); ?></h3>
<div class="author-posted">
<div class="author-info">
<img src="<?php echo get_avatar_url(get_the_author_meta('ID')); ?>" alt="Author Avatar" class="author-avatar">
<span class="author-name"><?php the_author(); ?></span>
</div>
<div class="post-time">
<span>Last Update: <?php the_modified_date(); ?></span>
</div>
</div>
<a href="<?php the_permalink(); ?>" class="post-link">Learn More</a>
</div>
</div>
<?php
endwhile;
wp_reset_postdata();
else :
echo '<p>No posts found.</p>';
endif;
$posts_html = ob_get_clean();
$total_pages = $query->max_num_pages;
wp_send_json(array(
'posts' => $posts_html,
'total_pages' => $total_pages,
'current_page' => $paged,
));
wp_die();
}