Disclosure: This post may contain affiliate links. Purchasing a product through one of these links generates a commission for us at no additional expense to you.
Want to add a slider to your homepage?
In this post, you’ll learn:
- How to create sliders in WordPress
- How to add an image slider to any page
- How to include a slider on your homepage only
The slider will work on your site regardless of what theme you have installed.
How to Add a Slider to Your Homepage
Let’s cover how to add a slider to your homepage, step-by-step, starting by adding the plugin you’ll need.
Install & Activate Meta Slider
First, install and activate the excellent Meta Slider plugin on your site.
Meta Slider is highest-rated slider plugin on wordpress.org, and it’s first on my list of recommended sliders (free and paid).
Go Pro: Meta Slider’s free version is fantastic and feature-rich, but there is also a Pro version with video sliders, thumbnail navigation, and more.
Create a slider
Once activated, you’ll find a new Meta Slider settings menu in your dashboard. The menu will initially be blank prompting you to create your first slider.
Clicking the plus button will create your first slideshow. Once you have a slider created, you’re ready to begin adding images.
Add images to your slider
Click the Add Slide button to reveal the media library. You can upload a new image or select any of your existing images.
Add a few images now. They don’t have to be your final images. Just add a few slides so that you can follow along with the rest of the tutorial.
Choose your slider
Meta Slider includes four different sliders. The four sliders are:
- Flex Slider
- Responsive Slides
- Nivo Slider
- Coin Slider
The only slider I wouldn’t recommend is Coin Slider since it is not responsive. The other three are all great.
You can select the slider you’d like to use in the right-sidebar.
Customize the slider
Once you’ve added some images and chosen your slider, the next step is to customize the appearance and functionality of the slideshow.
Meta Slider includes basic configuration options and some advanced settings as well. I’ll leave it up to you how you want your slider displayed, but here’s a preview of the options available:
One tip: using the stretch to 100% width is usually a good idea because it will make the slider adapt to the width of the screen.
The free version of Meta Slider includes a limited number of slide transition effects, but Meta Slider Pro adds a lot of cool new effects.
Create a page for your homepage
Your site is currently displaying a Page or your latest posts.
If you are showing your latest posts and you don’t know how to switch to a regular page, follow this tutorial to learn how first.
Once you have a page showing on your homepage, continue to the next step.
Add the slider to your homepage
The final step is to add the slider you created to the page you’re displaying on your homepage. Luckily for us, Meta Slider makes this very easy.
Navigate to the page editor, and you’ll notice there is a new Add Slider button above the editor.
Place your cursor where you want the slider embedded and press the Add Slider button to open the slider selection menu.
Select your newly created slider.
Once you press the Insert slideshow button, you’ll see a shortcode added to the editor, like this:
The shortcode doesn’t look like much in the editor, but once viewed on the site, it displays the slider you created with Meta Slider.
If you’re not familiar with shortcodes, you can review our shortcode tutorial here.
View the page now, and you will see your slider embedded on your homepage.
Since Meta Slider lets you embed sliders with a shortcode, you can easily add any slider you create to any page. In this case, we’ve added a slider to the homepage only.
Meta Slider also includes a widget so that you can place sliders in sidebars and other widget areas too.
Show off your homepage slideshow
How did it go? Are you ready to show off your new slider?
While there are many slider plugins available, I believe Meta Slider is the best.
If you’ve never used shortcodes before, I hope this guide opened your eyes to the possibilities available. Meta Slider’s shortcodes allow you to embed sliders anywhere on your site.
If you have a question about adding image sliders or using slideshow plugins with WordPress, please post a comment below.
