Slider Images and Search Button for Page Headers

Hi Kharis,

I experimented with having Slider Images for Pages as well but

a) there is no way to change the Images as Pages simply pull from the Frontpage Slider Images

b) the Search box disappears even though I want it

TYVM,
Christie

Hello there,

a) there is no way to change the Images as Pages simply pull from the Frontpage Slider Images

Currently there is no such that feature in the theme’s customizer to replace the slide image in selected page. However you still have a chance to accomplish it by manually edit the slide PHP function in child theme mode, so you won’t have any problem updating the theme in the future. The first thing to do is creating a child theme or use our premade one as a starting point. Then you’ll override the main slider function into child theme’s functions.php file. Open the Sydney theme folder in your computer, then open this file: inc > slider.php. Copy the following function into your child theme’s functions.php file.


function sydney_slider_template() {

    if ( (get_theme_mod('front_header_type','slider') == 'slider' && is_front_page()) || (get_theme_mod('site_header_type') == 'slider' && !is_front_page()) ) {

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

    //Slider text
    if ( !function_exists('pll_register_string') ) {
    	$titles = array(
    		'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'),
    	);
    	$subtitles = array(
    		'slider_subtitle_1' => get_theme_mod('slider_subtitle_1', 'Feel free to look around'),
    		'slider_subtitle_2' => get_theme_mod('slider_subtitle_2', 'Feel free to look around'),
    		'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 {
    	$titles = array(
    		'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') ),
    	);
    	$subtitles = array(
    		'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', 'Feel free to look around') ),
    		'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') ),    		
    	);
    }
    $images = array(
    		'slider_image_1' => get_theme_mod('slider_image_1', get_template_directory_uri() . '/images/1.jpg'),
    		'slider_image_2' => get_theme_mod('slider_image_2', get_template_directory_uri() . '/images/2.jpg'),
    		'slider_image_3' => get_theme_mod('slider_image_3'),
    		'slider_image_4' => get_theme_mod('slider_image_4'),
    		'slider_image_5' => get_theme_mod('slider_image_5'),
    );

    ?>

    <div id="slideshow" class="header-slider" data-speed="<?php echo esc_attr($speed); ?>" data-mobileslider="<?php echo esc_attr($mobile_slider); ?>">
        <div class="slides-container">

        <?php $c = 1; ?>
        <?php foreach ( $images as $image ) {
        	if ( $image ) {
        		?>
                <div class="slide-item" style="background-image:url('<?php echo esc_url( $image ); ?>');">
                    <img class="mobile-slide preserve" src="<?php echo esc_url( $image ); ?>"/>
                    <div class="slide-inner">
                        <div class="contain animated fadeInRightBig text-slider">
                        <h2 class="maintitle"><?php echo esc_html( $titles['slider_title_' . $c] ); ?></h2>
                        <p class="subtitle"><?php echo esc_html( $subtitles['slider_subtitle_' . $c] ); ?></p>
                        </div>
                        <?php echo $button; ?>
                    </div>
                </div>
                <?php
        	}
        	$c++;
        }
        ?>

        </div>  
        <?php if ( $text_slide ) : ?>
            <?php echo sydney_stop_text(); ?>
        <?php endif; ?>
    </div>

    <?php
    }
}


In your child theme’s function.php file, find this code block:


$images = array(
		'slider_image_1' => get_theme_mod('slider_image_1', get_template_directory_uri() . '/images/1.jpg'),
		'slider_image_2' => get_theme_mod('slider_image_2', get_template_directory_uri() . '/images/2.jpg'),
		'slider_image_3' => get_theme_mod('slider_image_3'),
		'slider_image_4' => get_theme_mod('slider_image_4'),
		'slider_image_5' => get_theme_mod('slider_image_5'),
);

That is where the slide image is taken from. To use different image in specific page, add this code after that code:


if( is_page('PAGE_ID_NUMBER') ) {
 $images = array(
 		'slider_image_1' => 'http://yoursite.com/path/to/slide/image1.jpg',
 		'slider_image_2' => 'http://yoursite.com/path/to/slide/image2.jpg',
    'slider_image_3' => 'http://yoursite.com/path/to/slide/image3.jpg',
 		'slider_image_4' => 'http://yoursite.com/path/to/slide/image4.jpg',
    'slider_image_5' => 'http://yoursite.com/path/to/slide/image5.jpg'        
 );
}

Replace PAGE_ID_NUMBER with your page ID, which can be found when you edit a page; in the address bar, you’ll see something like:


yoursite.com/wp-admin/post.php?post=20&action=edit

If want your others pages have their own slide images, replicate that code block and adjust the ID. So it would look like this:


if( is_page('20') ) {
 $images = array(
 		'slider_image_1' => 'http://yoursite.com/path/to/slide/image1.jpg',
 		'slider_image_2' => 'http://yoursite.com/path/to/slide/image2.jpg',
    'slider_image_3' => 'http://yoursite.com/path/to/slide/image3.jpg',
 		'slider_image_4' => 'http://yoursite.com/path/to/slide/image4.jpg',
    'slider_image_5' => 'http://yoursite.com/path/to/slide/image5.jpg'        
 );
}

if( is_page('21') ) {
 $images = array(
 		'slider_image_1' => 'http://yoursite.com/path/to/slide/image11.jpg',
 		'slider_image_2' => 'http://yoursite.com/path/to/slide/image12.jpg',
    'slider_image_3' => 'http://yoursite.com/path/to/slide/image13.jpg',
 		'slider_image_4' => 'http://yoursite.com/path/to/slide/image14.jpg',
    'slider_image_5' => 'http://yoursite.com/path/to/slide/image15.jpg'        
 );
}

if( is_page('22') ) {
 $images = array(
 		'slider_image_1' => 'http://yoursite.com/path/to/slide/image21.jpg',
 		'slider_image_2' => 'http://yoursite.com/path/to/slide/image22.jpg',
    'slider_image_3' => 'http://yoursite.com/path/to/slide/image23.jpg',
 		'slider_image_4' => 'http://yoursite.com/path/to/slide/image24.jpg',
    'slider_image_5' => 'http://yoursite.com/path/to/slide/image25.jpg'        
 );
}

Then you can install and activate your child theme. But before doing so, use this plugin to export the existing customizer settings, in case it won’t automatically be synced when the child theme is active, and you’ll need to import it when child theme is active.

> b) the Search box disappears even though I want it

It happens as the search widget resides in the frontpage in the page builder row. To display it on all pages, you will need a search widget be placed in your site’s footer. Use this plugin to define a class name to your widget. The class name must be the top-search as same as you used in your first search widget.

Regards,
Kharis

TYVM Kharis, great support!

I will experiment on this soon even though it looks scarily technical!

Cheers,
Christie

Hi kharis,

Can I trouble you to elaborate on this?

"> b) the Search box disappears even though I want it

It happens as the search widget resides in the frontpage in the page builder row. To display it on all pages, you will need a search widget be placed in your site’s footer. Use this plugin to define a class name to your widget. The class name must be the top-search as same as you used in your first search widget."

I cannot figure out what to do.

Chees,
Christie

Hello Christie,

Thank you for getting back.

  1. Install and activate the Widget CSS Classes plugin
  2. Navigate to Appearance > Widgets
  3. Pick a search widget and put it into Footer 1 widgets area
  4. In the CSS Classes input field, enter top-search

Regards,
Kharis