Theme Integration

Instructions on how to integrate MetaSlider with various free themes

Vantage

Vantage has built in support for MetaSlider. Using the Vantage theme settings you can easily choose a MetaSlider slideshow to display on your homepage.

Vantage slightly modifies the default output of MetaSlider to:

  • Ensure the content within the slides lines up with the page content
  • Fix the height of the slideshow at 500px

vantage-1

Layer Slides Slideshow Configuration

In most cases the modifications that Vantage makes are useful, but they can have an undesired impact particularly on Layer Slides.

Due to the fixed height slideshow that Vantage outputs, you might find that the layers scale up and outside of the slideshow content area on wider browsers (causing text to look as if it is cut off). To stop this from happening use the following settings in the slideshow configuration:

Width: 1080px Height: 500px Layer Scaling: Scale Down Only

If you have already set up your layers, make sure you open the layer editor and reposition the layer after making these changes.

If you want the layers to be output exactly where you have placed them in the layer editor (so the layers are not confined to a centralised column), use the following slideshow settings:

Width: Any (1080px recommended) Height: Any (300px recommended) Layer Scaling: Scale Up & Down Stretch: Yes

Then go to Appearance > Theme Settings and uncheck “Stretch Homepage Slider”

If you have already set up your layers, make sure you open the layer editor and reposition the layer after making these changes.

Video Backgrounds Not Auto Playing?

Go to Appearance > Theme Settings and uncheck “Stretch Homepage Slider”. This will stop Vantage from using JavaScript to modify the slideshow HTML on page load, which results in the auto play from being interrupted.

 

Twenty Fifteen

Recommended slideshow settings:

  • Type: Flex Slider
  • Width: 990
  • Height: 620
  • Stretch: On
  • Arrows: On
  • Navigation: Filmstrip

Steps

Go to Appearance > Editor. Select header.php from the right.

Find:

Insert below:

Save.

Preview

Screen Shot 2015-01-21 at 11.32.19

Yoko

Recommended slideshow size: 1102 x 350. Go to Appearance > Editor. Select header.php from the right. Find (line 42):

Replace with:

Save.

Mantra

Recommended slideshow size: 1100 x 350. Go to Appearance > Editor. Select Theme Functions (functions.php) on the right. Find (very last line in file):

Add Above:

Save.

Blackbird

Recommended slideshow size: 950 x 390. Go to Appearance > Editor. Select front-page.php from the right. Find Lines 11-58:

Replace the previously selected lines with the template include from MetaSlider. Overall the top of the file should now look like this:

Save. Go to Appearance > Editor. Select style.css from the right. At the very bottom (on a new line), paste in the following:

Save.

Colorway

Recommended slideshow size: 897 x 355. Go to Appearance > Editor. Select front-page.php from the right. Find Lines 16-52:

Replace the previously selected lines with the template include from MetaSlider. Overall the top of the file should now look like this:

Save.

Catch Everest

Recommended slideshow size: 1140 x 300. Go to Appearance > Editor. Select functions.php from the right. At the very bottom of the file, on a new line, paste in the following:

Save.

Depot

Recommended slideshow size: 1140 x 300. Go to Appearance > Editor. Select template-homepage.php from the right. Find: (line 7)

Insert above:

Save.

WooThemes – Upstart

Recommended slideshow size: 1140 x 300. Go to Appearance > Editor. Select functions.php from the right. In the custom functions section, paste in the following code:

Save. Go to Upstart > Theme Options > General Settings > Display Options. In the Custom CSS box, paste in the following:

Save.

zeeStyle

Recommended slideshow size: 940 x 150. Go to Appearance > Editor. Select header.php from the right. Find:

Add below:

Save.

Hemingway

Recommended slideshow size: 1280 x 426. Also make sure ‘Stretch’ is enabled in the Advanced Slideshow settings.

Go to Appearance > Editor.

Select header.php from the right.

Find: lines 22 – 60

Replace with:

Save.

Twenty Thirteen

Recommended slideshow size: 1280 x 400. Go to Appearance > Editor. Select header.php from the right. Find (line 49):

Insert below:

Save.

Twenty Twelve

Recommended slideshow size: 960 x 300. Go to Appearance > Editor. Select header.php from the right. Find (line 41):

Replace with:

Save.

If you would like to display specific sliders on specific pages then replace the original code:

With this:

Twenty Eleven

Recommended slideshow size: 1000 x 300. Go to Appearance > Editor. Select header.php from the right. Find (line 81):

Replace with:

Save.

Twenty Ten

Recommended slideshow size: 940 x 300. Go to Appearance > Editor. Select header.php from the right. Find (line 85):

Replace with:

Save. Go to Appearance > Editor. Select ‘style.css’ from the right (it’s probably already selected) Add to bottom:

Save.

Twenty Fourteen

Recommended slideshow settings:

  • Type: Flex Slider
  • Width: 1080
  • Height: 200
  • Stretch: On
  • Arrows: Off
  • Navigation: Hidden
  • Auto Play: On

Step 1

Go to Appearance > Header. Uncheck ‘Show header text with your image’, and remove the header image if you have one selected.

Step 2

Go to Appearance > Editor. Select header.php from the right.

Find:

Insert below:

Save.

Step 3

Go to Appearance > Editor. Select functions.php from the right.

Scroll right to the bottom. On a new line, paste in the following:

Save.