Linking the whole slide’s picture to a page/post in Customizr

⚠️ 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. The caption, though, will not be linked. If you want the caption linked too please refer to the snippet (1) which is valid for this purpose only for the versions aforementioned (and above).

(1)

add_action('wp_head' , 'link_slide_caption');
function link_slide_caption() {
    //wraps the slider caption in the same link as the slide link
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function () {
            ! function ($) {
                //prevents js conflicts
                "use strict";
 
                $( '[id^=customizr-slider] .carousel-caption' ).each(function( index ) {
                  var link = $( this ).parent().find('a').attr('href');
                  $(this).wrap('<a href="'+link+'"></a>');
                });
            }(window.jQuery)
        });
    </script>
    <?php
}

 

OUTDATED

In the Customizr WordPress theme, you can add a clickable call to action button to your slides, linked to a page/post. This is the default’s feature out of the box.

 

The following short snippet allows to link the entire slide  (= your picture)  to your selected link. This is a good alternative if you want to keep the link without using a call to action button.

Updated on March 31st,  2014, thanks to @d4z_c0nf

(2)

add_action('wp_head' , 'link_whole_slide');
function link_whole_slide() {
   //sets the slider image link    
   add_filter('tc_slide_background' , 'my_slide_link', 10, 3);
    function my_slide_link( $slide_image , $slide_link, $attachment_id) {
        //sets the slider image link
        return sprintf('<a href="%1$s" title="%2$s">%3$s</a>',
            $slide_link,
            get_the_title($attachment_id), //will use the title of the picture on mouse hovering
            $slide_image
        );
    }
    //wraps the slider caption in the same link as the call to action button
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function () {
            ! function ($) {
                //prevents js conflicts
                "use strict";
 
                $( '.carousel-caption' ).each(function( index ) {
                  var link = $( this ).parent().find('a').attr('href');
                  $(this).wrap('<a href="'+link+'"></a>');
                });
            }(window.jQuery)
        });
    </script>
    <?php
}

 

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 Menaka S Cancel reply

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

61 thoughts on “Linking the whole slide’s picture to a page/post in Customizr”