How do I make an image slider full width?

  • Resolved Jess

    (@chibiunicorn)


    9 years, 10 months ago

    How do I make an image slider (Meta Slider) full width in the Storefront theme?

    Ideally, I would like the image slider to be full width across the page while the height stays at 350px – displayed between the navigation bar and the page content. I’ve already got all of that figured out, except for the full width!

Viewing 12 replies - 1 through 12 (of 12 total)
  • Thread Starter Jess

    (@chibiunicorn)

    Nevermind! Got it! I placed slider code right after </header> in the header.php file

    </header><!-- #masthead -->

	<!-- header slider -->
	<div id="slider">
	<?php echo do_shortcode("[metaslider id=388 percentwidth=100]"); ?>
	</div>

    Although we can easily do our changes by directly editing the files in the theme, we don’t really recommend as to not lose any changes made over an update.

    the best way to do changes would be to do it on a child theme, or use the available extension (plugins) available.

    For your case, try using this code on your child theme’s functions.php

    add_action( 'init', 'child_theme_init' );
function child_theme_init() {
	add_action( 'storefront_before_content', 'woa_add_full_slider', 5 );
}

function woa_add_full_slider() { ?>
	<div id="slider">
		<?php echo do_shortcode("[metaslider id=388 percentwidth=100]"); ?>
	</div>
<?php
}

    Thread Starter Jess

    (@chibiunicorn)

    Hi @wooassist

    Thanks! It just doesn’t set it as a full width banner. How can I make this happen within the function.php child file?

    Did you use the code I posted above? I just converted your solution to a more WP friendly one.

    and can you provide a link to your website so we can see it?

    Thread Starter Jess

    (@chibiunicorn)

    Hi @wooassist

    I managed to make it work!

    I first inserted this right after </header> to my child header.php:

    <?php
	do_action( 'storefront_after_header' ); ?>

    Then I put your code in the child function.php file. I just changed “storefront_before_content” to “storefront_after_header” like this:

    add_action( 'init', 'child_theme_init' );
function child_theme_init() {
	add_action( 'storefront_after_header', 'woa_add_full_slider', 5 );
}

function woa_add_full_slider() { ?>
	<div id="slider">
		<?php echo do_shortcode("[metaslider id=388 percentwidth=100]"); ?>
	</div>
<?php
}

    Please let me know if it’s a good or not good way of doing this.

    Thanks!

    You don’t need to add that. If you check on the storefront’s header.php file, you can see that do_action( 'storefront_before_content' ); is added right after the </header> close tag.

    Do you not see that line in your header.php? If so, try re-downloading the theme, and use the code I posted above.

    Thread Starter Jess

    (@chibiunicorn)

    Hi @wooassist

    I re-downloaded the theme and it all works fine now. Thank you so much!

    Hi @wooassist

    I’ve inserted the code you wrote above into my Storefront Child theme functions.php file and all works great for making the images 100% width.

    add_action( ‘init’, ‘child_theme_init’ );
    function child_theme_init() {
    add_action( ‘storefront_before_content’, ‘woa_add_full_slider’, 5 );
    }

    function woa_add_full_slider() { ?>
    <div id=”slider”>
    <?php echo do_shortcode(“[metaslider id=388 percentwidth=100]”); ?>
    </div>
    <?php
    }

    The problem I now have it that the Meta Slider populates every page on my website, so how could I restrict this to just the Home Page only?

    Thanks in advance.

    Sean

    Hey @seanchoice,

    To do that, you’ll just have to modify the woa_add_full_slider function below:

    function woa_add_full_slider() {

if ( is_front_page() ) :
?>
 	<div id="slider">
 		<?php echo do_shortcode("[metaslider id=388 percentwidth=100]"); ?>
 	</div>
 <?php
endif;
}

    Basically, we’re just adding the condition statement to only show it on the homepage.

    @wooassist,

    Excellent, thanks so much for your reply.
    Worked a treat ??

    HI there

    I really need some help. I can not get my header to go full width. Can you please help me. My website is delilahatkinson.com

    Here is the full content of my header page:

    <?php
    /**
    * The Header for our theme.
    *
    * Displays all of the <head> section and everything up till <main id=”main”>
    *
    * @package Sela
    */
    ?>
    <!DOCTYPE html>
    <html <?php language_attributes(); ?>>
    <head>
    <meta charset=”<?php bloginfo( ‘charset’ ); ?>”>
    <meta name=”viewport” content=”width=device-width, initial-scale=1″>
    <link rel=”profile” href=”https://gmpg.org/xfn/11″&gt;
    <link rel=”pingback” href=”<?php bloginfo( ‘pingback_url’ ); ?>”>
    <?php wp_head(); ?>
    </head>

    <body <?php body_class(); ?>>

    <div id=”page” class=”hfeed site”>
    <header id=”masthead” class=”site-header” role=”banner”>
    “><?php _e( ‘Skip to content’, ‘sela’ ); ?>

    <div class=”site-branding”>
    <?php sela_the_site_logo(); ?>
    <h1 class=”site-title”>” title=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>” rel=”home”><?php bloginfo( ‘name’ ); ?></h1>
    <?php if ( ” != get_bloginfo( ‘description’ ) ) : ?>
    <h2 class=”site-description”><?php bloginfo( ‘description’ ); ?></h2>
    <?php endif; ?>
    </div><!– .site-branding –>

    <nav id=”site-navigation” class=”main-navigation” role=”navigation”>
    <button class=”menu-toggle” aria-controls=”menu” aria-expanded=”false”><?php _e( ‘Menu’, ‘sela’ ); ?></button>
    <?php wp_nav_menu( array( ‘theme_location’ => ‘primary’ ) ); ?>
    </nav><!– #site-navigation –>
    </header><!– #masthead –>

    <!– header slider –>
    <div id=”slider”>
    <?php echo do_shortcode(“[metaslider id=388 percentwidth=100]”); ?>
    </div>

    <div id=”content” class=”site-content”>

    My slider is not working. Can someone look at this code and check it for me. Thanks
    [full_width_banner slidetime=”8″ height=”350″]

    [full_width_slide]{THEME_ROOT}/images/preview/wide-<img class=”alignnone size-medium wp-image-1413″ src=”https://remiaubin.com/wp-content/uploads/2015/05/placeholder1-300×78.png&#8221; alt=”placeholder1″ width=”300″ height=”78″ />[/full_width_slide]

    [full_width_slide]{THEME_ROOT}/images/preview/wide-<img class=”alignnone size-medium wp-image-1414″ src=”https://remiaubin.com/wp-content/uploads/2015/05/placeholder2-300×78.png&#8221; alt=”placeholder2″ width=”300″ height=”78″ />[/full_width_slide]

    [full_width_slide]{THEME_ROOT}/images/preview/wide-<img class=”alignnone size-medium wp-image-1415″ src=”https://remiaubin.com/wp-content/uploads/2015/05/placeholder3-300×78.png&#8221; alt=”placeholder3″ width=”300″ height=”78″ />[/full_width_slide]

    [/full_width_banner]

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘How do I make an image slider full width?’ is closed to new replies.