The power of a Content Management System like WordPress relies on it’s customizability and extendability.

In some scenarios, you may want to utilize a horizontal carousel on a page or a post to display related or associated content.

For instance,

  • Case studies / use cases for a product can be displayed in a carousel
  • Up-sells on a product page can be displayed in a carousel
  • Testimonials for a product or a service etc.,

While there may be multiple ways of implementing this feature, in this article, I will walk through how to create a horizontal carousel for a post or a page by utilizing custom fields. Using this approach, you can create a horizontal carousel for each post or page and manage the items in the carousel by updating custom fields.

carousel demo - custom fields

To implement the carousel, I will be using FlexSlider which is available for free under the GPLv2 license. Why FlexSlider? I have used in the past, it works well and, it is responsive.

Structure of the horizontal carousel

For the purpose of this article, I am considering that each item has a name and a corresponding image. Additional fields like hyperlink, description etc., are optional and can be included in the logic if need be.

Following are the names of the custom fields used in this article,

  • Item name: citem-name
  • Item image: citem-img
  • Item Link: citem-link

carousel - custom fields

Approach and Planning the Logic

While carousels are used when there are more 3 or 4 items to be displayed in a section, not all pages or posts on a WordPress site may have atleast 3 or 4 items in the carousel.

Taking this into account,

  • We will use FlexSlider if there are more than 4 items in the carousel
  • If there are less than 4 items then, we will simply display the items in a row

The carousel item’s name, image path and hyperlink will be entered in the Custom Fields section (available underneath the editor).

Initialize the variables

	$upload_dir = wp_upload_dir();
	$uploads_baseUrl = $upload_dir['baseurl'];

	$postid = get_the_ID();

	$citemName_values = array();
	$citemImg_values = array();
	$citemLink_values = array();

Initially, we store the path to the Uploads directory and the Post ID to corresponding variables so that tey can be re-used later. Subsequently, we initialize three arrays for the collections of carousel item names, images and links.

Query the Custom Fields

	$query_citemNames = "SELECT meta_value FROM wp_postmeta WHERE post_id = '$postid' AND meta_key = 'citem-name' ORDER BY  `wp_postmeta`.`meta_id` ASC";
	          $count_citemNames = $wpdb->query($query_citemNames); 
	          for($i = 0; $i < $count_citemNames; $i++) { 	            $row_citemName = $wpdb->get_row($query_citemNames, ARRAY_N, $i);
	            array_push($citemName_values, $row_citemName[0]);
	          }

We query the database to get the entries for carousel item names and push each entry to the array we initalized earlier.

Simiarly, we query the database to get the entries for ‘carousel item images’ and ‘carousel item links’.

		$query_citemImgs = "SELECT meta_value FROM wp_postmeta WHERE post_id = '$postid'  AND meta_key = 'citem-img' ORDER BY  `wp_postmeta`.`meta_id` ASC";
          $count_citemImgs = $wpdb->query($query_citemImgs);           
          for($i = 0; $i < $count_citemImgs; $i++) {             $row_citemImg = $wpdb->get_row($query_citemImgs, ARRAY_N, $i);
            array_push($citemImg_values, $row_citemImg[0]);
          }

          $query_citemLinks = "SELECT meta_value FROM wp_postmeta WHERE post_id = '$postid'  AND meta_key = 'citem-link' ORDER BY  `wp_postmeta`.`meta_id` ASC";
          $count_citemLinks = $wpdb->query($query_citemLinks);           
          for($i = 0; $i < $count_citemLinks; $i++) {             $row_citemLink = $wpdb->get_row($query_citemLinks, ARRAY_N, $i);
            array_push($citemLink_values, $row_citemLink[0]);
          }

           $size = count($citemName_values);

Now that we have the arrays with carousel item names, images and links. All we need to do is, loop through the items to display each item’s image, name and the corresponding link.

Loop though the custom fields to display the carousel

if($size > 4) { ?>

For FlexSlider to work, make sure to enqueue the CSS and jquery.flexslider.min.js files in WordPress. Also, you need to specify the selector for your carousel’s container and, any custom options you need for FlexSlider like animation type, item width, item height etc., You can place this JavaScript snippet as part of your post/page template or in a JavaScript file, whichever is appropriate for your project.

Important Note

Note that we could have just looped through the custom fields by using functions like get_post_custom_keys, without having to use custom queries. The reason for using custom queries is that, when we loop through the custom fields, the order in which you see the list of custom fields in the WordPress Dashboard may not match the items displayed/retrieved on the frontend because WordPress “doesn’t sort the custom fields values by the meta_id”. Hence, we use custom queries and sort the results by ‘meta_id’ to make sure the the carousel item’s name, image and link are grouped correctly.

Pros and Cons of this approach

Pros:

  • Apart from the carousel plugin you wish to use, there are no other dependancies.
  • You can implement this once within your post/page template and re-use on any number of pages without having to make any changes.
  • If you are exporting data in future, this approach works well as we are making use of WordPress core features.
  • With a bit of work, you have the flexibility to extend this approach to add other custom fields like, item ALT tag, item TITLE tag etc.,
  • If you choose to use FlexSlider, it takes care of the responsive aspect of the design.

Cons:

  • You would have to use copy/paste to change the order of custom fields. There is no (easy) drag and drop functionality
  • A WordPress Admin has to upload images via the ‘Media Upload’ functionality and copy/paste the image paths to the corresponding custom fields and subsequently, check the front-end to make sure that the images are being displayed accordingly.

Notes:

  • Pay attention to the prefix wp_ used in the custom queries.
  • The word ‘citem’ has been used throughout the article and it refers to ‘carousel item’.
  • Feel free to use a differnt plugin to display the carousel or update FlexSlider’s options to suit your project needs.

References