This is simple way to make a AJAX filter menu to your  index page or you can use it to display sub terms in category template. Javascript is same in both, but you need to make bit alteration on your template PHP.

Let’s start by making a loop. Notice that ID:s inside and main-content are important since they are called at JavaScript. If you change them. Remember to change them to JS too. Others you can chage way you like.

<!--LOOP  -->
     <?php if ( have_posts() ) :?>
      <div id="main-content" class="row">
        <div id="inside">
          <div class="container">

      <?php while ( have_posts() ) : the_post(); ?>

         <article>
    <a class="xiong-articlebox" href="<?php the_permalink();?>">
        <header>
            <h3><?php the_title( );?></h3>
            <p><em><?php the_date( 'j.n.Y'); ?> </em></p>
           
            </header>
             <p><?php the_excerpt();?></p>
           </a>
       </article>

      <?php endwhile; endif; ?>


    </div><!-- container-->  
  </div><!--inside -->                   
</div>  <!--row -->

This is how we make the category list. This version is for index.php template

  <ul class="xiong-filters">
  
      <?php 
          $args= array(  
            'show_option_all'   =>   'All posts', //Text for button All
            'title_li'          => __('')
          );
        wp_list_categories( $args );
      ?>
  </ul>

This version of category list is for category.php template when you want to display children of your category.

  <ul class="xiong-filters">
    <?php 
          //This one is to display All in your category.
          // Do not use show_option_all parameter since it includes all categories not just one your displaying
          $args= array(  
            'include'          =>   2, //Put here ID of your category
            'title_li'          => __('')
          );
        wp_list_categories( $args );
      ?>
      <?php 
          //This one displays subcategories of your category
          $args= array(  
            'child_of'          =>   2, //Put here parent category
            'title_li'          => __('')
          );
        wp_list_categories( $args );
      ?>
  </ul>

After you add either of these category choise works, but it loads new page every time. To fix that we need to add some JavaScript.

Here’s the JavaScript part. Remember that this is depended on jQuery. jQuery is included in WordPress, but you need to tell dependency when you enqueue the script on functions.php. Save this javascipt to your theme js folder. I name mine ajax.js.

//AJAX Filters

jQuery(function(){
	var mainContent = jQuery('#main-content'),
		cat_links = jQuery('ul.xiong-filters li a');

		cat_links.on('click', function(e){

			e.preventDefault();
			el = $(this);
			var value = $el.attr("href");
			mainContent.animate({opacity:"0.5"});
			mainContent.load(value + " #inside", function(){
				mainContent.animate({opacity:"1"});
			});
			jQuery( "li" ).removeClass( "current-cat" );
			 jQuery(this).closest('li').addClass("current-cat");
		});
});

Enqueue your script at functions.php like this.

//ENQUEUE SCRIPTS HERE
function xiong_theme_scripts() {

        //Ajax filter scripts     
        wp_register_script( 'ajax', get_template_directory_uri() . '/js/ajax.js', array( 'jquery' ), '1.0.0', true );
        wp_enqueue_script( 'ajax' );


        }
add_action( 'wp_enqueue_scripts', 'xiong_theme_scripts' );

Here’s some styles to use with filters. This is a CSS version.

.xiong-filters{
	padding: 0
        }

	xiong-filters li { 
		display: inline-block
		padding: 0px 20px
		background: #000
		color: #fff
		height: 40px
		line-height: 40px
		margin-bottom: 5px
                }
		xiong-filters li a {
			color: white
			height: 40px
			display: block
                        }
	xiong-filters .current-cat {
		background: #666
                }

Here are about the same styles with SaSS syntax. I allways recommend to use SaSS instead of CSS or SCSS, because it’s a better syntax. It saves time, makes styles more modular and is easier to read.  In real life put variables in separate variables.sass file and import that to beginning of all of your sass files. To use SaSS you need a CSS preprocessor like Koala.

$brand1: #f79122
$brand2: #27a7e0
$white: #fff
$menufont: 'Arial', sans-serif

.xiong-filters
	padding: 0
	font-family: $menufont
	li 
		display: inline-block
		padding: 0px 20px
		background: $brand2
		color: $white
		height: 40px
		line-height: 40px
		margin-bottom: 5px
		a
			color: white
			height: 40px
			display: block
	.current-cat
		background: $brand1