Фильтры сообщений Ajax не дают результатов

Question

Я пытался создать фильтры категорий AJAX, но не могу заставить работать код.Я следовал этим инструкциям: http://juha.blog/dev/wordpress/ajax-filters-for-wordpress-categories/

Редактировать : поэтому я исправил скрипт, заменив $ (this) на jquery (this), но теперь, когда я нажимаю на фильтры, всестатьи исчезают и снова появляются, когда я нажимаю (все статьи ".

Так в моем шаблоне:

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

<!-- 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 -->

В моей функции .php

//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' );

В моем 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 = jquery(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");
        });
});

Я не знаю, как это исправить, потому что я совсем не знаю js, поэтому большое спасибо заранее!