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


Note :This snippet works only with the Classical style option. The Classical style option can be enabled in Appearance > Customize > Advanced > Theme Style. More about the theme style option here


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)

 

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)

 

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.


Related Snippets you may also like


We can help you to implement this snippet

Coding is our job and we know WordPress inside and out. We can help you to customize your website with small chunks of code snippets like this one.

Send us your request and we'll get back to you quickly.



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

  • Andre Paquin

    Hi, I’m a new Customizr user and am trying to understand how to link the button on my homepage slides to pages within my website. There seems to be a dropdown menu displaying pages and posts, but they are not the pages I want this button to link to. I would sure appreciate some insight from you more experienced users and even from you, Nicolas. Thanks.

  • Fred Belanger

    Hello, I am creating a single page site. I would like to link from the slider slides (the whole slide, not a button please) to the “contact us” section lower on the front/home page, so that it “scrolls” down the page when clicked. I have seen this on other single page sites. I just don’t know how to do it! Right now they link to a separate contact us page. This is not ideal. A single page is the goal. Any one have suggestions? Thanks!

  • Martin

    Hi, Many Thanks for this theme and the great support behind,
    I was wondering is there a way to remove the link entirely from sliders, so even hovering not to change the cursor?

    Many Thanks in advance

  • David

    I try adding this code snippet to my child theme functions.php but then my site breaks and I get the error;

    my functions.php looks like this: http://pastebin.com/fe1QDDmH

    I’m running Customizr 3.2.8 in WordPress 4.1.

    Help gratefully received!!

  • Christian

    Hi,

    first of all: Thanks for the great Theme!

    Now my Problem: If i use this snippet, on one of my slides the lower part is kind of cut off and shows only white.
    Do you have any idea?

    The Page is still under construction.

      • Christian

        Hi Nicolas,
        the image size WAS 1920×1200 and i changed it to 1200×800 and regenerated the thumbnails. Now it works.
        So, thanks for the hint. Even though i dont understand, why it works, when the image is smaller.

  • John

    Hi.

    I copied and pasted as is and put it in my childs functions.php file (which was empty before adding this) and it crashed my website. I went in the back and deleted my childs function.php file.

    That got my website back to square 1 – great, so then I added the code to the parent function.php file and then the slider disappeared.

    any ideas? Thanks in advance.

  • Gilded

    Hello Nicolas,

    Sorry for the delay getting back to you. I did not get an email notification. I got it to work. It was due to a bit of css code. Thank you for the quick feedback.

    This may be the wrong page, so feel free to delete it but is there a way to add a phone number to the top of the website’s page or menu or something visible?

  • Gilded

    Hello,

    I am using the snippet above. Thank you It does exactly what I wanted. My only observation is that it does on any of my android browsers (tested on chrome and Firefox). It works on my phone but I don’t get any links, whether I use the snippet or the callout button. Would you help please? The site is at http://www.gildednights.com

    Thank you.

  • Mark

    So, if I want to make this as simple as possible to add on to later, how can I go about linking the slider to the recent posts. What I want to do is have the slider update every time I add a new post and have that image change with it and everything. But I don’t want to go into the code every time, just add a post. Is this possible? Thanks 🙂

  • joana

    hi!

    Pasted the snippett and it works but my image size has changed. It seems that my css code that tells the image what size it should be it’s not working anymore.

    Any solution?

  • Kadon

    I really like the way this snippet works, except I would rather it display my images’ alternate text instead of the title when you hover over it. Is there a way to change that line in the snippet to make that happen?
    Thanks!

  • Ian Ballantine

    Thanks Nicolas – works a treat.
    Incidentally, just love the way child theme works. No mods to main theme code of course but just makes it so easy to keep track of changes. All in one or two files (functions.php and style.css).
    Incidentally, it may be worth mentioning that when linking a slider to an external link, it is possible to also link to a category by substituting the following in ‘MY-CUSTOM-URL’: ‘index.php?cat=5’.
    Thanks again.

  • Ian Ballantine

    Great snippet thank you. I am combining this with snippett linking slider to external link.
    How can I include a “title” in the link so it shows on mouseover on the slider?
    In the links to external pages, you specify the title for that specific link on that specific slider. But for the other sliders in the same slider set how can we get a description of the link ie the “title”?
    I have modified the code to test inserting actual text and it works but of course will appear on all sliders.

    Thanks

    • Nicolas Post author

      Hi Ian, I just updated the snippet to add a title (the title of the attachment) to display on mouse hover.
      Hope this will be useful, best.

  • Christos Bitsis

    Hi,
    I have been trying to use this snippet in my site and the result is that the “Enable/disable slider’s slides centering on any devices” is no longer working.
    You can check it here: http://kidmedia.co/

    Nicolas , thank you for your really GREAT work! Your theme is wonderful!

  • Jen

    Hi Nicolas
    I found the snippet for linking to an external url in the slider, which I think will work for my previous question.
    Feel free to delete that comment.

    Thanks 🙂

  • Jen

    Hi! Thank you so much for the excellent support you provide for this theme.

    I’ve just created my functions.php file and successfully uploaded it so that my entire photo is linked. I would like to link to a specific page, which is not in the drop down list and I don’t want to use a button. I thought I could create a link when editing the image – I believe I read that somewhere on the wordpress forum support section, but it didn’t work. It seems I have to make a selection from the drop down menu in order for the link to work.

    Is there a way to make it so I can link to a custom url that isn’t in the drop down?
    Thanks again for any help you can provide!

  • Jake

    Gday,

    I was testing out this code, and identified that it wasn’t linking the text in the slider, I don’t believe this is due to a plug in crash, as the only plugins in effect are for SEO and Google analytics at this stage.

    Ill continue looking, but any insight would be amazing.

    Jake

      • Jake

        Gday Nicolas,
        According to the console the text wants to link to “undefined” while the image links to the page specified inside the media library when you create / add slides to the slider.

        To me that would mean that this section of code

        $( ‘.carousel-caption’ ).each(function( index ) {
        var link = $( this ).find(‘a’).attr(‘href’);
        $(this).wrap(‘‘);

        is not able to identify the link it needs to be using, either due to local not being able to be found or the snippet being broken in some way.

        Ive recopied the snippet through and am still finding the same issue. Unfortunately my java script is rudimentary at best, so any help, to reduce my bumbling would be greatly appreciated.

        Jake

  • Bob

    Can you remove the Button on the slider all together, and is it possible to add a flash player to the home page to add a transparent video Walk on Spokes person to play in the bottom left corner ?

    • Johnnie G.

      Bob,
      The simplest way to do that would probably be in CSS – something like:
      .carousel-caption .btn-primary {
      display:none;
      }

      I’d probably use the snippet on this page as a guideline to add some javascript to display a flash player with a higher z-index using jQuery.

      Hope this helps.

  • Johnnie G.

    It looks like the problem could be only in Safari. Works fine in Chrome and FF – I haven’t yet tested other browsers.

  • Johnnie G.

    Nicolas,
    I realized the problem isn’t specific to the website I’m working on. I looked at some of the websites showcased and the slider on all of them does the same thing! You have to move the mouse/pointer out of the entire slider and then click the next/previous button to make the slide change again after you click the button once.

    Any pointers on where I should begin to look. I looked in td-scripts.js and was going to look in fancybox next?

    Thanks

  • Johnnie G.

    Nicolas,
    I’m having a strange issue with the next/previous buttons on the slider. If I stay hovered over the buttons and keep clicking nothing happens (after the first click and subsequent initial slide advance). It’s possible that some change I made caused this but I haven’t touched the JS yet and I don’t think any of my other customizations have anything to do with this.

    Help!

    Thanks

  • Candice Denson

    Is there a way to do the same for featured images? When I remove the buttons, my images are clickable. However it doesn’t work in IE8. Just want my site to be compatible across the board, ya know?

  • Rick

    Howdy Nicolas ~ I appreciate those lnks, but I purely copied and pasted from the section above into my .php file. If the code I copied is correct, it should work, no? Thanks 🙂

  • Bryan

    Is there any way to make a slider auto-update from the featured images and text from my posts? I’m currently using SlideDeck, and while it looks great, I hate how much it slows down my site.

    Thanks for your help!

  • Rick Janson

    Howdy ~

    Great theme, thanks for the tips. My function.php in child theme reads as follows and does not link the slider image… Help? Thanks.

    <?php
    /**
    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, 2);
    function my_slide_link( $slide_image , $slide_link) {
    //sets the slider image link
    return sprintf('%2$s‘,
    $slide_link,
    $slide_image
    );
    }
    //wraps the slider caption in the same link as the call to action button
    ?>

    jQuery(document).ready(function () {
    ! function ($) {
    //prevents js conflicts
    “use strict”;

    $( ‘.carousel-caption’ ).each(function( index ) {
    var link = $( this ).find(‘a’).attr(‘href’);
    $(this).wrap(‘‘);
    });
    }(window.jQuery)
    });

    <?php
    }
    */

  • tom barlow

    Hi

    I have tried the new code, and now the caption area links but the picture still does not.

    My code is

    Any ideas?

  • tom barlow

    Hi

    Thank you for this. I have tried to add it to my child function spage, but it does not seem to have any effect?

    My entire child functions code is

    I have slides with call to actions and ones without but this seems to have no effect on either

  • Arno Kreuer

    Hi Nicolas, it is possible that is forwarded from any point of the slider. Currently, the text area is no link! You get many thanks by all, by me also: Thank you very much again!

  • John

    Hi

    Just a quick question. The default button link for the slider has worked great but I just went to add another link to a slider and the page I need it to link to is not in the list so I can’t link to it. Is there a simple solution to this please?

    Thanks in advance.

    John

  • Arno

    Hello Nicolas, yes that is super, additionally the frame with the text could be linked with the link? Thank you Arno

Comments are closed.