It a complete tutorial for wordpress beginners about “How to add slider to website?“ I am going to show you step by step process of adding slider in wordpress website header/widget area/pages.

Recently I have published a list of Responsive WordPress Image Slider plugins, you can check out this list to find out the best plugin for your website.

For this tutorial I am using WonderPlugin Slider Lite. This is a responsive wordpress plugin for adding images and video sliders into website. Also it’s a flexible plugin, which means you can add slider any where you want to add on site. For instance, in this tutorial I’ll add image slider on the header, in post, pages and in widget area.

If you wanna use plugin that I am using please download plugin here or you can do a search on wordpress for “WonderPlugin Slider lite by wonder plugin”.

I have chosen this plugin because its responsive so I don’t need to worry about how this gonna look on mobile devices. It allows me to add videos too in slider and it’s easy to setup plugin.

If you like to use any other slider plugin then you can use. Most of the steps will be the same on other plugin, just interface will be different.

Ok then, now let’s start this.
 

Slider Plugin – Installation and Setup

For adding slider on website we have to install the plugin to our wordpress account. If you have chosen your plugin then install it to your wordpress website or if you have a downloaded file of plugin then upload it here “Plugins > Add new ”.

You need to upload the .zip file here and after uploading install it.

Now to setup slider plugin you need to go to the plugin page. If you can find your installed pluin in the left site tools list, then check it out under Settings.

The plugin that I am using will show in list of tools on the left side of your wordpress dashboard. Under this plugin we have four sub pages where you can manage your slider settings.

• Overview
• New Slider
• Manage Sliders
• Settings

Overview:
In overview, you can check out the all features details, plugin updates news and contact us details. This page giving you the important information about this plugin like – What you can do with the plugin?

It’s a get started page, where you can create first slider, manage existing sliders if you have any, check out help document for plugin help guide and can Upgrade your account to premium to unlock premium features of plugin.
 
New Slider:
Here you can create your new slider. Add images/videos to slider, choosing slider layout design and defining slider size these entire setting can be done here.
 
Manage Sliders:
You can edit or modify your existing sliders under manage sliders.
 
Settings:
This page contains advanced slider settings like placing js script code on site and administrator role.
 

Create First Image Slider for WordPress

For creating our first slider we have to go to New Slider and here we will add our images and videos that we wanna show in slider.

As you can see in the screenshot below, we have to give a name and have to setup slider dimensions (Width & Height).

Note: You have to create sliders with different width and height for widget, page and header. As the slider area will be different for all.

Images & Videos: Now upload images. You can also add videos here from your computer or from Youtube or Vimeo if you want. Also add title and description text for images that will show on image in slider (Check out in preview image below). You can link slider images too.

Skin: Choose a skin layout design. Only three free slider layout skins are available to use in free account, you can get more skin in premium account.

Options: Now here you can set slider options, transition effects, skin option, text effects, lightbox options and advance slider options. This part is important so please check out all the settings here in option section. This will help you to make slider design to look good.

Preview: Check out same time slider preview here before making changes on website.

If everything looks fine in slider preview, you can save you first slider now. When you save it this will provide you embad shortcode and php code that you have to add in website code to show this slider there.

 
Related Stuff:

• Monetize your blog with Infolinks and increase your blog revenue
• How to make menu bar static in WordPress website

Adding Slider to Widget Area

It’s easy to add slider to widget area of our website in wordpress. We just need to add the shortcode in the widget that we have got for our slider design.

Add text field to widget area. Copy shortcode there and that’s it.

Adding Slider to Pages/Posts

The process is same as we did for widget section. Add shortcode inside you page or post where you like to show your slider.
 

Adding Slider in Website Header

Adding slider on website header can be a bit tough if you aren’t familiar with codes. You have to add slider PHP code this time to you header.php file.

Before adding slider php code to your header.php file makes sure that you have got the header.php file backup. Having file’s backup will help you to restore the previous codes in case slider code mess up things on website.

You have to add slider code right the end of the header.php file. Check out image above to check where you add slider php code in header.php file.
 
Still if you have any question please add them in comment section below. I’ll try my best to answer them as soon as possible.