WP SITES

Log in

How To Install a jQuery Carousel Slider in Any WordPress Theme

—

by

Brad Dalton

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

Comments

8 responses to “How To Install a jQuery Carousel Slider in Any WordPress Theme”

  1. Wilfredo Avatar
    Wilfredo

    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:
    [code]
    add_action(‘genesis_before_entry_content’, ‘sent_by’);
    function esent_by() {
    if ( is_single() && function_exists(‘usp_author_link’) ) {
    usp_author_link();
    }
    }
    [/code]

  2. dono2081 Avatar
    dono2081

    HI Brad — love this integration.
    Have you had experience integrating the carousel found within the Bootstrap framework into WordPress? Would you mind sharing your experiences or opinion about how well the Genesis Framework + Bootstrap Framework would play together on the same site?

    Some probably needless resources:

    http://getbootstrap.com/
    and
    https://wordpress.org/plugins/wordpress-bootstrap-css/

    1. Brad Dalton Avatar
      Brad Dalton

      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.

      1. dono2081 Avatar
        dono2081

        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

        1. Brad Dalton Avatar
          Brad Dalton

          Currently in Asia.

          Did you want to install the Bootstrap Carousel in a Genesis child theme?

          Or another feature?

          1. dono2081 Avatar
            dono2081

            Bootstrap Carousel in a Genesis child (Epik).
            -DonO

        2. Brad Dalton Avatar
          Brad Dalton

          Bootstraps Carousel also uses LESS.

          Is this something you want to add to your theme?

          1. dono2081 Avatar
            dono2081

            probably yes; i converted my theme’s css to sass, so it would be good to get an understanding of LESS.

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.