This article details the popular ‘full width’ slider layout, some of the complications you might come across. We’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 where the width will change according to the browser width.
The post or page content is often placed within this central container and if a slider is inserted here, using a shortcode, it will be subject to the width of the said container. Even if ‘Stretch’ is enabled in the slider settings the slider will only be as wide as the container.
Some 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 a full browser width slider.
MetaSlider Template Include
If your theme doesn’t have a full browser width module or similar (it may be worth contacting the theme developer to find out) 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:
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.
Copy the template include which will look something like this:
<?php echo do_shortcode(""); ?>
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.
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).
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.
Posted in: FAQs