800,000+ WordPress sites are already using MetaSlider!

MetaSlider Documentation

Recommended slideshow size: 897 x 355. Go to Appearance > Editor. Select front-page.php from the right. Find Lines 16-52:


Slide 1
Slide 1

Replace the previously selected lines with the template include from MetaSlider. Overall the top of the file should now look like this:





Save.

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:


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.

zeeStyle

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

Add below:


?php echo do_shortcode(''); // replace 123 with your slideshow ID ?

Save.

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


 

Replace with:



Save.

Twenty Thirteen

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



Insert below:



Save.

Twenty Twelve

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

Twenty Eleven

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.

Twenty Ten

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.

Twenty Fourteen

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.

Still stuck? How can we help?
Last Updated on January 01, 1970

Start Using Your Slider Today!

Create and Publish Forms in Minutes… What are you waiting for?