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,

  )
);
}

?>

It is supposed to be a custom post type, so with this piece of code, I managed to show Sliders/Add new slider option in WP Dashboard. But now I have no idea what should I do next to make the actual slider show up on my front page. Because when I add a new slide it makes a whole new single image post instead of showing on top of my front page(not header). I am sure there is something else that i am missing, but I have no idea what to do, since this is the first time I had to do something like this. Can anyone help me, please? I am starting to go crazy over this. Thank you so much in advance, everyone.

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,

  )
);
}

?>

It is supposed to be a custom post type, so with this piece of code, I managed to show Sliders/Add new slider option in WP Dashboard. But now I have no idea what should I do next to make the actual slider show up on my front page. Because when I add a new slide it makes a whole new single image post instead of showing on top of my front page(not header). I am sure there is something else that i am missing, but I have no idea what to do, since this is the first time I had to do something like this. Can anyone help me, please? I am starting to go crazy over this. Thank you so much in advance, everyone.

• javascript
• php
• wordpress

3 Answers 3

You may want to try the WordPress plugin Slick Slider. It uses native WordPress galleries (in contrast to WP Slick Slider and Image Carousel mentioned in the other answer which uses a custom post type).

Disclaimer: I'm the author of this plugin.

You have two options:

1 (easiest) Use the plugin instead: https://nb.wordpress/plugins/wp-slick-slider-and-image-carousel/

2 (advanced) Create a custom loop that fetches all the images from the custom post type and echoes them as a slideshow. Example:

// 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="your-class">';
    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();

You also need to enqueue the scripts and stylesheets in the themes functions.php file.

I passed a lot of time trying to replicate a plex slide along with slick-lightbox, with not much success.

My best bet was upgrade jquery to version 3 on WordPress and run slick/slick-lightbox out of wordpress.

Console shows no issues, but definitely not for beginners.