MetaSlider Documentation

Let’s Connect

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


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


			                                
			                                
		                                    


 



 

 

 

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.
MetaSlider Documentation

Categories

Most Popular

Let’s Connect

WooThemes – Upstart

zeeStyle

Hemingway

Twenty Thirteen

Twenty Twelve

Twenty Eleven

Twenty Ten

Twenty Fourteen

Step 1

Step 2

Step 3

Start Using Your Slider Today!
