Артём

$('li').click(function(e) {
        var i = $(e.target).data('index');
        console.log(i);
})

Убери ; после if

Добавь ссылкам с номерами какой-нибудь класс:

<a href='#' class='slide-1 num'>1</a>
<a href='#' class='slide-2 num'>2</a>
<a href='#' class='slide-3 num'>3</a>

$('.num').click(function(){
            var index = $('.num').index($(this));
            gotoSlide(index);
            return false;
        });

function gotoSlide(i){
        var currentSlide=i;
        if(currentSlide>=$('.slidewrapper').children().size())
        {
            currentSlide=0;   
        }
        $('.slidewrapper').animate({left: -currentSlide*slideWidth},300).data('current',currentSlide);
        return false;
    }

Зачем ты удаляешь оба класса? По идее нужно так:
$(".product").toggleClass('product_list');

Здесь подробно написано как подключать свои скрипты в WordPress. А jQuery в него встроен изначально. Просто при подключении своего скрипта, указываешь его в 3м параметре:
wp_enqueue_script( 'your-script', get_template_directory_uri() . '/js/script.js', array( 'jquery' ) );