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.

 

Comments

 
Rod Swift
#1 Rod Swift 2011-11-26 23:56

I have a wordpress.com blog. This is not self hosted and so does not allow plug-ins, (only widgets).
Is there some way that 'Frontpage slideshow' can work with a non self hosted (wordpress.com) site?
Thank you
 

Add comment


Security code
Refresh

blog-ad

Start Online Training

Members get access to all our video training. That's 1,142 training sessions in Joomla, Drupal, WordPress and Coding.

Manage All Your Joomla Sites

adminicredible

With Admincredible you can update and manage all your Joomla sites. If you have 5 or 500 sites, Admincredible will make your life easier! Visit Admincredible.com.

Latest Comments

The License for Our Tutorials

All of our tutorials are published under the Creative Commons Attribution-NonCommercial license. This means:

  • You can re-use these tutorials.
  • You can modify these tutorials.
  • You must link back to our original tutorial.
  • You can't use these tutorials commercially.

Click here to read the full license.

Open Source Training is not affiliated with or endorsed by the Joomla, WordPress or Drupal projects.
All product names and trademarks are the property of their respective owners.

Copyright 2013 Open Source Training, LLC. All rights reserved.