Hosting Tutorial & Guide

How to Create an Image Slider in WordPress

updated on Dec 23, 2016
How to Create an Image Slider in WordPress Image sliders have been a modern design factor that is used on various kinds of sites, such as portfolio sites, online stores and photography sites, to display the featured information. To create elegant image sliders, you can certainly hire a designer or purchase a theme with the feature you need, but these are not always the proper solutions especially for the well-established websites.

If your website is based on WordPress, then things can be much easier. You can create your own image sliders at any time with the help of a simple plugin, without changing the theme. There are many good plugin choices, of course, and in below, we have selected a free one named Meta Slider which is easy-to-use.

Create an Image Slider with Meta Slider

Meta Slider is currently the most popular free slider plugin. It offers a simple interface which makes it easy and fast to create image sliders. You can deal with all image settings including the image caption and SEO on one page. Shortcode, template tag and widget are available for embedding sliders into your WordPress site.

Note that the free version only supports image sliders. If you want Vimeo/YouTube sliders or HTML sliders, you have to upgrade to the pro version or use another plugin like Smart Slider 3.

Smart Slider

Create Your Image Slider

Before starting creating an image slider with Meta Slider, you have to do the following things first.
  • Install the plugin on your WordPress site and activate it.
  • Prepare all the images you want to use in your image slider and upload them to your site's Media Library.
After completing these tasks, click on the "Meta Slider" menu item in WordPress admin area, and hit the "Add" button. Then you will get the following screen.

Add a New Slider

First of all, you can add a custom name for the slider to make it easy to recognize. Next, add your first slide by clicking on "Add Slide". As the Media Library is opened automatically, you need to select an image that you'd like to use as the first slide, and then click the "Add to slider" button on the bottom right.

Add Slide

As soon as the image is added to your new slider, you need to set up the image and customize the settings. Under the "General" tab, you can enter a caption for the image, and fill in a URL which you want to the image to link.

General Settings

Under the "SEO" tab, you are able to offer the image title as well as the image alt text to help with SEO. If you want to learn the differences between the two things, read this post.

SEO Settings

And under the "Crop" tab, you can choose a crop position from various options including "Top Left", "Center Center", "Bottom Left", etc. If your image is too large, it will be cropped automatically according to your requirements here.

Crop Settings

Besides these settings, there are some others. On the right column of the page, you will see four slider types among which you can select one as you like. If you don't know which to choose, then choose any one, and make a change later if necessary after previewing the slider.

No matter which slider type you use, you will need to define the height, width, navigation and arrows. But for different slider types, you are going to get different choices for the "Effect" and "Theme".

Slider Settings

In addition to the simple settings, there are also a number of advanced settings with which you are able to enable/disable auto play, change the alignment, enable/disable the carousel mode, etc. Since many options are available there, you need to spend a while to deal with them. However, make sure you know what you are doing when making changes.

Advanced Settings

Now, you can add more images to your slider by repeating the steps discussed above. After adding all the images, click on "Save & Preview" to preview your image slider.

Preview Slider

Display the Image Slider on Your WordPress Site

You get the following three options with Meta Slider in terms of displaying an image slider on your site.
  • Option A: Add the slider to a WordPress post or page by using a shortcode.
  • Option B: Add the slider to your theme by using a template tag.
  • Option C: Add the slider to your site's sidebar by using a built-in widget.
For Option A, you first need to find the shortcode for the image slider in the "Usage" meta box. Then, copy the unique shortcode, and paste it in any post or page that you want the image slider to show up.

Slider Shortcode

For Option B, you can get the template tag you need under the "Template Include" tab. Add the template tag to the theme file you want, and you will see the image slider shown in the right place. This method is more recommended for techies who know much about coding.

Template Tag

For Option C, you have to visit Appearance > Widgets, find the widget named "Meta Slider", and drag it to the sidebar. Give the widget a title, and select the slider that you'd like to display.

Slider Widget

After saving the widget, you will see the slider in your WordPress site's sidebar.

Slider in Sidebar