How to Create a Custom Post Type Carousel in WordPress

How to Create a Custom Post Type Carousel in WordPress

Are you looking to showcase your portfolio items or any other custom content type in an engaging and visually appealing way on your WordPress website? A custom post type carousel can be a fantastic solution to highlight your work or products. In this blog post, we’ll guide you through creating a custom post type carousel in WordPress using the Slick Carousel library.

What You'll Need

Before we dive into the code, make sure you have the following components ready:

  1. A WordPress website up and running.
  2. Basic knowledge of WordPress theme development.
  3. Slick Carousel library (you can download it from the Slick website).
  4. A custom post type or content that you want to display in the carousel.

Step 1: Enqueue Slick Carousel Script and Styles

First, let’s make sure we load the necessary Slick Carousel assets. Add the following code to your theme’s functions.php file:
<?php // Enqueue Slick Carousel script
wp_enqueue_script('jquery-slick', get_template_directory_uri() . '/assets/slick/slick.min.js', array('jquery'), '1.8.1', true);

// Enqueue Slick Carousel styles
wp_enqueue_style('slick', get_template_directory_uri() . '/assets/slick/slick.css', array(), '1.8.1');
?>
Replace the file paths with the correct paths to your Slick Carousel assets.

Step 2: Create a Custom Post Type Carousel Function

Next, we’ll create a function that retrieves the custom posts you want to display in the carousel and generates the HTML structure. Add the following code to your functions.php file as well:

<?php function portfolio_carousel() {
    $carousel_posts = new WP_Query(array(
        'post_type' => 'portfolio', // Replace 'portfolio' with your custom post type name
        'posts_per_page' => 5, // Adjust the number of posts to display
    ));

    if ($carousel_posts->have_posts()) :
    ?>
    <div class="carousel-container">
        <div class="post-carousel">
            <?php while ($carousel_posts->have_posts()) : $carousel_posts->the_post(); ?>
                
                <div class="carousel-item">
                    <div class="post-slick">
                        <!-- Customize the content and layout of each carousel item as needed -->
                        <a href="<?php echo get_permalink(); ?>">
                            <?php the_post_thumbnail('full', array('class' => 'carousel-image')); ?>
                            <h2><?php the_title(); ?></h2>
                        </a>
                    </div>
                </div>
            <?php endwhile; ?>
        </div>
    </div>
    <?php
    endif;
    wp_reset_postdata();
}

add_shortcode('portfolio_slider', 'portfolio_carousel');

This code defines a function called portfolio_carousel that uses WP_Query to retrieve posts of the ‘portfolio’ custom post type (replace ‘portfolio’ with your custom post type name). It then loops through these posts, generating HTML markup for each carousel item. The add_shortcode function allows you to use the [portfolio_slider] shortcode to display the carousel on any post or page.

Step 3: Now style Your Custom Post Type Carousel

To make your custom post type carousel visually appealing, you can add some CSS styles to your theme’s stylesheet (usually style.css). Here’s an example of the styles used in the code:

.post-carousel .post-slick {
    padding-right: 30px;
    position: relative;
}

.post-carousel .post-slick img {
    height: 300px;
    object-fit: cover;
}

.post-carousel .post-slick h2 {
    position: absolute;
    z-index: 9;
    bottom: 0;
    left: 20px;
    right: 20px;
    font-size: 18px;
    color: #fff;
    font-family: "Montserrat", sans-serif;
}

.slick-dots button {
    font-size: 0;
    border: 0;
    background: #143331;
    height: 10px;
    width: 10px;
    border-radius: 10px;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

.slick-dots li {
    display: inline-block;
    padding: 0;
    margin: 0;
    margin-right: 15px;
}

.slick-dots {
    text-align: center;
    margin: 30px;
}

.slick-dots .slick-active button {
    width: 30px;
}

.post-carousel .post-slick a:before {
    opacity: .84;
    background: linear-gradient(180deg, hsla(0,0%,100%,0) 0, rgba(5,20,34,.3) 60%, rgba(32,35,38,.38));
    content: '';
    z-index: 9;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

Feel free to customize these styles to match your website’s design.

Step 4: Initialize the Carousel

Finally, we need to initialize the Slick carousel using JavaScript/jQuery. Add the following script to your theme:

<script>
	jQuery(document).ready(function(){
	  jQuery('.post-carousel').slick({
		infinite: true,
		slidesToShow: 3,
		slidesToScroll: 3,
		autoplay: true,
		arrows: false,
		dots: true,
		centerMode: true,
		autoplaySpeed: 3000
	  });
	});
</script>

This script initializes the Slick carousel on elements with the class .post-carousel and configures its behavior, such as autoplay, slide count, and more.

Display Your Custom Post Type Carousel

Now that you have everything in place, you can add the carousel to any post or page using the [portfolio_slider] shortcode. Simply create a new post or page, and add [portfolio_slider] to the content. When you publish or update the post/page, the custom post type carousel will appear, showcasing your selected posts in a visually appealing way.

In summary, creating a custom post type carousel in WordPress using the Slick Carousel library involves enqueuing the necessary scripts and styles, defining a function to fetch and display the custom posts, styling the carousel as desired, and then adding it to your content using a shortcode. With this solution, you can effectively showcase your portfolio or any custom content type on your WordPress website, enhancing user engagement and visual appeal.

Share us