ACF Pro with SlickJS

• movingsale

• September 7, 2016 at 3:40 pm

I am trying to create a slider on my wordpress theme using SlickJS and ACF Pro using this tutorial. I am using some custom css styling around the Slick theme but the Jquery and CSS dont seem to be registering correctly as my slider just isnt working. (I understand this issue may be more related to external factors other than ACF, but was really hoping someone could help me. Been stuck on it for days)

My functions.php is as follows:

function theme_enqueue() {
    //wp_deregister_script( 'jquery' );
    wp_enqueue_script( 'jquery', get_template_directory_uri(). '/js/jquery.js', array( 'jquery' ) );
    wp_enqueue_script( 'bootstrap', get_template_directory_uri(). '/js/bootstrap.js', array( 'jquery' ) );
    wp_enqueue_style('font-awesome', get_stylesheet_directory_uri() . '/font-awesome/css/font-awesome.css');
    wp_enqueue_script( 'material', get_template_directory_uri(). '/js/material.js', array( 'jquery' ) );
    wp_enqueue_script( 'material-kit', get_template_directory_uri() . '/js/material-kit.js', '1.0.0', true );
}
add_action('wp_footer', 'theme_enqueue');

function slick_slider_script_styles() {
    wp_enqueue_script( 'slickjs', get_stylesheet_directory_uri(). '/js/slick.min.js', array( 'jquery' ), '1.6.0', true );
    wp_enqueue_script( 'slickjs-init', get_stylesheet_directory_uri(). '/js/slick-init.js', array( 'slickjs' ), '1.6.0', true );

    wp_enqueue_style( 'slickcss', get_stylesheet_directory_uri() . '/css/slick.css', '1.6.0', 'all');
    wp_enqueue_style( 'slickcsstheme', get_stylesheet_directory_uri(). '/css/slick-theme.css', '1.6.0', 'all');
}
add_action('wp_enqueue_scripts', 'slick_slider_script_styles');

My slick-init.js file is:

jQuery(document).ready(function($){
     $('.testimonials').slick({
      dots: true,
      slidesToShow: 1,
      swipeToSlide: true,
    });
});

My actual PHP/HTML is:

<section class="mantras">
    <div class="row">
        <h2 class="title">Testimonials</h2>
        <div class="testimonials">
            <div class="vision">
                <?php if( have_rows('testimonials') ): ?>
                    <?php while( have_rows('testimonials') ): the_row(); ?>
                       <?php
                        $image = get_sub_field('image');
                        $company_name = get_sub_field('company_name');
                        $company_testimonial = get_sub_field('company_testimonial');
                        ?>
                        <p><img class="center-img" src="<?php $image ?>"></p>
                        <h4 class="info-title text-center"><?php echo $company_name; ?></h4>
                        <p class="description"><?php echo $company_testimonial; ?></p>
                    <?php endwhile; ?>
                <?php endif; ?>
            </div>
        </div>
    </div>
</section>

the current state of how it looks is: http://i.stack.imgur.com/uA5Ks.png
(notice there are no side arrows and dots at the bottom)

Whats going on here?

• Jonathan

• September 8, 2016 at 5:58 am

Hi @movingsale

You’re registering scripts and CSS files using wp_footer which should not be done. Then you’re registering some more using the wp_enqueue_scripts hook which is correct.

You should move all your scripts and css into the second function. Also make sure you put the scripts in the correct order of when they’re required. Look at the dependency parameter of wp_enqueue_script()
https://developer.wordpress.org/reference/functions/wp_enqueue_script/

My best guess is that you have issues with the order of scripts loading and/or some files not loading at all. Also, make sure that if the slick slider tries to use some images and/or fonts for the graphical things like arrows, they need to be added and linked correctly as well.

My tip to you is to have a look at your sites console tab in the inspector (chrome, firefox). I think safari has something like it too but I’ve not used it for developing for quite some time so I don’t know 🙂

• movingsale

• September 9, 2016 at 1:20 am

Hey @jonathan thanks for your advice. My inspect console doesnt say anything and there are no errors.

I took your advice and changed up my functions.php to look like this:

function theme_styles() {
    wp_enqueue_style( 'theme-material-icons', '//fonts.googleapis.com/icon?family=Material+Icons', array(), '1.0.0' );
    wp_enqueue_style( 'theme-roboto-font', '//fonts.googleapis.com/css?family=Roboto:300,400,500,700', array(), '1.0.0' );
    wp_enqueue_script( 'theme-bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', array( 'jquery' ), '1.0.0', true );
    wp_enqueue_script( 'theme-material', get_template_directory_uri() . '/js/material.min.js', '1.0.0', true );
    wp_enqueue_script( 'theme-material-kit', get_template_directory_uri() . '/js/material-kit.js', '1.0.0', true );

    wp_enqueue_style('font-awesome', get_stylesheet_directory_uri() . '/font-awesome/css/font-awesome.css');

    wp_enqueue_style( 'slick_css', '//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css' );
    // wp_enqueue_style( 'theme-slickcsstheme', get_stylesheet_directory_uri(). '/css/slick-theme.css', '1.6.0', 'all');
    wp_enqueue_script( 'slick_js', '//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js', array('jquery'), '', true );
    wp_enqueue_script( 'theme-slickjs-init', get_template_directory_uri(). '/js/slick-init.js', array( 'jquery','slickjs' ));
}
add_action('wp_enqueue_scripts', 'theme_styles');

And I checked the console network, the scripts are being delivered, however, the very last script: slickjs-init is not? Do you have any idea why? My styles.css is being delivered as well. It has my css for the arrows etc but they dont seem to work. Everything else seems to be styled just fine.

• Jonathan

• September 9, 2016 at 5:28 pm

Hi,

That’s because you’ve set a dependency for it of slickjs but there’s no script loaded before that uses that name. Change it to slick_js and it should turn up 🙂

• movingsale

• September 10, 2016 at 2:30 am

Hi @jonathan,

I noticed that just as I saw your post!! That definitely fixed it! Thank you!

• Jonathan

• September 13, 2016 at 8:29 pm

Great to hear!

Best of luck with your project and don’t hesitate to post a new topic if you need to.