WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

How To Install a jQuery Carousel Slider in Any WordPress Theme

This tutorials provides all the code you can install to create a carousel slide show of images like this:

carousel slider

There’s 3 steps you need to take to make the carousel work in your theme.

  1. Add HTML to your editor or text widget. You will also need to upload your slider images to your media library and replace the image URL’s in the HTML code
  2. Add PHP to your functions file to load the jQuery and CSS files
  3. Upload the unzipped wpsites-flex-slider folder to your child themes root directory

All code should be copied from the view raw link in the Gist and pasted using a code editor like Notepad++.

Register for full access

Video Installation Guide for Beginners

The video screencast simply shows you how to follow the steps in this tutorial to install the code which creates the carousel slide show.

Notes

  • Tested on the Genesis Sample child theme by StudioPress.
  • The CSS may need tweaking when using on other Genesis child themes or non StudioPress themes.

Here’s the carousel used in the Twenty Fourteen theme:

carousel slide show

Related Tutorials

Reader Interactions

Comments

  1. Hello tutorials that are put real good and helped me a lot

    I have a query please your help would be appreciated

    I am trying to add the field SENT BY:

    The code is missing the word “sent_by:”

    I can add as sent by: 

    add_action('genesis_before_entry_content', 'sent_by');
function esent_by() {
if ( is_single() && function_exists('usp_author_link') ) {
    usp_author_link();
    }
}

    • No problem taking specific features from Bootstrap and using in a child theme.

      I know several Developers have taken more than just the column classes and used them in Genesis child themes no problem.

      Don’t think it would be any problem with taking Bootstraps Carousel and using it in Genesis either.

      Not sure about the plugin as i would prefer to take specific features and CSS directly from Bootstrap and add to a child theme.

      • Brad — First, you’re awesome to respond so quickly on a national “We’re Not Working” day (assume you’re in the U.S., yes?).

        Second — I think you’re suggesting some copypasta — take the appropriate css piece from Bootstrap and paste it into (ideally) a file that’s enqueued (probably not the right word, but I mean something like @include or whatev) to global.css. Amiright?

        Thanks!
        -DonO

Leave a Reply