Having a featured post carousel in your WordPress website is a great way to make it more interactive for the visitors. A carousel slider enables clean and professional presentation of your featured and most popular blog posts.
In this article, I have explained two elaborative ways of creating featured post carousel. The first method is to install carousel plugins and it is for those who do not have technical knowledge of PHP coding. The second method is to add PHP coding and it is for those who have some technical knowledge of PHP. Let’s begin.
1. Create Carousel Through Plugins
If you want your website to display featured post carousel, then WordPress carousel plugins can be the best option for those who do not have much knowledge of PHP coding.
There are various plugins available in WordPress plugin directory for free as well as paid. Following plugins are the most popular plugins that can make your website more appealing and can impress your website visitors:
Super Carousel Responsive WordPress Plugin
With this plugin you can create carousel using post category, tag, post ids or page ids. This plugin is highly appreciated by the users owing to its various features such as easy to sort images with drag and drop options, adjustable slides, special mobile and tablet settings, auto hide adjustment and many more.
RoyalSlider – Touch Content Slider for WordPress
It is a responsive image gallery and HTML content slider plugin with touch swipe navigation. This mobile-friendly plugin allows creating completely custom slideshows and css3 banner rotators with videos, images or HTML content in slides.
Smart Slider 2
This plugin can be considered as the perfect slider solution for your WordPress website owing to its unique features that any website owner wants. Some incredible features of this plugin include user-friendly administrator page, multilevel animation system, 100% responsive, quick slider for image sliders, slider dashboard and many more.
WordPress Canvas Gallery
This plugin will make your WordPress galleries extended in order to display various gallery styles such as carousel, masonry and slider gallery.
IS Circular Photo Gallery
If you want to showcase a picture gallery in a circular style, then this plugin is the best choice. With the help of this plugin, you can use pictures from your media library in the WordPress website or just upload various pictures.
Rift Slider
An awesome responsive slider plugin, Rift Slider can split and rotate any of your slides. This can be used to display photos, advertisements, messages, or any other image and text.
These are few good and poplar plugins that are used to create carousel on WordPress websites. It is necessary that you know which carousel plugin to use with your website in order to maximize its visual appeal to any visitors and potential customers.
If you want to further enhance the experience of your website visitors, you can also download the best WordPress Navigation Menu Plugins.
2. Create Carousel Through Coding
This method for creating carousel is for those, who have some knowledge PHP coding. If you want to create customized carousel for your WordPress website as per your choice, you can hire experienced WordPress developers from reputed companies.
Otherwise, if you have good knowledge of PHP coding, you can create your own carousel by using the following method.
For creating carousel on a WordPress website, we will be using the Kubrik theme, which is default theme of WordPress, but this method is also applicable to other WordPress themes with some modification.
In this tutorial, we will modify Kubrik theme and add featured post carousel on your website’s homepage. Before creating carousel through coding, go to the themes folder of your WordPress installation (wp-content/themes/) and then create a backup of the “default” folder.
It will be helpful if you want to revert back to the original, unmodified Kubrik theme. By the end of the tutorial, your website will look something like this:
Design a Default Image for Featured Post
For creating a carousel, you need to have an appealing default featured post image. For this tutorial, I have created a 233x130px rectangle with 10px radius rounded corners as a default image.
The background of this image is white to grey radial gradient and some text on top is also added. Now, save this image as “no-featured-image.jpg” in the “images” folder inside the “default” folder.
PHP Coding
Adding PHP code is the next step and for that open the “header.php” files in “default” folder. At the end, you will see a div block and an hr tag as shown below:
<div id="header">
<div id="headerimg">
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<div class="description"><?php bloginfo('description'); ?></div>
</div>
</div>
<hr />
Now insert following PHP code between the ending div tag and the hr:
<div id="featured">
<ul id="carousel">
<?php
$featured_posts = get_posts('numberposts=3&category=1');
foreach( $featured_posts as $post ) {
$custom_image = get_post_custom_values('featured_image', $post->ID);
$image = $custom_image[0] ? $custom_image[0] : get_bloginfo("template_directory")."/images/no-featured-image.jpg";</pre>
printf('<li><a href="%s" title="%s"><img src="%s" alt="%s" /></a></li>', get_permalink($post->ID), $post->post_title, $image, $post->post_title);
}
?>
</ul>
<div class="clear"></div>
</div>
This PHP code results in three images in an unordered list and each image is a link to a featured post.
CSS Styling
After inserting PHP code, the next step is to add some CSS styles. For that, open the “style.css” file and insert the following code below at the end of the file:
/* Featured Post Carousel */
#featured {
padding: 10px 10px 0 20px;
}
#carousel {
list-style: none;
margin: 0;
padding: 0;
}
#carousel li {
float: left;
padding: 0;
margin-right: 10px;
}
This code will float the list elements to the left and evenly space them.
Code Explanation
In this section, I will explain you about the PHP code so that you can customize it as per your requirement.
We have an unordered list and some PHP code to generate list elements inside the container div (id="featured").
First line:
$featured_posts = get_posts('numberposts=3&category=<strong>1</strong>');
This PHP coding retrieves the post information using the function get_posts() and assigns the post data to $featured_posts variable. The get_posts() function accepts a single parameter in the form of a query string. Here, the first parameter is "number posts" and it sets how many featured posts we will be showing. For this tutorial, we have set its value to 3.
Now, the second parameter is "category" which we have set to 1 for this tutorial. The value of "category" parameter should be the ID of the category you are using for featured posts. The ID of your featured post can be found by going to the category management page. After hovering mouse over a category title, the status bar will show a link and the last number is the category ID.
Refer the following image:
Foreach Loop
First line:
foreach( $featured_posts as $post ) {</pre>
<pre>$custom_image = get_post_custom_values('featured_image', $post->ID);
This for each loop will loop through the posts that we have retrieved using the get_posts() function. The first line of for each loop retrieves the URL of an image using the get_post_custom_values() function and stores it in the $custom_image variable.
Here, the first parameter specifies the key of custom value that we are using, featured_image and the second parameter specifies the post from which we are getting the value.
Second line:
$image = $custom_image[0] ? $custom_image[0] : get_bloginfo("template_directory")."/images/no-featured-image.jpg";
This line does a quick check to see if an image was indeed specified. If no image was specified, then we assign “$image” variable to the URL of default image and if an image was specified, we use that image.
Last line:
printf('<li><a href="%s" title="%s"><img src="%s" alt="%s" /></a></li>', get_permalink($post->ID), $post->post_title, $image, $post->post_title);
The last line output the list elements and each element is an image that links to the featured post.
Creating Featured Posts:
Whenever you want to feature a post, assign it to featured category and then create a custom value with a key of featured_image and a value of the image URL. Your images should be of 233x130px size.
In this post, I have explained two ways for creating carousel and you can choose one as per your choice and technical knowledge of PHP coding. You can use these methods to make your website more attractive to the visitors through carousel and convert visitors into customers.
