Theme Integration

Instructions on how to integrate Meta Slider with various free themes

Vantage

Vantage has built in support for Meta Slider. Using the Vantage theme settings you can easily choose a Meta Slider slideshow to display on your homepage. Vantage slightly modifies the default output of Meta Slider to: Ensure the content within the slides lines up with the page content Fix the height of the slideshow at […]

Read More

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

Read More

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.

Read More

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.

Read More

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 Meta Slider. 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. […]

Read More

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 Meta Slider. 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.

Read More

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.

Read More

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.

Read More

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.

Read More

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.

Read More