Home Page Template

[Mike Tolliver]

Hi Tom,

I downloaded the Cosmo Slider Plugin from Slidervilla and am trying to get a slider to take up the entire width of the page (example here). Their customer support indicated that they actually have a snippet of php to add to a template to make it do this very thing:

<?php if(function_exists(“get_cosmo_slider”)){get_cosmo_slider($slider_id=”1″,$set=”1″);}?>

I have been trying to figure out how to add this to a home page template so that I dont have to burn one of my other templates to make it do this. Do you have a suggestion for how to make this work?

[Tom]

Do you have GP Hooks?

If so, you could do this in the “After Header” hook (or wherever):

<?php if ( is_front_page() ) : ?>
      <?php if(function_exists("get_cosmo_slider")){get_cosmo_slider($slider_id="1",$set="1");}?>
<?php endif; ?>

That would include your slider on the homepage, below your header, full width.

Be sure to check the “Execute PHP” checkbox.

Let me know if you have any questions 🙂

[Mike Tolliver]

Hey Tom,

I do have GP Hooks, and that worked like a charm. However, I decided I could not do nearly enough with the Cosmo Slider and went and got Master Slider instead. Way happier with that, but now I am trying to figure out how to do the same thing. I think it will be a similar strategy you outlined above, but I took a swing at the code and couldnt get it to work. They say in their documentation (here) that you can add a slider in the manner you suggested by adding this php:

<?php masterslider ( $slider_id ); ?>

OR

<?php echo get_masterslider ( $slider_id ); ?>

Any thoughts on how I might adapt the code you gave me above to make this slider work?

Thanks again!

[Tom]

It should just be something like this:

<?php if ( is_front_page() ) : ?>
      <?php if(function_exists("masterslider")) { 
            masterslider( 1 );
      } ?>
<?php endif; ?>

“1” being the ID of your slider.

[Mike Tolliver]

Yes, that has put the slider on the home page. The problem is that I have fixed my header and footer and I would like the slider to entirely fill the space in between. Currently I have disabled all of the elements between the two, but there is still a space that is scrollable. Also, the slider currently loads with about 1/6th of the slider hidden by the header.

Any thoughts?

[Tom]

Which hook are you adding it to?

Can you link me to the page so I can take a look?

Thanks!

[Mike Tolliver]

I put the code in the “After Header” hook.

I have to keep my page locked down until it is compliance approved (I work in finance), but I can private message you the code to get in and see it. What is the best way to send it to you?

[Tom]

You can send it to me at support@generatepress.com 🙂

[Tom]

Hmm tough one, I’m not sure it’s possible to set the slider to be 100% height of the browser without some pretty custom javascript – unless of course the plugin has that option built in.

As for the content hiding behind the header, that’s because when you fix an element, the rest of the element can’t see it.

You’ll have to find the exact height of your header and navigation, and then add this CSS to create enough spacing to show all of your content:

@media (min-width: 769px) {
      body {
            padding-top: 150px;
      }
}

The 150px being whatever the height of your header is.

[Mike Tolliver]

Okay, that fixed the spacing underneath the header. And it turns out my slider actually does have a “fit to width” option that automatically resizes the height to fit. I think the final thing to do to make this work is figure out how to disable all other elements between the header and footer on this page. I have used your ‘Disable Elements’ extension to remove the Post Image/Page Header and Headline/Post Title elements, but there is still a space left below the slider that seems to include the text/content box and any spacing associated with its inclusion on a page. Can we remove those elements so it is just the slider?

[Tom]

Give this a try:

.home .container {
      display: none;
}

[Mike Tolliver]

That worked like a charm! Final question:

If I wanted to remove the container on select pages or posts without adding that css to an entire template, how would I do that?

[Tom]

You’ll need to add the CSS regardless, but you can target specific pages with their body class.

For example, you can target the homepage like this:

.home .container {
      display: none;
}

Or specific pages by their ID, like this:

.page-id-xx .container {
      display: none;
}

xx would be the ID of the page.

Let me know if you need more info 🙂

[Mike Tolliver]

Okay that worked great, but I actually do have another question (sorry!). The CSS worked, but when I tried to add the slider after the header on that same page using:

<?php if ( is_page-id-xx() ) : ?>
<?php if(function_exists(“masterslider”)) {
masterslider( 2 );
} ?>
<?php endif; ?>

It didnt work. Thoughts?

[Tom]

<?php if ( is_page-id-xx() ) : ?> is incorrect.

It should be: <?php if ( is_page('xx') ) : ?>

More info on conditionals here: https://codex.wordpress.org/Conditional_Tags

[Author]

Posts