Insert A Slideshow Into Your WordPress Theme Easily

Mostly, a slideshow is an important part of any theme, it sometimes represents various important segments of a website and also improves look and feel. But It is not available for every theme.

So I am writing a very simple code to insert a slideshow into any WordPress theme. However, you can find various resources and plugins on the internet for this purpose.

In fact, this slideshow is based on jQuery taken from snook.ca. Here I have only tried to insert this slideshow into a WordPress theme.

Now if you want to do the same follow the steps below.

1. Create a JavaScript file in js folder and add the below code.

 jQuery(function(){
    jQuery('.fadein img:gt(0)').hide();
    setInterval(function(){
      jQuery('.fadein :first-child').fadeOut()
         .next('img').fadeIn()
         .end().appendTo('.fadein');},
      3000);
});

2. Then create a separate style sheet for styling with below classes.

.fadein { position:relative; width:500px; height:332px; margin-bottom:50px; }
.fadein img { position:absolute; left:0; top:0; }

3. Now, look at the below function, it will load above two files. You need to add this in your theme's functions.php

function add_my_script() {
    wp_enqueue_style( 'custom-style1', get_template_directory_uri() . '/css/slideshow.css' );
    wp_enqueue_script(
      'custom-script', get_template_directory_uri() . '/js/slideshow.js',
        array('jquery')
    );
}

add_action( 'wp_enqueue_scripts', 'add_my_script' );

I have linked above function with wp_enqueue_scripts hook, so that it will enqueue both files on the frontend.

4. Now in the last step we will add html for this slideshow, as usually we add it in template, but here I have loaded it via jQuery. I have taken images from remote location, but it can be taken from website directory.

jQuery(document).ready(function(){

     jQuery( "#main" ).before( '<div class="fadein" ><img src="http://cdn.enjoyourholiday.com/wp-content/uploads/2013/01/The-High-Hut.jpg"><img src="http://www.priejuros.lt/uploads/hotel3703/sveciu-namai-pirtis-43177.jpg"><img src="http://static.paradizo.com/images/large/46e8093e3ae5c22d013b0632e7a60302/46e8093e3ae5c22d013b0634f3790304.jpg">'  );
   
    })

In this I have used #main as a selector and instructed to add the HTML before the div that has an id "main".

I would like to tell another way for adding HTML, that is Shortcode. For this, firstly create a function that return HTML structure for the slideshow, then create a shortcode for using it. Place this code in the functions.php file.

function slideshow()
{
    return '<div class="fadein" ><img src="http://cdn.enjoyourholiday.com/wp-content/uploads/2013/01/The-High-Hut.jpg"><img src="http://www.priejuros.lt/uploads/hotel3703/sveciu-namai-pirtis-43177.jpg"><img src="http://static.paradizo.com/images/large/46e8093e3ae5c22d013b0632e7a60302/46e8093e3ae5c22d013b0634f3790304.jpg">' ;
}

add_shortcode('newslide', 'slideshow');

Now if you want to display the slideshow from template/php file, insert the following code.

<?php echo do_shortcode( '[newslide]' );?>

Or for WordPress page or post use it like below.

[newslide]

That's it.

This is an effortless and fast way to insert a slideshow in any WordPress theme with minimal code. Hopefully this outline will help you.