I'm trying to create a slider with my custom post type rt_testimonial. I believed I had everything setup but I'm getting an error in console:

TypeError: $ is not a function

Here's what I did:

In my mu-plugins folder in a my_functions.php I created a post type rt_testimonial. (this part is working)

In my mu-plugins folder in a my_functions.php I created a short code to call my posts:

add_shortcode('fellowship-testimonials', 'rt_show_testimonials');
function rt_show_testimonials() {
  $testimonialQuery = new WP_Query(array(
    'post_type' => 'rt_testimonial',
    'posts_per_page' => -1,
    'order' => 'ASC'
  ));
  if ($testimonialQuery->have_posts()) {
    $testimonials = '<div class="testimonial-slider">';
    while($testimonialQuery->have_posts()){
      $testimonialQuery->the_post();
      $testimonials .= '<div class="featured-image-slider testimonial-item">
                <div class="testimonial-caption">'.get_the_content().'</div>
                <div class="testimonial-author">'.get_the_title().'</div>
               </div>';
    }
    $testimonials .= '</div>';

  } else { 
    $testimonials = 'no posts';
  }
  wp_reset_postdata();
  return $testimonials;
}

In my child theme folder I added the slick directory (which I downloaded from here: /

meetheme/slick/ all the slick files are here.

Then I made a slick-init.js file in that same directory and put this in it:

$(document).ready(function(){
  $('.testimonial-slider').slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 3
  });
});

Lastly in my child theme functions.php I put this to enqueue my scripts:

add_action('wp_enqueue_scripts', 'wp_enqueue_slick_scripts', 999);

function wp_enqueue_slick_scripts(){

    //add slick slider
    wp_register_style('slickcss', get_stylesheet_directory_uri() . '/slick/slick.css' );
    wp_register_style('slickcsstheme', get_stylesheet_directory_uri() . '/slick/slick-theme.css' );

    //load slick js
    wp_register_script('slickslider', get_stylesheet_directory_uri() . '/slick/slick.min.js', array('jquery'), '', true );

    ////load slick initiate script
    wp_register_script( 'slickinit', get_stylesheet_directory_uri() . '/slick/slick-init.js',  array( 'jquery', 'slickslider' ) );

    // load slick on homepage
    if ( is_front_page() ) {
        wp_enqueue_style( 'slickcss' );
        wp_enqueue_style( 'slickcsstheme' );
        wp_enqueue_script ('slickslider');
        wp_enqueue_script ('slickinit');
    }
}

When I load the page with my shortcode I expect the slider, but I get all posts loading one under another. In my console I get the error TypeError: $ is not a function

What did I do wrong here?

I based this off the slick site and this stack page: slick slider as custom post type

I'm trying to create a slider with my custom post type rt_testimonial. I believed I had everything setup but I'm getting an error in console:

TypeError: $ is not a function

Here's what I did:

In my mu-plugins folder in a my_functions.php I created a post type rt_testimonial. (this part is working)

In my mu-plugins folder in a my_functions.php I created a short code to call my posts:

add_shortcode('fellowship-testimonials', 'rt_show_testimonials');
function rt_show_testimonials() {
  $testimonialQuery = new WP_Query(array(
    'post_type' => 'rt_testimonial',
    'posts_per_page' => -1,
    'order' => 'ASC'
  ));
  if ($testimonialQuery->have_posts()) {
    $testimonials = '<div class="testimonial-slider">';
    while($testimonialQuery->have_posts()){
      $testimonialQuery->the_post();
      $testimonials .= '<div class="featured-image-slider testimonial-item">
                <div class="testimonial-caption">'.get_the_content().'</div>
                <div class="testimonial-author">'.get_the_title().'</div>
               </div>';
    }
    $testimonials .= '</div>';

  } else { 
    $testimonials = 'no posts';
  }
  wp_reset_postdata();
  return $testimonials;
}

In my child theme folder I added the slick directory (which I downloaded from here: https://kenwheeler.github.io/slick/

meetheme/slick/ all the slick files are here.

Then I made a slick-init.js file in that same directory and put this in it:

$(document).ready(function(){
  $('.testimonial-slider').slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 3
  });
});

Lastly in my child theme functions.php I put this to enqueue my scripts:

add_action('wp_enqueue_scripts', 'wp_enqueue_slick_scripts', 999);

function wp_enqueue_slick_scripts(){

    //add slick slider
    wp_register_style('slickcss', get_stylesheet_directory_uri() . '/slick/slick.css' );
    wp_register_style('slickcsstheme', get_stylesheet_directory_uri() . '/slick/slick-theme.css' );

    //load slick js
    wp_register_script('slickslider', get_stylesheet_directory_uri() . '/slick/slick.min.js', array('jquery'), '', true );

    ////load slick initiate script
    wp_register_script( 'slickinit', get_stylesheet_directory_uri() . '/slick/slick-init.js',  array( 'jquery', 'slickslider' ) );

    // load slick on homepage
    if ( is_front_page() ) {
        wp_enqueue_style( 'slickcss' );
        wp_enqueue_style( 'slickcsstheme' );
        wp_enqueue_script ('slickslider');
        wp_enqueue_script ('slickinit');
    }
}

When I load the page with my shortcode I expect the slider, but I get all posts loading one under another. In my console I get the error TypeError: $ is not a function

What did I do wrong here?

I based this off the slick site and this stack page: slick slider as custom post type

• custom-post-types
• javascript
• jquery

1 Answer 1

If you want to use $ instead of jQuery you can wrap your JS code like this...

(function ($) {
    ...you js code
})(jQuery);

or use noConflict() by putting this at the top of your JS...

var $ = jQuery.noConflict();

Of course you could also replace all the $ with jQuery.

Any of these will get rid of your error.