// THE HTML/PHP
// Categories Nav START
<? $terms = get_terms( array(
'taxonomy' => 'category-name', // <-- update this
'orderby' => 'ID',
));
if ( $terms && !is_wp_error( $terms ) ){ ?>
<ul class="CHANGEME-categories-nav">
<? foreach( $terms as $term ) { ?>
<li id="cat-<?php echo $term->term_id; ?>">
<a href="#" class="<?= $term->slug; ?> ajax" data-term-number="<?= $term->term_id; ?>" title="<?= $term->name;?>"><?= $term->name; ?></a>
</li>
<? } ?>
</ul>
<? } ?>
// Categories Nav END
// Results Container START
<div id="CHANGEME-results-container" class="CHANGEME-filter-result">
<? // post query
$query = new WP_Query( array(
'post_type' => 'post-name', // <-- update this
'posts_per_page' => -1,
) );
if( $query->have_posts() ): while( $query->have_posts()): $query->the_post(); ?>
// POST TEMPLATE HERE
<? endwhile; endif; wp_reset_query(); ?>
</div>
// Results Container END
// The onpage JS for the page template
<script>
(function($) {
'use strict';
function cat_ajax_get(catID) {
jQuery.ajax({
type: 'POST',
url: raindrop_localize.ajaxurl,
data: {"action": "filter", cat: catID },
success: function(response) {
jQuery("#CHANGEME-results-container").html(response);
return false;
}
});
}
$( ".CHANGEME-categories-nav a.ajax" ).click(function(e) {
e.preventDefault();
$("a.ajax").removeClass("current");
$(this).addClass("current"); //adds class current to the category menu item being displayed so you can style it with css
var catnumber = $(this).attr('data-term-number');
cat_ajax_get(catnumber);
});
})(jQuery);
</script>
// Callback function for functions.php or some other functions specific php file like theme.php
// Aside from the inital add actions and a few other things, the actual query and post template should be the same as what is on the page.
add_action( 'wp_ajax_nopriv_filter', 'CHANGEME_cat_posts' );
add_action( 'wp_ajax_filter', 'CHANGEME_cat_posts' );
function CHANGEME_cat_posts () {
$cat_id = $_POST[ 'cat' ];
$args = array (
'tax_query' => array(
array(
'taxonomy' => 'category-name', // <-- update this
'field' => 'term_id',
'terms' => array( $cat_id )
)
),
'post_type' => 'post-name', // <-- update this
'posts_per_page' => -1,
);
global $post;
$posts = get_posts( $args );
ob_start ();
foreach ( $posts as $post ) {
setup_postdata($post); ?>
// POST TEMPLATE HERE
<?php } wp_reset_postdata();
$response = ob_get_contents();
ob_end_clean();
echo $response;
die(1);
}
Comments