slick slider as custom post type

Question

I made HTML/CSS design of a web site, and now I need to convert it to WordPress. The part that I am working on right now is Adding slick slider to show only on my WP front page. It works perfectly in HTML (because there I incorporated javascript which could be found on actual slick slider website and initiated through 3 div elements with images inside.).

In WP functions.php I added:

   //Add slider

   add_action( 'init', 'create_post_type' );

   function create_post_type() {
      register_post_type( 'slider',
         array(
               'labels' => array(
               'name' => __( 'Sliders' ),
               'singular_name' => __( 'Slider' ),
               'add_new' => 'Add new slide',
       ),
               'public' => true,

      )
     );
}

?>

I also enqueued scripts and styles like this (in functions.php also):

 //Enqueue scripts
add_action('wp_enqueue_scripts', 'wp_enqueue_all_scripts', 999);

function wp_enqueue_all_scripts(){

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

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

////load slick initiate script
wp_register_script( 'slickinit', get_template_directory_uri() . '/assets/js/slick-init.js');

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

I added slick.init in js folder and it looks like this:

    jQuery(document).ready(function($){
$('.featured-image-slider').slick({ //add CSS class of target
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 2000,
    })
});

I made front-page.php and I put the code in there like this:

<?php get_header(); ?>

<?php

// WP_Query arguments
$args = array (
    'post_type'              => array( 'slider' ),
);

// The Query
$query_slider = new WP_Query( $args );

// The Loop
if ( $query_slider->have_posts() ) {
    echo '<div class="home regular slider">';
    while ( $query_slider->have_posts() ) {
        $query_slider->the_post();
        echo '<div> ';
        the_post_thumbnail();
        echo '</div>';
    }
    echo '</div>';
} else {
    // no posts found
}

// Restore original Post Data
wp_reset_postdata();

?>

<?php  get_footer(); ?>

When I go to Sliders -> Add new slide in my dashboard, the slide is not showing on my front page. I am going out of my mind and would really appreciate help. How do I resolve this, what am I doing wrong? I am a total newbie and for the life of me I can not resolve it myself. Thank you.

Answer 1

First of all you've written array(jquery) instead of array('jquery'). And also has not defined the slickinit enqueue position. So the right code will be-

 //Enqueue scripts
add_action('wp_enqueue_scripts', 'wp_enqueue_all_scripts', 999);

function wp_enqueue_all_scripts(){

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

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

    ////load slick initiate script
    wp_register_script( 'slickinit', get_template_directory_uri() . '/assets/js/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');
    }
}

And at your front-page.php try this-

<?php get_header(); ?>

<?php

// WP_Query arguments
$args = array (
    'post_type'              => array( 'slider' ),
);

// The Query
$query_slider = new WP_Query( $args );

// The Loop
if ( $query_slider->have_posts() ) {
    echo '<div class="home regular slider">';
    while ( $query_slider->have_posts() ) {
        $query_slider->the_post();
        echo '<div class="featured-image-slider"> ';
        the_post_thumbnail();
        echo '</div>';
    }
    echo '</div>';
} else {
    // no posts found
}

// Restore original Post Data
wp_reset_postdata();

?>

<?php  get_footer(); ?>

Hope that thing will be working now.

Answer 2

I'm the author of WordPress plugin Slick Slider. It turns native WordPress galleries ([gallery ids="x,y,z"]) into sliders utilizing the great slick slider written by Ken Wheeler (which you also implement).

Using the plugin you wouldn't have to use custom post types. Give it a try.