Add Carousel Slider in Your Theme Manually

A member of WP Sites asked me how to install the jQuery and hook the slider in using PHP code.

In this tutorial, i’ll provide all the code in step by step instructions to install the the slider carousel which works like you see in the following video:

Upload Slider Folder

Download Slider Folder

The 1st step is to download the slider zip file, unpack it and upload the folder to your child themes root directory so its in this location:

Load Slider Files

Next step is to load all the files you need to make the slider work.

Add the following PHP code to your child themes functions.php file:

add_action( 'wp_enqueue_scripts', 'call_slider_script' );
function call_slider_script() {
if ( is_front_page() ) {
    wp_enqueue_script( 'call-slider-jquery', get_stylesheet_directory_uri() . '/slider/call-slider.js', array( 'jquery' ), '1.0.0' );
    wp_enqueue_script( 'slider-jquery', get_stylesheet_directory_uri() . '/slider/jquery.bxslider.js', array( 'jquery' ), '1.0.0' );
    wp_enqueue_script( 'slider-jquery-min', get_stylesheet_directory_uri() . '/slider/jquery.bxslider.min.js', array( 'jquery' ), '1.0.0' );
    wp_enqueue_style( 'slider-css', get_stylesheet_directory_uri() . '/slider/jquery.bxslider.css' );
    }
}

In the above code, we’ll only load the files on the front page.

Display Slides

Next step is to display the slider in your theme.

The 1st method enables you to hook in the HTML for the slides on the front page only by adding the following PHP code to the end of your child themes functions file:

Alternatively, you can create a new widget and add the HTML for the slider into a text widget populates in your slider widget area. Add the following code to your functions file if you prefer using a widget:

Once you create the new widget area, you can add the HTML for your slides wrapped in a div.