Add a slider to the home page of a WordPress website

Visual media is the key to conversion. It’s a fact.

The more images and videos you have on a website, the more emotion and interest you will elicit out of your audience and the more conversion you will receive.

Slider images are a great way to provide an initial wow factor as people view your website. Sliders offer big landing page images and they also offer the opportunity to sell more than one product or highlight more than one feature. It’s like having multiple images in one!

All of this is great on paper, but how do you add a slider to the home page of a WordPress website?

Set the “Front Page” in WordPress

As this tutorial is going to take you from point A to point Zed of setting up an image slider on the home page of a WordPress website, we must start by assigning a front page in WordPress.

By default, WordPress is set to display the most recent 10 blog posts on the front page. If you are looking for a large slider image, chances are good you don’t want your front page to simply show blogs.

Let’s change that.

Create a new page in WordPress and simply name it “Home”.

Publish this page.

Now, go to Settings > Reading in your WordPress dashboard and click on the radio button to assign a specific page as your “front page”. From the dropdown that is now selectable, make sure that your “Home” page is selected as the front page and save your changes at the bottom of the screen.

Get a slider plugin

Step 1 is out of the way. Now it is time to select a slider plugin.

We have spent a lot of time in our web shows and also in our blog travels comparing slider plugins for you.

The simple verdict?

Soliloquy is our favorite WordPress slider plugin. There is a free and a pro option available for Soliloquy and we will provide help here to get the plugin working on your front page whether or not you have the professional version. That being said, the pro version is easier to manage.

Soliloquy Lite

To install the free version of the plugin you can simply search for it in the WordPress plugin repository or through the WordPress dashboard. Go to Plugins > Add New and search for “Soliloquy”. From here, you can install Soliloquy Lite directly into your website.

Soliloquy Pro

If you are getting the pro version, you will want to visit the Soliloquy site and download the plugin there. From here, you can go to the Plugins > Add New section and choose the “Upload” option. Make sure you are uploaded the .zip version of the plugin (the one you get with purchase).

Set up a home page slider using WordPress

First we must create the slider. Go to Soliloquy from the left sidebar of the WordPress dashboard and create a new slider with a name that is easy to remember. Once you have done that, you will be upload photos to the slider that you would like to use. Make sure you publish and update your slider as you make changes.

You can either choose one photo or add multiple photos to showcase multiple options/products and then tweak the settings below the images to determine how the slider is displayed and set up.

Once you have created the slider, you will want to actually put it somewhere.

The default way to add a slider to the homepage is to go to your created “Home” page in the WordPress dashboard with Soliloquy installed and activated. Select the option “Add Slider” which is conveniently placed next to the “Add Media” button (which you may be familiar with) while editing your page. This will open up a window where you select the slider — which you have previously created — into the page or post!

Now, your page will display this slider image in the content area. If you are using a sidebar, it will not display over the sidebar.

Using our themes to make it easier

If you want the front page slider to extend across the full width of the page, you can towards Slocum Themes. As you may know from reading our other resources and tools, we are all about making things easier for the user with our free themes.

Sliders are no different.

As we know sliders are very popular with our community. So we offer a Widget Area with our themes titled “Front Page Slider” to place slider images.

 

With Soliloquy Pro, you are given the option to grab their Soliloquy widget under Appearance > Widgets and drag it right into the Front Page Slider area.

Now just open up the Soliloquy widget and select the slider you want to display from the dropdown.

Interested to see what the finished product looks like? You already did!

The featured image (at the top of this article) shows a Soliloquy Pro slider being displayed using exactly these steps on the front page of a real website!

If you are still using Soliloquy Lite, you can also paste the shortcode of the slider (provided in the Soliloquy slider’s options) into a text widget. That widget can then be placed in the Front Page Slider widget area for the same effect.

Optimize your images too

One of the bigger ranking factors of your website is page load speed.

Images. They can take up a lot of space if you are not careful. And when you talk about sliders, now you are talking about crazy large images. Make sure that you are optimizing images using tools like WP Smush.it and ImageOptim.

Follow this article to look into other ways to optimize your images.

Did you find this helpful?

Let us know if you found this article helpful or if you have any further questions in the comments below. If you have more questions about the functionality of our themes with the image slider, feel free to contact us as well.