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:

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

Insert below:

PHP
1
2
3
4
5
<?php
    if (is_home() || is_front_page()) {
        echo do_shortcode("[metaslider id=123]"); // 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):

PHP
1
2
3
 
if ( is_singular() &&
 

Replace with:

PHP
1
2
3
4
5
 
if ( is_front_page() ) {
    echo "<div style='clear: both;'>" . do_shortcode("[metaslider id=123]") . "</div>"; // 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):

PHP
1
2
3
 
?>
 

Add Above:

PHP
1
2
3
4
5
6
 
function metaslider_output_header_slideshow() {
    echo do_shortcode("[metaslider id=123 restrict_to=home]"); // 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:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
 
    <div class="flexslider">
        <ul class="slides">
            <!--Start Slider-->
            <?php
            //The strpos funtion is comparing the strings to allow uploading of the Videos & Images in the Slider
            $mystring1 = blackbird_get_option('blackbird_slideimage1');
            $value_img = array('.jpg', '.png', '.jpeg', '.gif', '.bmp', '.tiff', '.tif');
            $check_img_ofset = 0;
            foreach ($value_img as $get_value) {
                if (preg_match("/$get_value/", $mystring1)) {
                    $check_img_ofset = 1;
                }
            }
            // Note our use of ===.  Simply == would not work as expected
            // because the position of 'a' was the 0th (first) character.
            ?>
            <?php if ($check_img_ofset == 0 && blackbird_get_option('blackbird_slideimage1') != '') { ?>
                <li><?php echo blackbird_get_option('blackbird_slideimage1'); ?></li>
            <?php } else { ?>  
                <li>  <?php if (blackbird_get_option('blackbird_slideimage1') != '') { ?>
                        <img  src="<?php echo blackbird_get_option('blackbird_slideimage1'); ?>" alt=""/>
                    <?php } else { ?>
                        <img  src="<?php echo get_template_directory_uri(); ?>/images/slider1.png" alt=""/>
                    <?php } ?>
                    <div class="flex-caption">
                        <?php if (blackbird_get_option('blackbird_sliderheading1') != '') { ?>
                            <h1><a href="<?php
                    if (blackbird_get_option('blackbird_Sliderlink1') != '') {
                        echo blackbird_get_option('blackbird_Sliderlink1');
                    }
                            ?>"><?php echo stripslashes(blackbird_get_option('blackbird_sliderheading1')); ?></a></h1>
                        <?php } else { ?>
                            <h1><a href="#"><?php _e('Elegancy with Simplicity', 'black-bird'); ?></a></h1>
                            <?php } ?>
                            <?php if (blackbird_get_option('blackbird_sliderdes1') != '') { ?>
                            <p>                      
                            <?php echo stripslashes(blackbird_get_option('blackbird_sliderdes1')); ?>
                            </p>
                        <?php } else { ?>
                            <p><?php _e('Blackbird Theme allows you to create your website through an easy to use themes options panel.', 'black-bird'); ?></p>
                <?php } ?>                        
                    </div>
                </li>
<?php } ?>
            <!--End Slider-->
        </ul>
    </div>
 

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

PHP
1
2
3
4
5
6
7
8
9
 
<!--Start Slider Wrapper-->
<div class="slider-wrapper">            
<?php
    echo do_shortcode("[metaslider id=1917]");
?>
</div>
<!--End Silder Wrapper-->
 

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

PHP
1
2
3
4
5
6
7
8
 
.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:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
<div class="grid_24 slider">
    <div class="slider-container">
        <div id="slides">
            <div id="slide-box">
                <div class="slides_container col-full slide-fix" >
                    <div class="slide slide-1" >
                        <div class="slide-content entry fl">
                            <?php if (inkthemes_get_option('colorway_slideheading1') != '') { ?>
                                <h2 class="title"><a href="<?php echo inkthemes_get_option('colorway_slidelink1'); ?>"><?php echo inkthemes_get_option('colorway_slideheading1'); ?></a></h2>
                            <?php } else { ?>
                                <h2 class="title"><a href="#"><?php _e('Beauty at its best','colorway'); ?></a></h2>
                            <?php } ?>
                            <?php if (inkthemes_get_option('colorway_slidedescription1') != '') { ?>
                                <p><?php echo inkthemes_get_option('colorway_slidedescription1'); ?></p>
                            <?php } else { ?>
                                <p><?php _e('What happens when beauty and simplicity connects. We tried to give you a slight hint of that with the Colorway Theme.','colroway'); ?></p>
                            <?php } ?>
                        </div>
                        <!-- /.slide-content -->
                        <?php if (inkthemes_get_option('colorway_slideimage1') != '') { ?>
                            <div class="slide-image fl"><img  src="<?php echo inkthemes_get_option('colorway_slideimage1'); ?>" class="slide-img" alt="Slide 1"/> </div>
                        <?php } else { ?>
                            <div class="slide-image fl"><img  src="<?php echo get_template_directory_uri(); ?>/images/slider.png" class="slide-img" alt="Slide 1"/> </div>
                        <?php } ?>
                        <!-- /.slide-image -->
                        <div class="fix"></div>
                    </div>        
                </div>
                <!-- /.slides_container -->
            </div>
            <!-- /#slide-box -->
        </div>
        <!-- /#slides -->
    </div>
</div>
<div class="clear"></div>
 

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

PHP
1
2
3
4
5
6
7
 
<!--Start Slider-->
<?php
    echo do_shortcode("[metaslider id=123 restrict_to=home]"); // replace 123 with your slideshow ID
?>
<!--End Slider-->
 

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:

PHP
1
2
3
4
5
6
 
function metaslider_homepage_slider() {
echo do_shortcode("[metaslider id=123 restrict_to=home]"); // 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)

PHP
1
2
3
 
<?php  if(!empty($sliders)) {
 

Insert above:

PHP
1
2
3
4
5
 
<?php
    echo do_shortcode("[metaslider id=123]"); // replace 123 with your slideshow ID
?>
 

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:

PHP
1
2
3
4
5
6
 
function output_metaslider() {
echo do_shortcode("[metaslider id=123 restrict_to=home]"); // 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:

PHP
1
2
3
4
5
 
.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:

PHP
1
2
3
 
<div id="wrap">
 

Add below:

PHP
1
2
3
 
<?php echo do_shortcode("[metaslider id=123 restrict_to=home]"); // 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

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
            <div class="header-cover section bg-dark-light no-padding">
        
                <div class="header section" style="background-image: url(<?php if (get_header_image() != '') : ?><?php header_image(); ?><?php else : ?><?php echo get_template_directory_uri() . '/images/header.jpg'; ?><?php endif; ?>);">
                            
                    <div class="header-inner section-inner">
                    
                        <?php if ( get_theme_mod( 'hemingway_logo' ) ) : ?>
                        
                            <div class='blog-logo'>
                            
                                <a href='<?php echo esc_url( home_url( '/' ) ); ?>' title='<?php echo esc_attr( get_bloginfo( 'title' ) ); ?> &mdash; <?php echo esc_attr( get_bloginfo( 'description' ) ); ?>' rel='home'>
                                    <img src='<?php echo esc_url( get_theme_mod( 'hemingway_logo' ) ); ?>' alt='<?php echo esc_attr( get_bloginfo( 'title' ) ); ?>'>
                                </a>
                                
                            </div> <!-- /blog-logo -->
                    
                        <?php elseif ( get_bloginfo( 'description' ) || get_bloginfo( 'title' ) ) : ?>
                    
                            <div class="blog-info">
                            
                                <h1 class="blog-title">
                                    <a href="<?php echo esc_url( home_url() ); ?>" title="<?php echo esc_attr( get_bloginfo( 'title' ) ); ?> &mdash; <?php echo esc_attr( get_bloginfo( 'description' ) ); ?>" rel="home"><?php echo esc_attr( get_bloginfo( 'title' ) ); ?></a>
                                </h1>
                                
                                <?php if ( get_bloginfo( 'description' ) ) { ?>
                                
                                    <h3 class="blog-description"><?php echo esc_attr( get_bloginfo( 'description' ) ); ?></h3>
                                    
                                <?php } ?>
                            
                            </div> <!-- /blog-info -->
                            
                        <?php endif; ?>
                                    
                    </div> <!-- /header-inner -->
                                
                </div> <!-- /header -->
            
            </div> <!-- /bg-dark -->
 

Replace with:

PHP
1
2
3
 
<?php echo do_shortcode("[metaslider id=123]"); // replace 123 with your slideshow ID ?>
 

Save.

Twenty Thirteen

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

PHP
1
2
3
 
</header><!-- #masthead -->
 

Insert below:

PHP
1
2
3
4
5
6
7
 
<?php
    if (is_home() || is_front_page()) {
        echo do_shortcode("[metaslider id=123]"); // replace 123 with your slideshow ID
    }
?>
 

Save.

Twenty Twelve

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

PHP
1
2
3
 
    if ( ! empty( $header_image ) ) : ?>
 

Replace with:

PHP
1
2
3
4
 
    if (is_home() || is_front_page()) : echo do_shortcode("[metaslider id=123]"); // 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:

PHP
1
2
3
 
    if ( ! empty( $header_image ) ) : ?>
 

With this:

PHP
1
2
3
4
5
6
 
if (is_home() || is_front_page()) : echo do_shortcode("[metaslider id=123]"); // This is the homepage, replace 123 with your slideshow ID
    elseif ( is_page('page-slug')) : echo do_shortcode("[metaslider id=123]"); // 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("[metaslider id=123]"); // 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):

PHP
1
2
3
 
    if ( $header_image ) :
 

Replace with:

PHP
1
2
3
4
 
if (is_home() || is_front_page()) : echo do_shortcode("[metaslider id=123]"); // 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):

PHP
1
2
3
 
    elseif ( get_header_image() ) :
 

Replace with:

PHP
1
2
3
4
 
    elseif (is_home() || is_front_page()) : echo do_shortcode("[metaslider id=123]"); // 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:

PHP
1
2
3
4
5
 
.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:

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

Insert below:

PHP
1
2
3
<?php
    echo do_shortcode("[metaslider id=123]"); // 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:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// 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.