Get slider like the one on the front page slider on other pages?

Hello! I really want to be able to have other pages of the site have the large full screen slider or even just a large (full screen) static image with the navigation overlay on other pages.

Is it possible to do this?

Hello there,

In order to enable the full screen slider on other selected pages, please try doing the following:

  1. Download the Sydney child theme
  2. Paste the following function into the child theme’s functions.php file


function sydney_slider_template() {

   //Get the slider options
   $speed      = get_theme_mod('slider_speed', '4000');
   $text_slide = get_theme_mod('textslider_slide', 0);

   //Slider text
   if ( !function_exists('pll_register_string') ) {
       $slider_title_1     = get_theme_mod('slider_title_1', 'Welcome to Sydney');
       $slider_title_2     = get_theme_mod('slider_title_2', 'Ready to begin your journey?');
       $slider_title_3     = get_theme_mod('slider_title_3');
       $slider_title_4     = get_theme_mod('slider_title_4');
       $slider_title_5     = get_theme_mod('slider_title_5');
       $slider_subtitle_1  = get_theme_mod('slider_subtitle_1','Feel free to look around');
       $slider_subtitle_2  = get_theme_mod('slider_subtitle_2', 'Click the button below');
       $slider_subtitle_3  = get_theme_mod('slider_subtitle_3');
       $slider_subtitle_4  = get_theme_mod('slider_subtitle_4');
       $slider_subtitle_5  = get_theme_mod('slider_subtitle_5');
   } else {
       $slider_title_1     = pll__(get_theme_mod('slider_title_1', 'Welcome to Sydney'));
       $slider_title_2     = pll__(get_theme_mod('slider_title_2', 'Ready to begin your journey?'));
       $slider_title_3     = pll__(get_theme_mod('slider_title_3'));
       $slider_title_4     = pll__(get_theme_mod('slider_title_4'));
       $slider_title_5     = pll__(get_theme_mod('slider_title_5'));
       $slider_subtitle_1  = pll__(get_theme_mod('slider_subtitle_1','Feel free to look around'));
       $slider_subtitle_2  = pll__(get_theme_mod('slider_subtitle_2', 'Click the button below'));
       $slider_subtitle_3  = pll__(get_theme_mod('slider_subtitle_3'));
       $slider_subtitle_4  = pll__(get_theme_mod('slider_subtitle_4'));
       $slider_subtitle_5  = pll__(get_theme_mod('slider_subtitle_5'));
   }

   ?>

   <div id="slideshow" class="header-slider" data-speed="<?php echo esc_attr($speed); ?>">
       <div class="slides-container">
           <?php
               if ( get_theme_mod('slider_image_1', get_template_directory_uri() . '/images/1.png') ) {
                   echo '<div class="slide-item" style="background-image:url(' . esc_url(get_theme_mod('slider_image_1', get_template_directory_uri() . '/images/1.jpg')) . ');">';
                   ?>
                       <div class="slide-inner">
                           <div class="contain animated fadeInRightBig text-slider">
                               <h2 class="maintitle"><?php echo esc_html($slider_title_1); ?></h2>
                               <p class="subtitle"><?php echo esc_html($slider_subtitle_1); ?></p>
                           </div>
                           <?php sydney_slider_button(); ?>
                       </div>
                   <?php
                   echo '</div>';

               }
               if ( get_theme_mod('slider_image_2', get_template_directory_uri() . '/images/2.jpg') ) {
                   echo '<div class="slide-item" style="background-image:url(' . esc_url(get_theme_mod('slider_image_2', get_template_directory_uri() . '/images/2.jpg')) . ');">';
                   ?>
                       <div class="slide-inner">
                           <div class="contain animated fadeInRightBig text-slider">
                               <h2 class="maintitle"><?php echo esc_html($slider_title_2); ?></h2>
                               <p class="subtitle"><?php echo esc_html($slider_subtitle_2); ?></p>
                           </div>
                           <?php sydney_slider_button(); ?>
                       </div>
                   <?php
                   echo '</div>';
               }
               if ( get_theme_mod('slider_image_3') ) {
                   echo '<div class="slide-item" style="background-image:url(' . esc_url(get_theme_mod('slider_image_3')) . ');">';
                   ?>
                       <div class="slide-inner">
                           <div class="contain animated fadeInRightBig text-slider">
                               <h2 class="maintitle"><?php echo esc_html($slider_title_3); ?></h2>
                               <p class="subtitle"><?php echo esc_html($slider_subtitle_3); ?></p>
                           </div>
                           <?php sydney_slider_button(); ?>
                       </div>
                   <?php
                   echo '</div>';
               }
               if ( get_theme_mod('slider_image_4') ) {
                   echo '<div class="slide-item" style="background-image:url(' . esc_url(get_theme_mod('slider_image_4')) . ');">';
                   ?>
                       <div class="slide-inner">
                           <div class="contain animated fadeInRightBig text-slider">
                               <h2 class="maintitle"><?php echo esc_html($slider_title_4); ?></h2>
                               <p class="subtitle"><?php echo esc_html($slider_subtitle_4); ?></p>
                           </div>
                           <?php sydney_slider_button(); ?>
                       </div>
                   <?php
                   echo '</div>';
               }
               if ( get_theme_mod('slider_image_5') ) {
                   echo '<div class="slide-item" style="background-image:url(' . esc_url(get_theme_mod('slider_image_5')) . ');">';
                   ?>
                       <div class="slide-inner">
                           <div class="contain animated fadeInRightBig text-slider">
                               <h2 class="maintitle"><?php echo esc_html($slider_title_5); ?></h2>
                               <p class="subtitle"><?php echo esc_html($slider_subtitle_5); ?></p>
                           </div>
                           <?php sydney_slider_button(); ?>
                       </div>
                   <?php
                   echo '</div>';
               }
           ?>
       </div>
       <?php if ( $text_slide ) : ?>
           <?php echo sydney_stop_text(); ?>
       <?php endif; ?>
   </div>

   <?php
}

  1. Copy header.php template file from parent theme’s folder into child theme’s and edit it.

  2. Replace the following code block:


<?php sydney_slider_template(); ?>

<div class="header-image">
	<?php sydney_header_overlay(); ?>
	<img class="header-inner" src="<?php header_image(); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" alt="<?php bloginfo('name'); ?>">
</div>

with:


<?php
$pages = array(2); // Page ID(s)
if(is_front_page() || is_page($pages)){
?>

  <?php sydney_slider_template(); ?>

<?php } else { ?>

  <div class="header-image">
    <?php sydney_header_overlay(); ?>
    <img class="header-inner" src="<?php header_image(); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" alt="<?php bloginfo('name'); ?>">
  </div>

<?php } ?>

From the code above, the slider will also be displayed on the page which its ID is 2. See this line: $pages = array(2); // Page ID(s). You get the page ID while you are editing it. On the address bar displays something like: http://yoursite.com/wp-admin/post.php?post=2&action=edit.

To enable it on other pages, change that line into something like:


$pages = array(2,3,4); // Page ID(s)

Separate the page IDs with commas.

  1. Save changes then zip your child theme folder.
  2. Install and activate your child theme.

Kind regards,
Kharis

Thank you. Will try this very soon!

No problem.

I’ll wait to hear back from you regarding your stats.

Regards,
Kharis

Hello Kharis,

thanks a lot for the guidance on this matter. I have used your code and it did basically the right thing: I now have the full screen header on the second page of my website (after a disclaimer page). However, the first part of the IF-CLAUSE in your function appears not to work in mobile and tablet mode. On mobile, I only have a large white space below the menu header. Do you have an idea how to change that?

Also, the function does not correctly insert the roll button / button slider. Has the button name changed? I think the reference “<?php sydney_slider_button(); ?>” is not correct.

I highly appreciate your feedback!
Alex