Blog

Stay connected to the latest UpdraftPlus news.

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