Use different call to action buttons for each different slide

  • Resolved stellatois

    (@stellatois)


    8 years, 10 months ago

    Hi

    Is it possible to create seperate CTA buttons for each slide? I had a look in the slider.php file but PHP is foreign to me and I couldn’t figure it out. Also tried to take a crash course in PHP via Google so I could interpret the file but I think I might still have a ways to go. If modifying the PHP file I’ll do it in a child theme.

    Thanks in advance for any assistance

Viewing 15 replies - 1 through 15 (of 29 total)

  • let me check it. do you need each buttons to have different links ?

    Thread Starter stellatois

    (@stellatois)

    Yes different links and different text

    How many CTAs will you add ?

    Thread Starter stellatois

    (@stellatois)

    One for each slide on the slider which I think the max is 5

    ok, i will send you code

    Thread Starter stellatois

    (@stellatois)

    Thanks

    /**
BOF Add extra "Call to action" buttons

Note: This code was tested in sydney.1.22 theme

Put this code in your child theme functions.php file,
try in your local system before upload to live server
*/

/**
Adds extra fields in customizer
*/
function sydney_customize_register_custom($wp_customize)
{
	for($i=2;$i<=5;$i++)
	{
		$wp_customize->add_setting(
			'slider_button_url'.$i,
			array(
				'default' => '#primary',
				'sanitize_callback' => 'esc_url_raw',
			)
		);
		$wp_customize->add_control(
			'slider_button_url'.$i,
			array(
				'label' => __( 'URL for your call to action button '.$i, 'sydney' ),
				'section' => 'sydney_slider',
				'type' => 'text',
				'priority' => 31
			)
		);
		$wp_customize->add_setting(
			'slider_button_text'.$i,
			array(
				'default' => __('Click to begin','sydney'),
				'sanitize_callback' => 'sydney_sanitize_text',
			)
		);
		$wp_customize->add_control(
			'slider_button_text'.$i,
			array(
				'label' => __( 'Text for your call to action button '.$i, 'sydney' ),
				'section' => 'sydney_slider',
				'type' => 'text',
				'priority' => 32
			)
		);
	}
}
add_action( 'customize_register', 'sydney_customize_register_custom' );

/*Overrides the parent theme function to add extra buttons in slider*/
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_speed = get_theme_mod('textslider_speed', '4000');
    $text_slide = get_theme_mod('textslider_slide', 0);
    if (!$text_slide) {
        $slide_toggle = true;
    } else {
        $slide_toggle = false;
    }

    //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');
        $slider_button      = get_theme_mod('slider_button_text', 'Click to begin');
        $slider_button_url  = get_theme_mod('slider_button_url','#primary');
		$slider_button2      = get_theme_mod('slider_button_text2', 'Click to begin');
        $slider_button_url2  = get_theme_mod('slider_button_url2','#primary');
		$slider_button3      = get_theme_mod('slider_button_text3', 'Click to begin');
        $slider_button_url3  = get_theme_mod('slider_button_url3','#primary');
		$slider_button4      = get_theme_mod('slider_button_text4', 'Click to begin');
        $slider_button_url4  = get_theme_mod('slider_button_url4','#primary');
		$slider_button5      = get_theme_mod('slider_button_text5', 'Click to begin');
        $slider_button_url5  = get_theme_mod('slider_button_url5','#primary');
    } 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'));
        $slider_button      = pll__(get_theme_mod('slider_button_text', 'Click to begin'));
        $slider_button_url  = pll__(get_theme_mod('slider_button_url','#primary'));
		$slider_button2      = pll__(get_theme_mod('slider_button_text2', 'Click to begin'));
        $slider_button_url2  = pll__(get_theme_mod('slider_button_url2','#primary'));
		$slider_button3      = pll__(get_theme_mod('slider_button_text3', 'Click to begin'));
        $slider_button_url3  = pll__(get_theme_mod('slider_button_url3','#primary'));
		$slider_button4      = pll__(get_theme_mod('slider_button_text4', 'Click to begin'));
        $slider_button_url4  = pll__(get_theme_mod('slider_button_url4','#primary'));
		$slider_button5      = pll__(get_theme_mod('slider_button_text5', 'Click to begin'));
        $slider_button_url5  = pll__(get_theme_mod('slider_button_url5','#primary'));
    }
	?>
	<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>';

				}
			    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>';
				}
			    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>';
				}
			    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>';
				}
			    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>';
				}
			?>
	    </div>

        <div class="text-slider-section">
            <div class="text-slider" data-speed="<?php echo esc_attr($text_speed); ?>" data-slideshow="<?php echo esc_attr($slide_toggle); ?>">
                <ul class="slide-text slides">
                	<?php if ( get_theme_mod('slider_image_1', get_template_directory_uri() . '/images/1.png') ) : ?>
                    <li>
                        <div class="contain">
                            <h2 class="maintitle"><?php echo esc_html($slider_title_1); ?></h2>
                            <p class="subtitle"><?php echo esc_html($slider_subtitle_1); ?></p>
                        </div>

						<?php if ($slider_button) : ?>
							<a href="<?php echo esc_url($slider_button_url); ?>" class="roll-button button-slider"><?php echo esc_html($slider_button); ?></a>
						<?php endif; ?>

                    </li>
               		<?php endif; ?>
               		<?php if ( get_theme_mod('slider_image_2', get_template_directory_uri() . '/images/2.jpg') ) : ?>
                    <li>
                        <div class="contain">
                            <h2 class="maintitle"><?php echo esc_html($slider_title_2); ?></h2>
                            <p class="subtitle"><?php echo esc_html($slider_subtitle_2); ?></p>
                        </div>

						<?php if ($slider_button2) : ?>
							<a href="<?php echo esc_url($slider_button_url2); ?>" class="roll-button button-slider"><?php echo esc_html($slider_button2); ?></a>
						<?php endif; ?>
                    </li>
                    <?php endif; ?>
                    <?php if ( get_theme_mod('slider_image_3') ) : ?>
                    <li>
                        <div class="contain">
                            <h2 class="maintitle"><?php echo esc_html($slider_title_3); ?></h2>
                            <p class="subtitle"><?php echo esc_html($slider_subtitle_3); ?></p>
                        </div>

						<?php if ($slider_button3) : ?>
							<a href="<?php echo esc_url($slider_button_url3); ?>" class="roll-button button-slider"><?php echo esc_html($slider_button3); ?></a>
						<?php endif; ?>
                    </li>
                    <?php endif; ?>
                    <?php if ( get_theme_mod('slider_image_4') ) : ?>
                    <li>
                        <div class="contain">
                            <h2 class="maintitle"><?php echo esc_html($slider_title_4); ?></h2>
                            <p class="subtitle"><?php echo esc_html($slider_subtitle_4); ?></p>
                        </div>

						<?php if ($slider_button4) : ?>
							<a href="<?php echo esc_url($slider_button_url4); ?>" class="roll-button button-slider"><?php echo esc_html($slider_button4); ?></a>
						<?php endif; ?>
                    </li>
                    <?php endif; ?>
                    <?php if ( get_theme_mod('slider_image_5') ) : ?>
                    <li>
                        <div class="contain">
                            <h2 class="maintitle"><?php echo esc_html($slider_title_5); ?></h2>
                            <p class="subtitle"><?php echo esc_html($slider_subtitle_5); ?></p>
                        </div>

						<?php if ($slider_button5) : ?>
							<a href="<?php echo esc_url($slider_button_url5); ?>" class="roll-button button-slider"><?php echo esc_html($slider_button5); ?></a>
						<?php endif; ?>
                    </li>
                    <?php endif; ?>
                </ul>
            </div>

        </div>
	</div>
	<?php
	}
}
//EOF Add extra "Call to action" buttons
    Thread Starter stellatois

    (@stellatois)

    Thanks a bunch! WordPress says there’s an unexpected } on line 202 though

    Edit: sorry it’s on line 205

    Put the code very end of your funtions.php file

    Thread Starter stellatois

    (@stellatois)

    Should the functions file have anything else in it this is all it has (in the child theme)?

    just place code inside <?php ?> tags of functions.php file

    Thread Starter stellatois

    (@stellatois)

    It works! thanks so much!

    You are welcome, set this topic as resolved.

    Thread Starter stellatois

    (@stellatois)

    Oops sorry

    you, sir, are awesome! thank you.
    do you by any chance also have a code for overlay in slider – to make the images darker? ??

Viewing 15 replies - 1 through 15 (of 29 total)
  • The topic ‘Use different call to action buttons for each different slide’ is closed to new replies.

Tags