Theme Integration

Instructions on how to integrate Meta Slider with various free themes

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

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.

Read More