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:

<div id="content" class="site-content">

Insert below:

<?php 
    if (is_home() || is_front_page()) {
        echo do_shortcode(""); // replace 123 with your slideshow ID
    }
?>

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


if ( is_singular() &&

Replace with:


if ( is_front_page() ) {
    echo "
" . do_shortcode("") . "
"; // replace 123 with your slideshow ID } else if ( is_singular() &&

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:


function metaslider_output_header_slideshow() {
    echo do_shortcode(""); // replace 123 with your slideshow ID
}
add_action('cryout_forbottom_hook', 'metaslider_output_header_slideshow');

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:


.metaslider .flex-control-nav li a {
    width: 11px !important;
}
.metaslider .flex-control-nav {
    right: auto;
}

Save.

Colorway

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


Slide 1
Slide 1

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:


function metaslider_homepage_slider() {
 echo do_shortcode(""); // replace 123 with your slideshow ID
}
add_action('catcheverest_after_header', 'metaslider_homepage_slider');

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:


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:



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.