Фильтруйте div, используя их класс в Wordpress

Question

Я хотел бы перенести этот фильтр на мою страницу Wordpress.Проблема в том, что когда я это делаю, это не работает.Я пытался создать новую страницу и вставить это:

<style>
li {width:50%;display:inline;}
img{max-width:100%;}
.prod{width:25%;display:inline-block;}
</style>

<script>
$(document).ready(function() {
    var allSelectedClasses;
    allSelectedClasses = '';
    $('input[type="checkbox"]').click(function(){
        //ensure the correct classes are added to the running list
        if(this.checked){
            allSelectedClasses += '.' + $(this).val();
        }else{
            allSelectedClasses = allSelectedClasses.replace($(this).val(), '');
        }        
        //format the list of classes
        allSelectedClasses = allSelectedClasses.replace(' ', '');
        allSelectedClasses = allSelectedClasses.replace('..', '.');
        var selectedClasses;
        var allSelected;
        allSelected = '';

        //format these for the jquery selector
        selectedClasses = allSelectedClasses.split(".");
        for(var i=0;i < selectedClasses.length;i++){
            var item = selectedClasses[i];
            if(item.length > 0){
                if(allSelected.length == 0){
                    allSelected += '.' + item;
                }else{
                    allSelected += ', .' + item;
                }
            }
        }
        //show all divs by default
        $("div").show();
        //hide the necessary ones, include the 2 top level divs to prevent them hiding as well
        if(allSelected.length > 0){
            $("div:not(.filterList, .prodGrid, " + allSelected + ")").hide();
        }
    });
});
</script>

<div class="filterList">
            <h4>Colour</h4>
            <ul>
                <li><input type="checkbox" name="colour" value="blue">&nbsp;Blue</li>
                <li><input type="checkbox" name="colour" value="grey">&nbsp;Grey</li>
                <li><input type="checkbox" name="colour" value="green">&nbsp;Green</li>
                <li><input type="checkbox" name="colour" value="black">&nbsp;Black</li>
                <li><input type="checkbox" name="colour" value="pink">&nbsp;Pink</li>
                <li><input type="checkbox" name="colour" value="purple">&nbsp;Purple</li>
                <li><input type="checkbox" name="colour" value="brown">&nbsp;Brown</li>
                <li><input type="checkbox" name="colour" value="teal">&nbsp;Teal</li>
                <li><input type="checkbox" name="colour" value="yellow">&nbsp;Yellow</li>
                <li><input type="checkbox" name="colour" value="red">&nbsp;Red</li>
            </ul>
            </div>

  <div class="prodGrid">
                <div class="prod green straight accessory wool">
                    <img src="http://www.sciencebuzz.org/sites/default/files/images/cat_0_0.jpg" alt="text" />
                    <p class="title">A Straight Green Wool Scarf</p>
                    <p class="price">&pound;10</p>
                </div><!--
                --><div class="prod blue cowl accessory ladies mohair">
                    <img src="http://www.sciencebuzz.org/sites/default/files/images/cat_0_0.jpg" alt="text" />
                    <p class="title">A Blue Mohair Cowl</p>
                    <p class="price">&pound;10</p>
                </div><!--
                --><div class="prod last baby clothing red acrylic">
                    <img src="http://www.sciencebuzz.org/sites/default/files/images/cat_0_0.jpg" alt="text" />
                    <p class="title">A Red Baby Cardigan</p>
                    <p class="price">&pound;10</p>
                </div>
                <div class="prod mens merino adult 10to20 grey accessory">
                    <img src="http://www.sciencebuzz.org/sites/default/files/images/cat_0_0.jpg" alt="text" />
                    <p class="title">Grey Mens Adult Gloves</p>
                    <p class="price">&pound;10</p>
                </div><!--
                --><div class="prod brown homeware silk">
                    <img src="http://www.sciencebuzz.org/sites/default/files/images/cat_0_0.jpg" alt="text" />
                    <p class="title">A Brown Silk Cushion</p>
                    <p class="price">&pound;10</p>
                </div><!--
                --><div class="prod last kit ">
                    <img src="http://www.sciencebuzz.org/sites/default/files/images/cat_0_0.jpg" alt="text" />
                    <p class="title">A "DIY" Kit</p>
                    <p class="price">&pound;10</p>
                </div>
            </div>        

Он показывает фильтр, но, к сожалению, он не работает, как вы можете видеть здесь: https://starwarsnovinky.cz/budoucnost-star-wars/.

Может кто-топожалуйста, помогите мне?

Спасибо.