在内容和侧边栏之前放置幻灯片-WordPress

Question

I'm trying to add an image slider before the content of the page which spans the full width of the page (I'm using bootstrap, so a 12 column div will be used).

Here is the current code for the index.php file:

get_header(); ?>

    <div class="col-sm-12">
        <?php 
            echo do_shortcode("[metaslider id=2010]"); 
        ?>
    </div>

    <?php if ( have_posts() ) : ?>
        // The Loop

    <?php else : ?>

        <?php get_template_part( 'no-results', 'index' ); ?>

    <?php endif; ?>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

As you can see, I've tried to add in the image slider just below where the header is called, but it hasn't quite worked. The image slider is being created with a width the same as the posts, as if it is part of the content. So the sidebar is still taking up the entire right side of the page.

I would like the image slider to span the whole page, and THEN the posts and sidebar are shown.

Any idea how to do this? I tried placing various things inside different divs and what not but can't seem to get the right layout

Update: header.php

<div class="main-content">
    <div class="container">
        <div class="row">
            <div id="content" class="main-content-inner col-sm-12 col-md-8" itemprop="mainContentOfPage" itemscope="itemscope" itemtype="http://schema.org/Blog">

(The rest of the code isn't really necessary as it's just the navigation and banner etc)

The image slider is then placed within this div above main-content-inner col-sm-12 col-md-8 . The main-content is where the posts are output to, so I would need the image slider to go before this div. I could move this code into the index.php code, but I'm not sure if that is necessarily good practice. It's the only way I can see being able to put the image slider before the content

Answer:

Updated my header.php to this:

<div class="main-content">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <?php if (is_front_page()) { 
                    echo do_shortcode("[metaslider id=2010]"); 
                }?>
            </div>
            <div id="content" class="main-content-inner col-sm-12 col-md-8" itemprop="mainContentOfPage" itemscope="itemscope" itemtype="http://schema.org/Blog">

Answer 1

Do this:

Above:

<div class="main-content">

Is where you want to call your slideshow.

If you don't want it to show on every page, use some conditional tags to control which page it appears on. See: http://codex.wordpress.org/Conditional_Tags