Slidder Full Width 100% on PaperCuts Theme

Hello,

you will need to include the slider directly into the “header.php” theme file, ideally just above the following element: </header> <!-- end of wrapper-header -->. You will need to add something like this:

<?php
    if (is_home() || is_front_page()) {
        echo do_shortcode("[metaslider id=123]"); // replace 123 with your slideshow ID
    }
?>

Here is a detailed manual how to include the Meta Slider into a theme: Meta Slider Including.

Maybe you will also need to add some Custom CSS to style your slider.

Or, if this procedure is not comfortable for you, here is a live demo how looks the in-built slider in PaperCuts Premium version: Premium Demo.

Best regards
Tomas Toman

Yes I added same thing to my site and its working fine. but I wanted to see if I could make the right hand widgets move down so that my slider takes the whole space in both content side and widget side. Would it be possible to do that.

It is possible by editing the “header.php” file. When you open this file, just at the end you can see the following code:

<div id="content">

<?php if ( is_home() || is_front_page() ) { ?>
<?php if ( get_header_image() != '' ) { ?>
  <div class="header-image-wrapper"><div class="header-image"><img src="<?php header_image(); ?>" alt="<?php bloginfo( 'name' ); ?>" /></div></div>
<?php } ?>
<?php } else { ?>
<?php if ( get_header_image() != '' && $papercuts_options_db['papercuts_display_header_image'] == 'Everywhere' ) { ?>
    <div class="header-image-wrapper"><div class="header-image"><img src="<?php header_image(); ?>" alt="<?php bloginfo( 'name' ); ?>" /></div></div>
<?php } ?>
<?php } ?>

You will need to edit it by the following way:

<?php if ( is_home() || is_front_page() ) { ?>
  <div class="header-image-wrapper"><div class="header-image"><?php echo do_shortcode("[metaslider id=123]"); // replace 123 with your slideshow ID ?></div></div>
<?php } else { ?>
<?php if ( get_header_image() != '' && $papercuts_options_db['papercuts_display_header_image'] == 'Everywhere' ) { ?>
    <div class="header-image-wrapper"><div class="header-image"><img src="<?php header_image(); ?>" alt="<?php bloginfo( 'name' ); ?>" /></div></div>
<?php } ?>
<?php } ?>

<div id="content">

Then, please insert the following CSS code into “Theme Options > Other Settings > Custom CSS”:

.home #content, .home #sidebar {margin-top: 0;}
.home .header-image-wrapper {margin-top: 25px;}

This will be working for displaying a slideshow only on your homepage. To display it on all pages, please modify your “header.php” in the following way:

<div class="header-image-wrapper"><div class="header-image"><?php echo do_shortcode("[metaslider id=123]"); // replace 123 with your slideshow ID ?></div></div>

<div id="content">

In this case, your Custom CSS should be the following:

#wrapper #content, #wrapper #sidebar {margin-top: 0;}
#wrapper .header-image-wrapper {margin-top: 25px;}

I hope that my answer will be helpful for you.

Best regards
Tomas Toman