iDevie
November 2019
M T W T F S S
« Oct    
 123
45678910
11121314151617
18192021222324
252627282930  

Categories


In this article, we’re going to explore how to make posts slider in WordPress by using a slider plugin. We’re going to use one of the best WordPress slider plugins—Responsive Posts Carousel.

More often than not, when you’re creating your website, you would like to have a carousel on your website which displays posts filtered by certain criteria. In fact, I’d say it’s a must-have feature! Once you have decided that you’re going to build a basic posts slider, the next question is how exactly to create a basic posts carousel in WordPress.

If you’re a WordPress developer or it’s your hobby to build sites using WordPress, you already know that WordPress provides a lot of plugins for almost every feature you could think of, and it can be hard to choose which one to use. For this post, I’ve picked one of the best in the category, Responsive Posts Carousel, and I’ll show you how to use it throughout the course of this tutorial.

The Responsive Posts Carousel plugin allows you to display posts, pages and other content types in a slider. And, as the name suggests, this plugin supports responsive design, so a slider built using this plugin will adapt to all different devices. I’m sure you are aware of how critical this is nowadays! Thus, it’s a must-have feature when you choose a third-party plugin to build sliders on your website.

Next, we’ll explore the basics of the Responsive Posts Carousel plugin along with the setup process. Then, we’ll have a look at a few important parameters supported by this plugin that allow you to customize a slider according to your requirements.

What Is Responsive Posts Carousel?

If you’re looking for an easy-to-use and feature-rich slider plugin, the Responsive Posts Carousel plugin is one of the best in the category. It allows you to create content and image sliders very easily.

Let’s have a quick look at the features it provides:

  • fully responsive and adaptive to all types of devices
  • scales according to the size of the container
  • separate settings for desktop, tablet, and mobile devices
  • choice of 50+ different templates
  • supports custom post types and allows you to use Advanced Custom Fields (ACF) to sort posts
  • supports all popular browsers
  • many configuration options for customizing your slider
  • easy to implement

For this article, I’ve used WordPress 5.0.3, and the Responsive Posts Carousel plugin version is 5.0. I would recommend that you install it if you want to follow along with this article. You can install the plugin from the WordPress.org free plugin repository.

Next, you’ll learn how to build a posts slider in your WordPress website!

How to Create a Posts Slider

In this section, you’ll see how to set up a posts slider from the WordPress admin pages. Head over to your WordPress admin screen.

Once you’ve installed the Responsive Posts Carousel plugin, it will add a link in the left sidebar, as shown in the following screenshot.

Responsive Post Carousel admin pages

Click on the Carousels > All Carousels link, and it should take you to the carousel listing page, as shown in the following screenshot.

Carousel Listing

Click on the Add New button to add a new carousel, and it should open a form which allows you to create a new carousel.

Add New Carousel

As you can see, there are six different tabs, and each section allows you to configure a different aspect of your slider. Let’s go through each section in detail.

Content Tab

Let’s have a close look at the Content tab, which is the most important section while configuring your slider.

Content Tab

The Display By option allows you to filter posts either by the post type or by taxonomy. If you select By Post Type, it displays the Select Post Type drop-down, which allows you to select the post type. On the other hand, if you select By Taxonomy, it displays the Select Term drop-down, which allows you to select a taxonomy field.

Next, if you have selected the post type, it allows you to choose posts that you want to display in the carousel. On the other hand, if you have selected the taxonomy, it allows you to choose terms that will be used to filter posts.

Further in the configuration, it provides you the Exclude Posts field, which allows you to select posts that you want to exclude from the carousel.

Next, there’s the Post Style drop-down field which allows you to select a post style to display in the slider. Along with that, there are the Title and Content fields, which allow you to configure the heading and description fields of a slide.

Finally, there are a few usability options like Description Words Length, Read More Button Text, Link Target, and Disable Post Meta.

Slider Tab

Next, the Slider section allows you to configure the display aspects of your carousel.

Slider Tab

In general, this section provides configuration options which allow you to configure the speed, columns, and certain accessibility-related settings.

Colors Tab

As the name suggests, the Colors tab allows you to choose the background and text colors for different elements in your carousel.

Colors Section

Typography Tab

The Typography tab allows you to configure the font family and font size for the title and description fields.

Typography Tab

Arrows Tab

The Arrows tab allows you to configure different aspects of the arrows that will be displayed for navigation. There’s also an option which allows you to enable or disable arrows altogether.

Arrows Tab

Advanced Settings

Finally, the Advanced tab allows you to configure a few miscellaneous settings.

Advanced Section

Among them, you can use the Rows and Slider Per Row fields to display your slider in grid mode. You can also select the thumbnail size which will be used while displaying images.

Once you have finished with all the settings, click on the Publish button to publish the carousel, and you’ll be taken back to the carousels listing page, as shown in the following screenshot.

Published carousel shortcode

As you can see, there’s already a shortcode available for the carousel which you have just created. You can use this shortcode in a post or sidebar where you want to display this carousel. With generic settings, It should look something like this.

Basic post slider

So that’s how you can build a posts carousel using the Responsive Posts Carousel plugin. Feel free to experiment with different options and let me know if you have any questions about it.

And with that, we’ve reached the end of this article as well. I would love to hear from you if you want to share your experiences about other post carousel plugins that you have used on your website.

Conclusion

Today, we discussed how to build a posts carousel using the Responsive Posts Carousel plugin in WordPress. We went through an in-depth overview of this plugin and discussed different aspects of it.

Feel free to share your thoughts and feedback using the feed below!


Comments 0
There are currently no comments.