Full browser width sliders using template includes

This article details the popular ‘full width’ slider layout, some of the complications you might come across and how to achieve it with Meta Slider.

I’ll be using the TwentyThirteen WordPress theme as an example but the concepts should apply to most other themes as well.

The centered content column
Firstly, most websites have a central content container that is centered – it may also be responsive so the width will change according to the browser width.

full-width-demo-1The post or page content is often placed with this central container and if a slider is inserted here, using a shortcode, it will be subject to the width of the the container. Even if ‘Stretch’ is enabled in the slider settings slider will only be as wide as the container.

full-width-demo-2Some themes may offer more flexibility in terms of the layout such as a full width module that will expand to the full width of the browser. If it does have this option then use this along with setting the slider to ‘Stretch’ for full browser width slider.

full-width-demo-3

Meta Slider Template Include
If your theme doesn’t have this option then you will need to insert the slider directly in the page template. This exact method will vary a great deal depending on the theme, we’ve put together some guides for the most popular themes here:
https://metaslider.com/documentation/category/theme-integration/

In the slider settings, at the bottom left, you will see the Usage panel which has the specific shortcode and template include code for the slider being viewed.

template-include

Copy the template include which will look something like this:

You will then need to find the correct theme template to paste this into and again, this varies depending on the theme and of course where you would like the slider to appear.

Theme Editor
The most popular location tends to be on the homepage below the main navigation menu. Navigate to the theme editor at Appearance>Editor (/wp-admin/theme-editor.php) where there will most likely be a file called ‘Header’ (header.php).

full-width-demo-4

For the theme Twenty Thirteen we locate somewhere that is outside of the central content container mentioned earlier and we place our template include there. It might be more difficult to locate the exact spot depending on how the theme is structured so a little trial and error might be required – please be sure to back up all theme files and content just in case.

full-width-demo-5