Soliloquy Blog

WordPress slider tips, Tutorials and Resources.
WordPress Slider with Side Navigation

How to Create a WordPress Slider with Side Navigation

by Waseem Abbas on November 20, 2017

Do you want to add an image slider on your site with customized navigation? Sometimes your WordPress theme requires a certain type of slider that need different settings. In this tutorial, we will share how to create a WordPress slider with side navigation.

You may know that the default WordPress installation doesn’t have any image slider settings. It is recommended to use a slider plugin like Soliloquy that has great features. It allows you to add beautiful sliders with navigation and other options.

To create a WordPress slider with side navigation, you’ll need to follow these 5 steps:

  • Step 1. Install and activate Soliloquy slider plugin
  • Step 2. Install and activate the Thumbnails addon
  • Step 3. Create an image slider and add photos
  • Step 4. Go to thumbnails settings to set the position
  • Step 5. Display the WordPress slider with side navigation

By the end of this tutorial, you’ll be able to create an image slider with side navigation that will look like as shown in this image below:

WordPress Slider with Side Navigation

Ready to get started? Let’s go!

Step 1: Install and Activate Soliloquy Slider Plugin

To create a slider, you need to install and activate Soliloquy plugin on your WordPress admin backend.

Soliloquy website

You should check out this guide on how to install Soliloquy in WordPress.

Step 2: Install and Activate the Thumbnails Addon

Once this plugin is activated, you need to go to Soliloquy » Addons to install and activate the Thumbnails addon.

To access this addon, you must have Soliloquy Developer or Master license. Don’t have the same? Simply upgrade your license from here.

Thumbnails Addon

This Soliloquy addon allows you to add the side navigation on your WordPress slider.

Step 3: Create an Image Slider and Add Photos

Now go to Soliloquy » Add New and give a title to the new slider. Simply drop the photos in the Native Slider section.

Add New Slider

For more basic settings, you should check out this complete guide on how to create an image slider in WordPress.

Step 4: Go to Thumbnails Settings to Set the Position

After adding the photos, you need to scroll down to Thumbnails tab and check mark on Enable Slider Thumbnails.

Enable Slider

It will open up the settings below. In the Thumbnail Position dropdown, you need to select the position for the slider navigation.

Thumbnail Position

You can add the thumbnail navigation on top, bottom, left or right side of the slider.

Step 5: Display the WordPress Slider with Side Navigation

Once you are done with the navigation settings, hit the Publish button on the slider and copy the shortcode from the Soliloquy Slider Code widget.

Copy Shortcode

Next you should go to Posts » Add New or edit an existing WordPress post. In the visual editor, you need to paste the shortcode.

Paste Shortcode

Make sure to Update/Publish your post. Go ahead and visit your website to see the WordPress slider with thumbnail navigation that will look like as shown in this image below:

WordPress Slider with Side Navigation

We hope this tutorial has helped you to learn how to create a WordPress slider with side navigation. You may also want to check out our guide on how to create a WordPress slider with text navigation. In case, your slider images are not ranking in the search engines, you should check out this ultimate WordPress SEO guide.

If you like this tutorial, then please follow us on Facebook and Twitter for more free WordPress guides and resources.

Waseem Abbas is a content writer for SoliloquyWP and Envira Gallery.

Leave a Reply

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.