Setting up the Content Slider

Last updated by David Gwyer on May 10, 2015 15:32

Adding a content slider to your site is as easy as dragging a widget into a widget area. This means you can easily add multiple sliders to various locations on your site, each one displaying a different set of slides. This makes the Content Slider widget an extremely flexible slider solution!

  • You need to have WPGO Metro 1.0+ installed to use the Content Slider widget.

Quick Setup

If you’re in a hurry, here are the basic steps needed to add a slider to your site:

  1. Go to Slides > New Slide to create an individual slide.
  2. Add a title and check the Hide content slider title check box (to hide it on the front end).
  3. Add a featured image making sure it is large enough for the slider (check in theme options for recommended minimum size).
  4. Add each slide to slideshow group.
  5. Add the content slider widget to a widget area via Appearance > Widgets and select the appropriate slideshow group.
  6. That’s it!

Creating Individual Slides

From the main WordPress admin menu go to Slides > New Slide to create a new single slide.

New Slide Page

Firstly, give your slide a title.

Then you need to decide on what content you want your slide to contain. You can add text/HTML to your slide via the main editor, or show a large featured image, or a combination of both. If you choose to display both then by default the HTML will appear underneath the featured image.

If you only want to display images on your slides then leave the main content area of the slide editor blank.

  • If you want text overlaid onto images then the quickest method is to add text to the image itself and then save it as a new image and upload to your media library.

    You can do this with Photoshop but if you don’t have access to it you can use one of the many free online tools to add text and other effects to your images.

Click Set featured image to set the main slide image and choose an existing image from the media library, or upload a new one from your computer.

Next, under Content Slider Links set the slider title visibility (it’s recommended you hide the slider title). After a featured image has been added update the slide post to see a new option to set the featured image link URL.

If you leave this field blank then the slider image will not link to anything, or you can enter a specific URL to link to another section of your site, or even to an external link.

Finally, add your slide to a slideshow group under the Slideshows meta box. You can add to an existing group or create a new one.

Slideshow Groups

Using Correct Image Sizes

When adding a featured image to your slide you need to make sure it has been formatted to the correct size. Any images uploaded after you activated your theme will have been automatically formatted, as long as they are of recommended minimum size.

However, if you wish to use existing images from your media library that were uploaded previously then these may not display properly in the slider by default. This is because WordPress only formats images to required sizes at the time of uploading. When activating a new theme only subsequently uploaded images will be formatted. Existing images will NOT be touched.

For existing images you want to use in the content slider there are two options:

  1. Delete the image(s) and re-upload making sure they of recommended minimum size.
  2. Use the excellent Regenerate Thumbnails plugin to automatically reformat all existing images so they will work correctly when added to the slider.

Recommended Minimum Size

For any images you want to use in the slider there is a recommended minimum image size that you should adhere to. If you use images below this minimum then they may not display properly or could be scaled, producing unexpected results.

You can find out what the minimum recommended slider size is for your theme via the theme options page. Under the Appearance menu go to theme options and click the Toggle List button under the Image Sizes Used in [theme name] section.

For the Minn theme this looks like this.

Theme Slider Image Sizes

You can see that there are three slider image sizes defined for Minn:

  • wpgo-slider-content-full: (1200 x 437) pixels [crop]
  • wpgo-slider-content-twothirds: (850 x 309) pixels [crop]
  • wpgo-slider-content-third: (400 x 520) pixels [crop]

The recommended minimum image size is the largest of the three so, for Minn, you should ideally use images of around 1200 x 440 pixels as the slide featured image. Any size image larger than this will be fine but when WordPress crops it to 1200 x 437 pixels you may lose the part of the image you wanted to show.

If you adhere to the recommended minimum image size then you have precise control over exactly how the image appears in the slider.

Adding the Slider Widget

This is the easy bit!

Once you have created a set of individual slides which belong to one or more slideshow groups, you can go ahead and create a content slider on your site.

Go to Appearance > Widgets and drag a Content Slider widget instance into the Front Page: Before Content widget area. You can drag the slider widget into any widget area but this one is a popular location to add a slider.

Add Content Slider Widget

  • If the Front Page: Before Content widget area isn’t currently expanded you’ll need to expand it before you can drag a widget into it!

The most important setting is the Choose Slideshow option where you can select the group of slides you previously created.

You can also manually select the maximum number of slides displayed in the slider by adding a value to the Maximum No. of slider items text box. This will limit the slides used in the chosen slideshow group.

This is a useful setting especially when used in conjunction with the Random Slide order check box option. This setting can be used to load the slides in a random order.

For example, if you select a slideshow group containing 12 slides, and limit the maximum number of slider items to 6 items and check the random slide order check box the slider will show 6 random slides (from the set of 12) on each page load/refresh.

Other slider widget options include setting the transition type (fade or slide) along with transition times. You can also choose to auto start the slideshow and whether to loop them continuously. An additional option allows you to transition the height of the next/previous slide if different from the current slide.

After you have updated the widget settings Click Save and then take a look at your beautiful new slider on your home page!

First published May 10, 2015