How to add the slider to the WordPress theme and create a full width slider

Product:

WonderPlugin Slider

Question:

My WordPress theme has a boxed layout design, that's, the page content is not full width. The main wrapper has a maximum width limit and has paddings around it.

I added the WonderPlugin slider shortcode to the page and it's not full width. How could I make it full width?

Answer:

Firstly, in WonderPlugin Slider, step 3, Options tab, Slider Options, check both option "Create a responsive slider" and "Create a full width slider".

To create a full width slider, you need to add the slider to your WordPress theme. If you add the slider to the page, since the page is not full width, the slider is limited to the page.

To add the slider to your WordPress theme:

1. In your WordPress backend, goto left menu Appearance -> Editor, find the file header.php on the right list, click and edit it.

2. Find the div of your main page wrapper in the file, then add the slider PHP code above it. You can copy the slider PHP code in WonderPlugin Slider menu -> Manage Sliders.

<?php 
echo do_shortcode('[wonderplugin_slider id="1"]'); 
?>

If you would like the slider only show up on the website home page, you can change the PHP code to following:

<?php 
if ( is_front_page() )
  echo do_shortcode('[wonderplugin_slider id="1"]'); 
?>

If you are not familiar with HTML, it may not be easy for you to find the main page wrapper in the file. You could try to move the code around and see how it looks in the final page.

Some WordPress themes name the id of the main page wrapper as main, some themes name it as content. So the div could look like <div id="content"> or <div id="main">. There is no rule about how to name it, it totally depends on your WordPress theme.

WordPress Full Width Slider