Hello Guys, I am a Newbie Front End Designer and I am not really good in Ajax but I'm working on how to limit the posts to 6 and put a load more button inside the loop with a filter category. I put my code inside the category.php which is the standard template for categories. Here's the code of category filter and its loop inside category.php
<ul class="categories-filters">
<?php
if (is_category()) {
$cat = get_query_var('cat');
$this_category = get_category($cat);
$this_category = wp_list_categories('hide_empty=0&hierarchical=false&order=ASC&orderby=title&show_count=0&title_li=&use_desc_for_title=1&child_of='.$this_category->cat_ID."&echo=0");
if($this_category !='<li>No categories</li>') {
echo '<ul class="ul-menu">'.$this_category.'</ul>';
}
}
?>
</ul>
<div class="content">
<?php
if(have_posts() ) { ?>
<div id="main-content">
<div id="inside">
<?php $i = 0; ?>
<?php while (have_posts()) : the_post();
if($i % 3 == 0) { ?>
<div class="row ng-row">
<?php } ?>
<div class="col-md-4 col-sm-12 col-xs-12 half">
<a href="<?php the_permalink();?>">
<div class="img-holder">
<?phpif ( has_post_thumbnail() ) {
the_post_thumbnail(); }
else {
echo '<img src="' . get_bloginfo( 'stylesheet_directory' )
. '/assets/img/thumbnail-default-rev.jpg" />';
}
?>
<h2 class="project-title"><?php the_title() ?></h2>
<small>see more ></small>
</div>
</a>
</div>
<?php $i++;
if($i != 0 && $i % 3 == 0) { ?>
</div><!--/.row-->
<div class="clearfix"></div>
<?php } ?>
<?php endwhile; }
wp_reset_query(); ?>
</div>
</div>
</div>
and my ajax code for category filter inside category.php
function cat_ajax_get(catID) {
jQuery("a.ajax").removeClass("current");
jQuery("a.ajax").addClass("current"); //adds class current to the category menu item being displayed so you can style it with css
jQuery("#loading-animation").show();
var ajaxurl = '<?php echo admin_url( 'admin-ajax.php' ); //must echo it ?>';
jQuery.ajax({
type: 'POST',
url: ajaxurl,
data: {"action": "load-filter", cat: catID },
success: function(response) {
jQuery("#category-post-content").html(response);
jQuery("#loading-animation").hide();
return false;
}
});
}
I tried to find a solution over the internet but unluckily no suits for my code. I tried also to create an argument like post_per_page but it breaks my category filter and post the posts randomly not but categorized. I hope someone helps me. I will appreciate any helps thank you :)