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.

Recommended slideshow size: 940 x 150. Go to Appearance > Editor. Select header.php from the right. Find:

Add below:

Save.

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

            

        
                

                            
                    

                    
                        
                        
                            

                            
                                ' title=' — ' rel='home'>
                                    ' alt=''>
                                
                                
                            
 
                    
                        
                    
                            

                            
                                

                                    
                                
                                
                                
                                
                                    

                                    
                                
                            
                            
 
                            
                        
                                    
                    
 
                                
                
 
            
            
 

Replace with:

Save.

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

Insert below:

Save.

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

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.

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.

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.