javascript - Slick Slider is not working in WordPress, Slides not showing

Solution:

I think there is some problem with your code. I debug your code and find out the problem. Your main problem first of wrong way to enqueue scripts, then custom post type register, and jquery writing style. After fixing working it.

functions.php

// enqueue scripts & style
function ec_theme_scripts(){
    wp_enqueue_style('style', get_stylesheet_uri());
    wp_enqueue_style('bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css');
    wp_enqueue_style('custom-css', get_template_directory_uri() . '/css/style.css');
    wp_enqueue_style('slick-css', get_template_directory_uri() . '/css/slick.css');
    wp_enqueue_style('fontawesome-css', 'https://pro.fontawesome.com/releases/v5.15.4/css/all.css');


    wp_enqueue_script('bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), true);
    wp_enqueue_script('slick', get_template_directory_uri() . '/js/slick.min.js', array('jquery'), true);
}
add_action('wp_enqueue_scripts', 'ec_theme_scripts');

// Register Custom Post Type
function testimonials_post_register(){

    $labels = array(
        'name'                  => _x('Testimonials', 'text_domain'),
        'singular_name'         => _x('testimonials', 'text_domain'),
        'menu_name'             => __('Testimonials', 'text_domain'),
        'name_admin_bar'        => __('Testimonial', 'text_domain'),
        'archives'              => __('Item Archives', 'text_domain'),
        'attributes'            => __('Item Attributes', 'text_domain'),
        'parent_item_colon'     => __('Parent Item:', 'text_domain'),
        'all_items'             => __('All Items', 'text_domain'),
        'add_new_item'          => __('Add New Item', 'text_domain'),
        'add_new'               => __('Add New', 'text_domain'),
        'new_item'              => __('New Item', 'text_domain'),
        'edit_item'             => __('Edit Item', 'text_domain'),
        'update_item'           => __('Update Item', 'text_domain'),
        'view_item'             => __('View Item', 'text_domain'),
        'view_items'            => __('View Items', 'text_domain'),
        'search_items'          => __('Search Item', 'text_domain'),
        'not_found'             => __('Not found', 'text_domain'),
        'not_found_in_trash'    => __('Not found in Trash', 'text_domain'),
        'featured_image'        => __('Featured Image', 'text_domain'),
        'set_featured_image'    => __('Set featured image', 'text_domain'),
        'remove_featured_image' => __('Remove featured image', 'text_domain'),
        'use_featured_image'    => __('Use as featured image', 'text_domain'),
        'insert_into_item'      => __('Insert into item', 'text_domain'),
        'uploaded_to_this_item' => __('Uploaded to this item', 'text_domain'),
        'items_list'            => __('Items list', 'text_domain'),
        'items_list_navigation' => __('Items list navigation', 'text_domain'),
        'filter_items_list'     => __('Filter items list', 'text_domain'),
    );
    $args = array(
        'label'                 => __('testimonials', 'text_domain'),
        'description'           => __('', 'text_domain'),
        'labels'                => $labels,
        'supports'              => array('title', 'editor', 'thumbnail'),
        'hierarchical'          => false,
        'public'                => true,
        'show_ui'               => true,
        'show_in_menu'          => true,
        'menu_position'         => 5,
        'show_in_admin_bar'     => true,
        'show_in_nav_menus'     => true,
        'can_export'            => true,
        'has_archive'           => true,
        'exclude_from_search'   => false,
        'publicly_queryable'    => true,
        'capability_type'       => 'page',
    );
    register_post_type('Testimonials', $args);
}
add_action('init', 'testimonials_post_register', 0);

function create_testimonials_shortcode(){

    $args = array(
        'post_type' => 'testimonials',
        'publish_status' => 'published',
    );

    $query = new WP_Query($args);
    if ($query->have_posts()) :
    ?>

        <div class="testimonial_slider">

            <?php while ($query->have_posts()) :
                $query->the_post();
            ?>

                <div class="testimonial-slide">

                    <div class="testimonial-content">
                        <p> <?php the_content(); ?> </p>
                    </div>

                    <div class="image-title-wrapper">
                        <?php $img_url = get_the_post_thumbnail_url(get_the_ID(), 'full'); ?>
                        <img src="<?php echo $img_url; ?>">
                        <h4 class="testimonial-name"> <?php the_title(); ?> </h4>
                    </div>

                </div>

            <?php endwhile; ?>

        </div>

    <?php
    endif;
    wp_reset_postdata();
    ?>

<?php
}

add_shortcode('testimonials', 'create_testimonials_shortcode');

function testimonials_init(){
?>
    <script>
        (function($) {
            $('.testimonial_slider').slick({
                infinite: true,
                slidesToShow: 1,
                slidesToScroll: 1,
                dots: true,
                autoplay: true,
                autoplaySpeed: 5000
            });

        })(jQuery);
    </script>
<?php
}
add_action('wp_footer', 'testimonials_init');
Copy code

I think hopefully work it. You can add some style for better look. I added little bit CSS. you can place it into customizer custom CSS or style.css

.image-title-wrapper img {
    width: 150px;
    height: 150px;
}
Copy code

I provide a screenshot after working it.

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.