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.
