Making a featured post carousel slider with wp customizer controls

Featured post carousels are a commonly found element on blog/news/magazine type themes. Often located on the top of the page, this module showcases a list of posts from a specific category of choice. An example would be a carousel of featured news articles on a news site or theme. We can always use a WP plugin for this purpose.  But if you are feeling a bit adventurous, we will try to do it on the theme itself without relying on a WP plugin.

The Gameplan

We are going to build a featured post carousel based on the owlcarousel script. This is a jQuery plugin to create beautiful carousel sliders. We are also going to create custom controls in the WordPress customiser to select our featured category and set the number of slides.

Hookup the jQuery plugin

We are are using the owlcarousel plugin to build the featured post slider. So lets download the plugin and add the necessary files to our theme. Once you extract the zip file, you will find the js and css files we need to make the slider.

Add the owl.carousel.css and owl.theme.css file to the /css folder in your theme.  Next add the owl.carousel.js file to the /js folder in your theme. Next create a new file called effects.js and add it to the /js folder as well.  Please add the following code to the effects.js file

jQuery(document).ready(function() {
 
  jQuery("#slider").owlCarousel({
      items : 4,
      itemsDesktop : [1199,3],
      itemsDesktopSmall : [979,3],
  });
 
});

Once we have listed the required files in our theme folder we need to enqueue them via the functions.php file. Open the functions.php file and add the following code to the bottom of it.

function carousel_scripts() {
	wp_enqueue_style( 'owl.carousel', get_template_directory_uri() . '/css/owl.carousel.css' );
	wp_enqueue_style( 'owl.theme', get_template_directory_uri() . '/css/owl.theme.css' );
	wp_enqueue_script( 'owl.carousel', get_template_directory_uri() . '/js/owl.carousel.js', array('jquery'), '20120206', true );
	wp_enqueue_script( 'effects', get_template_directory_uri() . '/js/effects.js', array('jquery'), '20120206', true );
}
add_action( 'wp_enqueue_scripts', 'carousel_scripts' );

Now we add a custom image size for the featured images. For that please add the following code to the functions.php file.

add_image_size( 'carousel-pic', 480, 320, true ); 

Create custom controls for WordPress customiser

Now we are going to build custom control settings to manage the carousel slider. We will be able to select the category for featured post and set the number of posts via the WordPress customizer and it will also give you a live preview of the settings you make. Please add the following code to the functions.php of your theme.

// Custom control for carousel category

if (class_exists('WP_Customize_Control')) {
    class WP_Customize_Category_Control extends WP_Customize_Control {

        public function render_content() {
  
            $dropdown = wp_dropdown_categories( 
                array(
                    'name'              => '_customize-dropdown-category-' . $this->id,
                    'echo'              => 0,
                    'show_option_none'  => __( '— Select —' ),
                    'option_none_value' => '0',
                    'selected'          => $this->value(),
                    
                )
            );

            $dropdown = str_replace( '<select', '<select ' . $this->get_link(), $dropdown );
 
            printf(
                '<label class="customize-control-select"><span class="customize-control-title">%s</span> %s</label>',
                $this->label,
                $dropdown
            );
        }
    }
}

// Register slider customizer section 

add_action( 'customize_register' , 'carousel_options' );

function carousel_options( $wp_customize ) {

$wp_customize->add_section(
    'carousel_section',
    array(
        'title'     => 'Carousel settings',
        'priority'  => 202,
        'capability'  => 'edit_theme_options',
    )
);

$wp_customize->add_setting(
    'carousel_setting',
     array(
    'default'   => '',
  )
);

$wp_customize->add_control(
    new WP_Customize_category_Control(
        $wp_customize,
        'carousel_category',
        array(
            'label'    => 'Category',
            'settings' => 'carousel_setting',
            'section'  => 'carousel_section'
        )
    )
);

$wp_customize->add_setting(
    'count_setting',
     array(
    'default'   => '6',

  )
);

$wp_customize->add_control(
    new WP_Customize_Control(
        $wp_customize,
        'carousel_count',
        array(
            'label'          => __( 'Number of posts', 'theme_name' ),
            'section'        => 'carousel_section',
            'settings'       => 'count_setting',
            'type'           => 'text',
        )
    )
);

}

The code creates a customiser section with dropdown categories and a text field to enter the number of slides.

customizer

Build the slider

We have got the slider scripts and options ready.  Next we will build the structure of the carousel slider. We will be using wp_query to build a custom loop that will return our featured posts. Please create a new file named carousel.php within the /inc folder of the theme. Add the following code to the carousel.php file.

<div id="slider">

	<?php
	$carousel_cat = get_theme_mod('carousel_setting','1');
	$carousel_count = get_theme_mod('count_setting','4');
	$new_query = new WP_Query( array( 'cat' => $carousel_cat  , 'showposts' => $carousel_count ));
	while ( $new_query->have_posts() ) : $new_query->the_post(); ?>

	<div class="item">
		<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( 'carousel-pic' ); ?></a>
		<h3> <?php the_title();?> </h3>
	</div>

	<?php 
		endwhile;
	 	wp_reset_postdata(); 
	?>

</div>

Here we have a custom query that pulls a set number of posts from a selected category. The content of the post is the featured image plus the post title. These posts are the items of the carousel slider we made. We are using the get_theme_mod()  to capture the settings value from our customiser.

Display the slider

We have created the slider within a custom template file called carousel.php within the /inc folder. In order to show the slider on the page, we will call this template file using the get_template_part() function. So please add the following code to where ever you want to display the slider. I place it on top of the index.php file so that it shows up on the top of homepage.

<?php get_template_part( 'inc/carousel' ); ?>

See it in action

Please check the video to see how this works. You can also download the theme with the carousel built in.

  • Great useful tutorial, thanks for sharing.

  • Luigi Ruggiero

    Hi,
    it possible for custom post type?
    tank’s

  • Luigi Ruggiero

    I modified this string:
    ‘name’ => ‘my-taxonomy-custom-type’ . $this->id,
    but does not work!
    Help me… 🙂

  • This is the information I’ve been looking for glad I found this one. Now not only me can get some benefits from your blogs. Thank you so much.

  • Darren Gegantino

    Hello. Thanks for this tutorial. However, when i try to run it, it just display the featured posts as vertically aligned list with the featured image and title. It doesn’t show as a slider. Please help