Sridhar Katakam

Genesis and WordPress Tutorials

Custom Carousel in WordPress using bxSlider with a backend UI using CPT

by 2 Comments

In this article I show how we can set up a carousel (with 3 images scrolling at a time) using bxSlider in WordPress.

We shall use Types (free plugin) to create a 'Carousel Images' CPT (Custom Post Type) and a 'Video URL' custom field, then use Views (commercial plugin) to loop through the CPT entries, pull the title, content, featured image and custom field value and place the generated shortcode wherever the slider is required.

Each image in the carousel will be linking to a YouTube video whose URL will be entered in the backend. We shall use Foobox (commercial plugin) to display the YouTube video in a lightbox.

Finally we shall use genesis_after_header hook in Genesis to display the carousel on homepage (shortcode or widget can be used in any WordPress theme).

Screenshot:

bxslider-carousel

Screencast:

Step 1

Install and activate Types. Add a CPT like this:

Plural name: Carousel Images
Singular name: Carousel Image
Slug: carousel-images

Tick 'Thumbnail'.

adding-carousel-images-cpt

Step 2

Go to Types > Custom Fields. Add a new custom fields group called say, 'Additional Info', set it to be displayed for 'Carousel Images' content types, add a URL field, configure it like below and save.

adding-custom-fields-group-video-url

Step 3

Add a new custom image size for the carousel images by adding the following in child theme's functions.php:

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • Thank you for a detailed tutorial but there are few things that don’t make much sense:
    Step 5: “Create a file named jquery.bxslider.min.js to the same location” would overwrite main functionality of bxSlider.
    Step 7: “install Views” – it costs $95 – with that amount of money you can buy 3 to 5 good carousel plugins.

    Reply
    • >