Slider above home page content but not as page header

[Suzanne]

Hi,
I am trying to place my Meta Slider ONLY on the Home Page above the content (Content/Sidebar). I want it to be the same width as the content.

I’ve tried using the Page Header meta but because of the content background I have set up, it displays too wide. I want it to be the width of the white area in the content area, not the width of the static Page Header images on the inner pages (example of what I DO NOT WANT: http://tinyurl.com/h8mlc6f).

I’ve tried using GP Hooks by putting
<?php if ( is_front_page() ) : ?>
[metaslider id=913]
<?php endif; ?>

in either Inside Content Container, or Before Content and the Slider is not the full width – the Sidebar is showing to the right of the Slider, not below the Slider adjacent to the Content. (example of this: http://tinyurl.com/gt5vf32)

Any ideas?

[Tom]

Hi there,

Give this a shot in the “After Header” hook:

<?php if ( is_front_page() ) : ?>
<div class="grid-container">
    [metaslider id=913]
</div>
<?php endif; ?>

That should place it above everything, but it won’t be full width.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Suzanne]

Thank you for the code. Yes, it’s appearing above the content, but it’s the same outcome as using Page Header meta. Here is how it’s currently displaying: http://tinyurl.com/zqdsbmf

I’ve tried using the Page Header meta but because of the content background I have set up, it displays too wide. I want it to be the width of the white area in the content area, not the width of the static Page Header images on the inner pages (example of what I DO NOT WANT: http://tinyurl.com/h8mlc6f).

This is an example of how I’d like it to display: http://tinyurl.com/jyaj8rh

Any further thoughts?

[Stacey Usborne]

Hi, I just took a look at this and it looks like the only difference between what its showing as now and what you’re wanting is that your navigation and header aren’t full width.

If that’s what you’re wanting to change you can go into “Appearance > Customize > Layout > Navigation Layout > Full Width” to change the navigation width, and “Appearance > Customize > Layout > Header Layout > Full Width” to change your header width.

*Edit – sorry I meant Full Width, not Contained.

[Suzanne]

Hi Stacey,
Thanks for the reply, but unfortunately that’s not what I’m trying to accomplish. I do want the header and the nav contained. There is an overall background (brown), as well as a background in the content area (white text area with green padding) that I want to show. See this conversation: https://generatepress.com/forums/topic/child-theme-differences/#post-142718.

I am trying to contain the slider in the content area within the white background area. This is an example of how I’d like it to display: http://tinyurl.com/jyaj8rh .

Any further ideas would be great.

[Tom]

Looks like I need to add another hook to GP Hooks.

For now, you can scrap using GP Hooks and add this function:

add_action( 'generate_inside_container','add_slider_to_container' );
function add_slider_to_container() {
    if ( is_front_page() ) : ?>
        <div class="grid-container">
            [metaslider id=913]
        </div>
    <?php endif;
}

Adding PHP: https://generatepress.com/knowledgebase/adding-php-functions/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Suzanne]

Hi Tom,
Finally getting back to this after the Christmas holiday. Merry Christmas!

I removed the hooks, added the function code you offered to my functions.php file via Appearance/Editor/functions.php in the WP Dashboard. Unfortunately the shortcode for the metaslider is displaying [metaslider id=913], not the actual metaslider.

Here is how it looks:
http://tinyurl.com/zqdsbmf

What am I missing?

[Tom]

Merry Christmas! 🙂

Try this instead:

add_action( 'generate_inside_container','add_slider_to_container' );
function add_slider_to_container() {
    if ( is_front_page() ) : ?>
        <div class="grid-container">
            <?php echo do_shortcode( '[metaslider id=913]' ); ?>
        </div>
    <?php endif;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Suzanne]

YAY!!! It’s finally working 🙂 http://tinyurl.com/zqdsbmf

Thank you so much for your patience.

[Tom]

You’re welcome! Happy to help 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Terry]

Hey Tom,

I’m using this to get a slider to display correctly on one of my sites, too, but I’m concerned that I’m going to lose the changes with an update. Have you figured out a way to enable us to add this as a hook yet?

Many thanks!

Terry

[Tom]

Hi Terry,

If you add it using these instructions then you won’t lose it with an update: https://generatepress.com/knowledgebase/adding-php-functions/

Let me know if you need more info 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts