Theme Integration
Instructions on how to integrate MetaSlider with various free themes
- Vantage
- Twenty Fifteen
- Yoko
- Mantra
- Blackbird
- Colorway
- Catch Everest
- Depot
- WooThemes – Upstart
- zeeStyle
- Hemingway
- Twenty Thirteen
- Twenty Twelve
- Twenty Eleven
- Twenty Ten
- Twenty Fourteen
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
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
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.
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.