How to Create an HTML Slider in WordPress

Do you want to add HTML slides to your WordPress image slider? Sometimes you may need to customize your slides with your own HTML code, such as when adding quotes or multiple links. In this article, we will share how to create an HTML slider in WordPress.

Having HTML slides in your image slider allows you to add any HTML code you want, including images, hyperlinks, etc. so you can fully customize your slides. WordPress doesn’t allow you to do this by default, so you’ll need to install the Soliloquy plugin.

To create an HTML slider in WordPress, you’ll need to follow these 6 steps:

• Step 1. Install and activate Soliloquy Slider plugin
• Step 2. Create a new Soliloquy Slider
• Step 3. Select the file from other sources and choose HTML slides
• Step 4. Add your HTML code to the slide
• Step 5. Publish your HTML slider
• Step 6. Copy/paste the shortcode to display your slider in WordPress

By the end of this tutorial, you will have a slider with your custom HTML code, like this:

Ready to get started? Let’s go!

Step 1: Install and Activate Soliloquy Slider Plugin

First thing you need to do is install and activate the Soliloquy WordPress slider plugin. For help with this step, check out this guide on how to install Soliloquy.

Step 2: Create a New Soliloquy Slider

To create a new slider in Soliloquy, you need to go to Soliloquy » Add New. Give a title to your slider, and click on the Select Files From Other Sources button.

Step 3: Select the file from other sources and choose HTML slides

A popup will appear. Click on Insert HTML Slide from the left-hand side. You will see the field to add your HTML Slide Code.

Step 4: Add Your HTML Code to the Slide

You can add your HTML code in the HTML Slide Code field. We recommend testing your code outside WordPress before adding it in HTML slide, so you can be sure that it will look exactly the way you want.

Click on the Insert into Slider button and your HTML slide will be added. You can add as many slides you need to your HTML slider.

Step 5: Publish Your HTML Slider

Once you are done adding your HTML slides, simply click on the blue Publish button.

Step 6: Copy/Paste the Shortcode to Display Your Slider in WordPress

After publishing your image slider, you’ll need to copy the shortcode from the Soliloquy Slider Code widget.

Go to Post » Add New or edit an existing post. Go ahead and paste the shortcode in the visual editor. Make sure to update the post so your changes are saved.

That’s it! You can see a demo HTML slider below:

We hope this article has helped you to learn how to create an HTML slider in WordPress. You may also want to check out our guide on how to create a WordPress slider with a contact form.

If you like this article, then please follow us on Facebook and Twitter for more free WordPress tutorials.

Published by Waseem Abbas

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