Smaller version of slider in header?

[FoxdenVixen]

Here is an interesting question. What if I wanted to take the slider code out of the front-page.php and put it in the header.php page with the slider being much smaller and to the right of the logo? Is this possible? Plus I would want to turn it completely off in the mobile pages. I do realize that I need to make a copy of both pages in the parent theme and add them to the child theme. Then do my changes.

[Alyssa]

@foxdenvixen no problem. The slider code is right there in the front-page code. If you want it to have a max/fixed width I’d encapsulate the code with a unique div class. The just add code via CSS to hide the div on mobile.

[FoxdenVixen]

Thank you TJ. I will play around with this to see if I can get it to work.

[FoxdenVixen]

This is the code that I found in front-page.php. I wrapped a div around it but have not styled it yet. When I add the code to the header right under the logo section, it messes up the navigation. Could this be because I have not styled it yet and have not activated the slides? WP can get confusing with all the different pages that control different aspects of the site. I might need help understanding where to put the code and how to style it so that it is small and to the right of the logo in the header.

<!-- Frontpage Slider -->
    <div class="header_slider".
		<?php get_template_part( 'content', 'slides' ); ?>
      </div>

[Alyssa]

@foxdenvixen yes, it is like that because you have not styled it yet. But it also might be difficult to add to certain areas of the site depending on the responsiveness of the theme. Start out by sizing it to 200px or whatever you want. Then worry about moving other elements and trying to make it fit where you want it.

[FoxdenVixen]

Thanks, @tjchester. I will play around with this. If I need more help, I will post here.

[FoxdenVixen]

Yay got this to work and it looks good. Had to re-style the logon part but it works.

[FoxdenVixen]

There is one more question here….how do I set the header to only have the slider on the home page?

[Alyssa]

@foxdenvixen you will need to put it in this if statement to only appear on the front page:
if ( is_front_page() && is_home() ) {}

[FoxdenVixen]

If I am using the default fwslider, do I use that between the brackets?

[FoxdenVixen]

Tried this but getting a syntax and parse error. No real PHP knowledge here. Please help with the exact code. Thanks.

<?php if ( is_front_page() && is_home() ) {fwslider}; ?>

[Alyssa]

@foxdenvixen might be beneficial to learn it with all this WordPress work 😉
Encapsulate your current code like you posted above but also encapsulated your own div for styling:

if ( is_front_page() && is_home() ) { ?>
<!-- Frontpage Slider -->
    <div class="header_slider">
		<?php get_template_part( 'content', 'slides' ); ?>
      </div>
<?php } ?>

[FoxdenVixen]

@tjchester, I know that I should learn PHP but I really don’t have the time to stop working for my client to take a few weeks to learn it.

This is what I put and now the slider is gone –

<?php if ( is_front_page() && is_home() ) { ?>
<!-- Frontpage Slider -->
    <div class="header_slider">
		<?php get_template_part( 'content', 'slides' ); ?>
      </div>
<?php } ?>

I am using the default fwslider. The styling for it uses div id not div class. When I do an inspect element in Chrome it is #fwslider. I tried changing the CSS to match “header_slider” but that didn’t work either. I have googled how to do what I am wanting to do by having the slider only on the home page in the header and have found all sorts of different coding. All of them had the name of the actual slider being used in the code. I just want to make sure I am doing this correctly for THIS theme.

Some examples of code that I found are –

<?php if ( is_home() && function_exists('easingsliderlite') ) { easingsliderlite(); } ?>

another example –

<?php if( is_front_page() AND function_exists('easing_slider')) { easing_slider(); } ?>

I know every theme is different. Please be patient with me.

[FoxdenVixen]

Forgot to add how I styled it –

#fwslider {
float: right;
width: 500px;
margin-right: 200px;
position: relative;
overflow: hidden;
background-color: #000000;
background: rgba(0,0,0,0.8);
box-shadow: #030303 4px 4px 4px;    
}
#fwslider .timer {
height: 4px;
width: 40px;
background-color: #000;
float: left;
margin-right: 10px;
display: none;
}

I turned the timer styling off and added a drop shadow to the slider.

[Alyssa]

@foxdenvixen try this instead:

if ( is_front_page() ) { ?>
<!-- Frontpage Slider -->
    <div class="header_slider">
		<?php get_template_part( 'content', 'slides' ); ?>
      </div>
<?php } ?>