0

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.

  • are you getting the custom post type to show on the page (title, image, etc) - regardless of slickslider? – alexwc_ Aug 22 '16 at 6:10
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.

  • Thank you for the reply. I edited the code as you suggested, but still it doesn't work...Any other suggestions? – Nancy Aug 22 '16 at 5:54
  • Well in your slickslider initialize code you used .featured-image-slider class. But in your front-page.php I don't see any div or image with that class. So I think you slickslider is not being able to track your image. – CodeMascot Aug 22 '16 at 5:59
  • Check updated answer... ! @Nancy – CodeMascot Aug 22 '16 at 6:02
  • It works now. I do not know how to thank you enough! You have saved me and I learnt a lot with your help! – Nancy Aug 23 '16 at 9:33
  • Well, that good news. Now if you accept the answer it would be great. @Nancy – CodeMascot Aug 23 '16 at 9:34
0

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.

  • Thanx for the reply, @Philipp Bammes. I already managed to resolve the issue without using any plugins. Thanx, anyway. – Nancy Oct 24 '16 at 6:29
  • Maybe it helps other people facing similar problems. – Philipp Bammes Oct 24 '16 at 9:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.