Setting a custom external link url to a slide

⚠️ Code snippets might not be compatible with the latest version of your theme. Always use a child theme to customize your theme, and test your code on a staging website before migrating to production.

Notice: Since Customizr v3.4.6 and Customizr-Pro 1.2.0 a new set of options has been introduced in the slides editing screen. You will be able to set a custom link url for your image (and button), open it in a new page and link the whole slide.

This snippet will be useful if you need to link a particular slide to an external url.

 

You will need to replace the following texts in the snippet by your values :

MY-IMAGE-ID => this is the WordPress id of the slider’s image for which you need to set the custom link. You can easily find it in the permalink of your media, on the edit screen.

finding-a-wordpress-media-id

MY LINK TITLE => this is the text displayed when hovering the slide’s image

MY-CUSTOM-URL => this is your custom link. Ex : http://www.mywebsite.com

 

Important : for these snippets to work you first need to set a link (that will be overwritten) in the dropdown list when creating the slide

 

Linking the whole slide’s picture to a custom external url

add_filter('tc_slide_background' , 'my_slide_custom_link', 10, 3);
function my_slide_custom_link( $slide_image , $slide_link , $id) {
	//does nothing if the slide's id is not the targeted one
	if ( MY-IMAGE-ID != $id )
		return $slide_image;

	//sets a custom url for the targeted slide
	return sprintf('<a href="%1$s" title="MY LINK TITLE" target="_blank">%2$s</a>',
		'MY-CUSTOM-URL',
		$slide_image
	);
}

 

Replacing the call to action link by a custom external url

add_filter('tc_slide_link_url' , 'my_slide_custom_link', 10, 2);
function my_slide_custom_link( $slide_link , $image_id ) {
	//does nothing if the image's id is not the targeted one
	if ( MY-IMAGE-ID != $image_id )
		return $slide_link;

	//sets a custom url for the targeted slide
	return 'MY-CUSTOM-URL';
}

 

Replacing the call to action link by a custom external url opening in a new tab

  1. Replace http://www.google.com by your own url.
  2. Replace MY-IMAGE-ID by your image ID (this must be a number)
function my_new_target() {
    return 'http://www.google.com';
}

add_filter('tc_slide_link_url' , 'my_slide_custom_link', 10, 2);
function my_slide_custom_link( $slide_link , $image_id ) {
    //does nothing if the image's id is not the targeted one
    if ( MY-IMAGE-ID != $image_id )
        return $slide_link;
    
    add_action('wp_footer' , 'open_external_link_in_new_tab');
    function open_external_link_in_new_tab() {
        ?>
        <script type="text/javascript">
            jQuery(document).ready(function () {
                ! function ($) {
                    var new_target = '<?php echo my_new_target() ?>';
                    //prevents js conflicts
                    "use strict";

                    //checks if the target slide url exists first
                    if ( $('a[href="<?php echo my_new_target() ?>"]' , '.customizr-slide' ).length === 0 )
                        return;

                    //adds the new button html content after the original button
                    $('a[href="<?php echo my_new_target() ?>"]' , '.customizr-slide').attr('target' , '_blank');
                }(window.jQuery)
            });
        </script>
        <?php
    }
    //sets a custom url for the targeted slide
    return my_new_target();
}

 

Where to paste this code? => in your functions.php file. I strongly recommend to create a child theme. Download a start-up child theme here.

Everything you need to know about child theme with Customizr here.

Leave a Reply to Marco Cancel reply

Your email address will not be published. Required fields are marked *

74 thoughts on “Setting a custom external link url to a slide”