800,000+ WordPress sites are already using MetaSlider!

MetaSlider Documentation

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.

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:


function output_metaslider() {
echo do_shortcode(""); // change 123 to your slider ID
}
add_action( 'woo_main_before', 'output_metaslider' );

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


.metaslider .flex-direction-nav a {
text-indent: 0;
}

Save.

zeeStyle

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

Add below:


?php echo do_shortcode(''); // replace 123 with your slideshow ID ?

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):


if ( ! empty( $header_image ) ) : ?>

Replace with:


if (is_home() || is_front_page()) : echo do_shortcode(""); // replace 123 with your slideshow ID
elseif ( ! empty( $header_image ) ) : ?>

Save.

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


if ( ! empty( $header_image ) ) : ?>

With this:


if (is_home() || is_front_page()) : echo do_shortcode(""); // This is the homepage, replace 123 with your slideshow ID
elseif ( is_page('page-slug')) : echo do_shortcode(""); // Replace page-slug and 123 with your specific page slideshow ID respectively 
elseif ( is_page('another-page-slug','or-this-page','Or by page title')) : echo do_shortcode(""); // You can add as many other pages as you like
elseif ( ! empty( $header_image ) ) : ?>

Twenty Eleven

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


if ( $header_image ) :

Replace with:


if (is_home() || is_front_page()) : echo do_shortcode(""); // replace 123 with your slideshow ID
elseif ( $header_image ) :

Save.

Twenty Ten

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


elseif ( get_header_image() ) :

Replace with:


elseif (is_home() || is_front_page()) : echo do_shortcode(""); // replace 123 with your slideshow ID
elseif ( get_header_image() ) :

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


.metaslider {
clear: both;
}

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:

<body <?php body_class(); ?>>

Insert below:

<?php 
echo do_shortcode(""); // replace 123 with your slideshow ID
?>

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:

// We've removed the header, but we still want the theme to behave as if one is there.
// Set the body classes correctly.
function twentyfourteen_remove_masthead_fixed( $classes ) {
$return = array();

foreach ($classes as $class) {
if ($class != 'masthead-fixed') {
$return[] = $class;
}
}

$return[] = 'header-image';

return $return;
}
add_filter( 'body_class', 'twentyfourteen_remove_masthead_fixed', 999, 1);

// Set a height on MetaSlider. The JavaScript which 'sticks' the menu to the top of the page needs to know how tall the header is.
// and fix itself to the top
function metaslider_add_height_rule( $style, $slider_id, $settings ) {
return $style . " height: {$settings['height']}px";
}
add_filter( 'metaslider_container_style', 'metaslider_add_height_rule', 999, 3);

// Now remove the height... MetaSlider doesn't want a height, otherwise it won't behave responsively.
function metaslider_remove_height_rule( $javascript, $slider_id ) {
$javascript .= "$('.metaslider').css('height', 'auto');";
return $javascript;
}
add_filter( 'metaslider_flex_slider_javascript_before', 'metaslider_remove_height_rule', 999, 2);

Save.

Still stuck? How can we help?
Last Updated on January 01, 1970

Start Using Your Slider Today!

Create and Publish Forms in Minutes… What are you waiting for?