1. Code
  2. WordPress

How to Add a Slider to WordPress With a Free Plugin

Read Time:8 minsLanguages:

When used properly, sliders can help make a website appear more dynamic and lively while at the same time providing more information in a limited space.

If you are looking to add a feature-packed yet free slider plugin to your WordPress website, this tutorial will show you how. I'll give you an easy-to-follow step-by-step guide to using the free Smart Slider 3 plugin.

Smart Slider 3 Overview

Before we dive deep into this tutorial, let me provide a brief overview of the plugin and its features so that you can decide if it has everything that you want in such a plugin.

  1. The sliders you create will be fully responsive and optimized for SEO, and they will work with all WordPress themes.
  2. You can edit each slide using a user-friendly interface and see the live preview in real time.
  3. With a little creativity, you can create your own custom slides with unique designs. You have full control over the appearance of all the headings, text, buttons, etc. You can change everything from the typography to the border width, background color, etc.
  4. The sliders are mobile-friendly. They will look good on devices of all screen sizes.
  5. People who don't want to start from scratch can simply use the provided templates and quickly set up their own slider by only changing the images.

It offers many more features which can be found on the plugin page. Smart Slider is not limited to just images and videos. You can use it to create sliders for posts, among other things.

Editing Individual Slides

After you have installed and activated the plugin, the dashboard should look like the image below.

Smart Slider Welcome ScreenSmart Slider Welcome ScreenSmart Slider Welcome Screen

We will create our first slider using pre-built templates. To do that, click on Template Library and then choose Free on the next page. Now, go to the third template called Image Slider and click on Import. This will add the slider to your dashboard.

Importing the Image SliderImporting the Image SliderImporting the Image Slider

On the dashboard page, you can now hover over the imported template and click on the edit button to start editing the slider.

Editing the SlidesEditing the SlidesEditing the Slides

First, we will edit the slides and change the images and captions. For this, hover over each slide and then click on the edit button that appears. You can also duplicate, delete, or set a particular image as the first slide.

You should now see something similar to the image below.

Image slide being editedImage slide being editedImage slide being edited

The background image can be changed by clicking on the Background button. This will show you a number of options. You can either make the background another image or set it to be a solid color or gradient.

Turning the overlay switch on in the above image will overlay the image background with a semi-transparent color or gradient. If you only want to show a solid color or gradient on a specific slide, without any images, simply click on the Color button and select the colors you want to use for the gradient.

Image Slides Background OptionsImage Slides Background OptionsImage Slides Background Options

Once you have changed the image, you can easily change the text White Brown Cow by clicking on it. This will give you a couple of options like adding a link or changing the background color, font style, size, color, etc.

Changing the Slide TextChanging the Slide TextChanging the Slide Text

Try playing around with different values and options to see how unique and different your results can be based on different settings.

Chaging the Caption AppearanceChaging the Caption AppearanceChaging the Caption Appearance

As you can see in the above image, you get full control over the appearance of the caption. You can even click on the More button to add custom CSS to further customize the look.

What if you want to add more elements on your slide?

For instance, let's say that we wanted to tell readers a little bit more about tigers. In this case, you could click on the green plus button in the top left corner to add more elements like headings, text, and images over the slide.

Expanded captionsExpanded captionsExpanded captions

After making all the changes, you can instantly preview what the slide would look like on different devices by using the button available at the top. There are also undo and redo buttons in the top bar so that you can undo any changes you don't like.

Once you are satisfied with the results, simply click on the Save button to save them permanently. You can change the content and appearance of all other slides in a similar manner.

Slide preview and Save ButtonSlide preview and Save ButtonSlide preview and Save Button

Changing the Slider Settings

After making changes to individual slides, you might also prefer to change the settings that affect the slider as a whole. To do so, simply click on the slider you want to edit on the dashboard page and scroll down to the edit section. Here is a screenshot of the page where you can edit all the slider options.

Slider SettingsSlider SettingsSlider Settings

Let's begin by changing the appearance and position of the arrows. You can choose to either show no arrows at all or show them with a background or without any background. The first option will add a dark overlay under the arrows to make them stand out from the image background. You can choose from different icon shapes and only show them when users hover over the slide by turning on the Shows on hover option. You can also choose from 13 different predefined positions for the arrows.

Changing Arrows in Smart SliderChanging Arrows in Smart SliderChanging Arrows in Smart Slider

You can also show bullets with each slider so that users can jump directly to an image at a particular position. There are a couple of options that you can turn on, like only showing the bullets on hover or showing the slide thumbnail with each bullet. In this case, I have turned them off because our slider will have thumbnails below each slide, making bullets redundant.

Changing Slide Bullets in Smart SliderChanging Slide Bullets in Smart SliderChanging Slide Bullets in Smart Slider

You can show thumbnails permanently by turning off the Shows on hover option. The width and height of the thumbnails are set to 100 px by 60 px by default. This will generally look good—the thumbnails are not big enough to be distracting but are big enough to show a quick preview. You can also align the thumbnails to left, center, or right.

Changing Thumbnails in Smart SliderChanging Thumbnails in Smart SliderChanging Thumbnails in Smart Slider

More Slider Settings

There are some other general settings that you can change, like the name of the slider, its dimensions, and whether users can navigate through the slides using a keyboard. You can also set an animation for the transition between different slides and specify an animation duration.

Changing General Smart Slider SettingsChanging General Smart Slider SettingsChanging General Smart Slider Settings

There are a few other settings that you can change, like setting the slider size and limiting its width on desktops, tablets, or mobile devices.

Changing the Slider SizeChanging the Slider SizeChanging the Slider Size

Finally, you can publish the slider using one of three different methods. 

The first is to directly add the shortcode in your posts and pages. The shortcode provided by the plugin already contains that right slider ID embedded into it. All you have to do is copy and paste it to the desired location. 

The plugin also adds an icon to the built-in WordPress editor that lets you easily add a slider to any page or post. 

Finally, you can integrate the slider in your theme using a PHP snippet to emit the slider shortcode.

Publishing the SliderPublishing the SliderPublishing the Slider

Final Thoughts

In this tutorial, we used the free Smart Slider 3 plugin to create an image slider. However, you can also use it to create sliders for WordPress posts based on a category or tag. Try playing around with all the features of this plugin to see if it fits your needs.

People who are looking for more features should consider taking a look at some of the popular WordPress Slider plugins available on CodeCanyon. 

Also, if you want to use custom plugins but you're not comfortable tinkering with code and prefer to have someone do it all for you, consider managed WordPress hosting. Thanks to Envato's partnership with SiteGround, you can get up to 60% off managed WordPress hosting.

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.