Start a FREE 7 day trial! Get training videos and books, plus expert support:  

WordPress Tutorials and Blog Posts

How to Create a Frontpage Slideshow in Wordpress

This tutorial will walk you through step by step how to create a slideshow for the frontpage of your Wordpress site. We're going to use a plugin called (very logically) Frontpage Slideshow. Here's how to set it up correctly:

Install

First, go to the admin area of your WordPress site, click Plugins, then Add New and search for Frontpage Slideshow. Once you've found it, click Install now:

 tutuploadsmedia_1301656708759.png

Activate

tutuploadsmedia_1301605499708.png

Click on Activate Plugin

 

Add Images to Library

tutuploadsmedia_1301637364176.png

Go to Media >> Add New >> Select Files and add all the images that you need for the slideshow

 

tutuploadsmedia_1301637632033.png

Next we are going to add the images to the respective posts. Go to Posts >> Any of Your Posts that You Want to Use

 

tutuploadsmedia_1301638018810.png

Go to the Frontpage-Slideshow Options >> Slide picture and select an image. Also configure the other options such as Title, slide comment, etc.

 

tutuploadsmedia_1301638603324.png

Update when finished. Repeat the above steps for the rest of your images.

 

Configure Plugin

tutuploadsmedia_1301638909932.png

Go to Plugins then Configuration Page for Frontpage-Slideshow.

 

tutuploadsmedia_1301615151309.png

Click on About categories and posts, let it expand, and then select your categories and the order in which you want to display the posts.

Most of the settings are self explanatory and you should not have any issues. Use the same basic procedure (in the paragraph above) to configure the plugin to your liking in the rest of the settings: Click on the heading, let it expand, and then configure.

I will highlight some of the trickier parts for beginners.

 

Configuration Tips for Beginners

tutuploadsmedia_1301615882720.png

For the About colors and opacities area, HTML and CSS colors are defined in Hexa-decimals. It's a bit tough to figure out so here but you can use w3school's colorpicker.

 

tutuploadsmedia_1301627493287.png

In the About background images / textures and loader animation area, we can select which images to use for the editor.

 

tutuploadsmedia_1301627222264.png

Once you have some images, you can drag and drop them by clicking and holding on the image, scrolling over the "Drop here the image you want to use as...", then letting go once over the area.

tutuploadsmedia_1301627595154.png

Enable the Plugin

tutuploadsmedia_1301639103866.png

The slideshow will automatically be configured to go in your front-page area.

Click Enable the plugin now!!

Check your front-end to make sure all is well.

 

 

Start a FREE 7 day trial! Get training videos and books, plus expert support: