Setting a custom external link url to a slide

Note : This snippet applies to Customizr version 3.1.x and below. It may not work with version 3.2+. Use with caution on 3.2+ and check the availability and type of the hooks in the Customizr hooks API.

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

 

Replacing the call to action link by a custom external 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)

 

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.


About Nicolas

My name is Nicolas Guillaume (nikeo). I am the developer of the WordPress Customizr Theme. This website is a discussion platform, your comments are welcome!


58 thoughts on “Setting a custom external link url to a slide

      • Reply
        Edd

        Where in the code do I paste this to get the link to open in a new tab?
        I keep pasting different pieces of code into my Style.css and Function.php and my site will go completely blank. I have to login to my webhosts and undo the changes through the backend to recover my site. Any idea what is causing this?

          • Reply
            Edd

            Hi Nicolas,

            Thanks for your help. I enabled debugging and it’s throwing me this error.

            ‘Fatal error: Cannot redeclare my_slide_custom_link() (previously declared in /home/sites/eddhawkes.co.uk/public_html/wp-content/themes/customizr-child/functions.php:7) in /home/sites/eddhawkes.co.uk/public_html/wp-content/themes/customizr-child/functions.php on line 26′

            I’ve read the various help pages but can’t figure out what I’ve done to cause this error.

            Cheers

            • Edd

              I managed to figure out what I was doing wrong.
              I was pasting the whole function into the Function.php for every link.

              I was doing this:

              When I should have been doing this:

              However, the links still don’t work. I have set up links on the slider to be overwritten but when you click on the buttons they still take you to the linked wordpress pages, except the first one, that links to Vimeo fine.

              Any ideas?

            • Nicolas Post author

              Hi Edd, your code has issues in the way you define your filter (priorities and parameters).
              More about the hook syntax here : http://codex.wordpress.org/Plugin_API

              Here’s a (not tested) new version that should work for you :

            • Solomon Oh

              Nicholas:
              The code to define custom links for multiple slide images does not function correctly, the slides do not receive a link. Would you mind checking it out?

  • Reply
    tdm

    Hello!
    I found something very interesting. (Any error message)
    Keep your snipe for my slide:
    Id of my images: 10, 11, 12 and I would like go to, respectively: urlA, urlB and urlC
    I insert the code:

    And this is what happens:
    10 goes urlB
    11 goes urlA
    12 goes urlA

    It’s a mystery for me! Can you help me, please? Where is the error?
    Thanks!

  • Reply
    CS

    Hi Edd,
    maybe a silly question, but I don’t see a functions.php file when I look in the dir with file manager. I see a admin-functions.php. Do I just create a new functions.php and upload to root dir? I created a child theme first and activated it. TIA

    • Reply
      CS

      Found the functions.php file. As I understand it then, I add the code to this file and then upload the file to the child theme dir.

  • Reply
    Joshua Sherman

    Where would I include the target=”_blank” if I’m doing the “Replacing the call to action link by a custom external url”?

  • Reply
    Joshua Sherman

    Hey Nicolas, I figured it’s worth asking:

    Anyway to send multiple sliders to different URLs, with the target=”_blank”?

    Thanks so much for all your help!

  • Reply
    Omer Baturay

    Hey Nicolas,

    I used your code you provided here –

    But it fails to apply links to each of the slides – can you please check it again? I’ve changed the variables according to my links and slide id’s on my website but still have no links on any slides. The main code snippet you provide in the original snippet works but I want different links for different slides.

    Thank you.

  • Reply
    Kai Giuseppin

    Hi, first of all, awesoem work you guys do here.

    Struggled with this code for a bit because of some conflict with other stuff in my child functions.php. Now that all seems to be resolved. The links don’t work atm though. I got it working with just one slider image linking, but two seems to be problematic. Used this code (as provided by you guys, thanks!) and gave the slides links in the slider drop down menu. However, the title, description and button text boxes are empty (I don’t want any of those). Mind taking a look?

  • Reply
    Kai Giuseppin

    Sorry not all the code got pasted I guess…

  • Reply
    Frank

    Hi Nicolas,

    I have recently been playing with your theme and I love it thank you. Just a question, I’m trying to link homepage slider pics to a “product-category” page, but these pages are not showing in the link drop-down. It only offers me pages, posts, or single products. any help with this?

      • Reply
        Nicolas Post author

        Ok fine. Thanks for the feedback Frank.
        Please share you solution here if you get the chance! It might be interesting for many users!
        Best wishes,

  • Reply
    Jacqui

    Hi Nicolas, first off thanks for the great template and support!
    I’ve been trying to apply your multiple slide snippet using links to anchors within the page instead of external links. I want the user to click on the banner / slide and for the page to scroll down to the next part of the page. It works nicely when used on a single slide. Here’s the code I tried using. I set links to each slide in admin but they are not being overwritten.

    • Reply
      Nicolas Post author

      Hi Jacqui, I tested your code, it worked fine for me.
      You might want to recheck your slider’s image id maybe?
      Thanks for sharing

  • Reply
    Jacqui

    I checked image id on all and they were fine. The ID is the attachment ID isn’t it? I’m at a loss as to why it isn’t working for me but it works for you! Any ideas?
    Thanks

    • Reply
      Rocco Aliberti

      Hi Jaqui, so let me understand, you used the first snippet in Nicolas wrote in this page to link the whole slide , and then used your one right?
      The thing is that the filter Nicolas uses, in the slider rendering code, comes before the filter you use. So basically you first link the whole slide to the url you set when you create the slider, than you modify the original link with your custom one, and this should affect just the call to action button, which you don’t have :D. Hope this is understandable, sorry for my english.
      So what you need to do is merge those two snippets this way:

      Should work, otherwise open a new topic in the customizr support forum on wordpress

      Hope this helps.

  • Reply
    Jacqui

    So instead of

    I do this

    Is that correct?

  • Reply
    Jacqui

    Sorry ignore last comment. I use your code as well as the snippet for linking the whole slide……. It worked!!! Thanks so much. Been scratching my head for days. I can move on with my life now ;)

  • Reply
    Feliciano Borrego

    Hi,
    there are one error in “class-content-slider.php”, in line 102, is missing the parameter “$icon” of the function call wp_get_attachment_image(), and the parameter array() is not used:

    • Reply
      Rocco Aliberti

      Hi Feliciano, it looks nice. If you’re interested in my opinion I would like to propose you a different solution, in order to avoid:
      a) count of array elements since you already have a loop index
      b) the call of wp_get_attachment_image_src (anyway there you pass ‘full’, you should pass $img_size , for consistency)

      So instead of your code (of course keeping the solved bug about the icon param), just add this on line 107 (after the check on $slide_background existence):

      By the way..
      To avoid changing core files you can add this function in your child-theme functions.php:

      Should work fine..

    • Reply
      Rocco Aliberti

      Sorry I forgot: obviously you can also avoid to change class-fire-resources.php, in that case the code I wrote above become:

      • Reply
        Feliciano Borrego

        Hi Rocco,
        thank for your contribution.
        The first image should keep the ‘src’ attribute, the second and following are those that have the ‘lazy-src’ parameter.
        If the filter ‘tc_slider_display’ is evaluated for every slide, this function will load the javascript every time?

        • Reply
          Rocco Aliberti

          The first image should keep the ‘src’ attribute, the second and following are those that have the ‘lazy-src’ parameter.
          And it does, in fact it makes the replacement starting from the second occurrence of “src =”.

          If the filter ‘tc_slider_display’ is evaluated for every slide, this function will load the javascript every time?
          “IF”, but it’s not the case ;), that filter is per slider, not per slide.

          Anyway here a better version, which enqueues the script just if there are more than one slide:

  • Reply
    Marco

    Hi,

    I just can´t wrap my head around it… I need to link different images to different URLs in different Sliders. I am using this code, which works perfectly for one image. I tried several changes to use it for more than just one image but it just won´t work.

    I am using it on this page

    http://www.umstaedter-spaetlese.de/umstaedter-geschaeftslese-partnerseiten/

    But I also need it on the start page with different external links. Any help is highly appreciated.

    Thanks!

    • Reply
      Nicolas Post author

      Hi if you want to use it with several images, then I would suggest to declare an associative array of ids => custom url.
      Example :

      Hope this helps!

  • Reply
    Marco

    Hi Nicolas,

    thanks for your quick reply! However, what I want to do won´t work… And I know it´s probably because of me :-) Here´s what I´m doing.

    I can´t reach the site after I´m changing it. BTW: Thanks for this excellent theme and your great support!

    • Reply
      Nicolas Post author

      Hi Marco,

      did you wrap your custom url with single quote?
      I recommend to activate the debug mode in your wp-config.php file.

      You are very close! ;-)

  • Reply
    joanne smith

    Howdy, this is my first time trying this.
    Would someone mind checking this coding and telling me where I’ve gone wrong.

    I want the slider image to open to a mailchimp link.

    I am also hoping to code it to actually open to an new tab, as well.

    I have added it to my child theme via the CUSTOM CSS dropdown.

    Thanks for any help

    J

    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 ( id=1470!= $id )
    return $slide_image;

    //sets a custom url for the targeted slide
    return sprintf(‘%2$s‘,
    ‘http://eepurl.com/2ddur’,
    $slide_image
    );
    }

    • Reply
      Nicolas Post author

      Hi Joanne, I have checked your code, here’s the working version :

      
      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 ( 1470 != $id )
      		return $slide_image;
      
      	//sets a custom url for the targeted slide
      	return sprintf('%2$s',
      		'http://eepurl.com/2ddur',
      		$slide_image
      	);
      }
      
      Best
  • Reply
    joanne

    ok, so I cut and pasted the theme as is (I did change the image number, it is now 1516) and added to my functions.php in my child theme.

    The code is now showing across the top of my webpage, and still not linking when the image is clicked on.

    the site is http://www.justjosocial.com

    It isn’t finished but I took the maintenance off, if any one wants to take a look.

    I’ve spent last night going through various CSS tutorials but still am missing it.

    thanks again, for any advice

  • Reply
    joanne

    Hi again,

    Just hoping someone can help shed some light.
    I’m sure its a simple oversight but, I’ve been trying to find the error and I am missing it.

    I inserted the code into the functions php of my child theme but not only does it not work (open the link in a new tab to an email sign up)

    The code is visible on the web browser on the top of my page.

    Yipes.

    Not sure where to look on this one,

    Thanks for all the help

    J

  • Reply
    Antonio M.

    First, sorry for my english.

    This is my modification for “Linking the whole slide’s picture to a custom external url”, serves multiple images

    Possibly can be improved, but as it is, it works perfectly.

    Greetings.

Leave a Comment

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

Do you need to share some code? To display it in a nice looking syntax highlighter, wrap your code between the following tags (css code in this example) : <pre class="lang:css">YOUR CODE</pre> ( possible code language acronyms : css, php, xhtml, javascript, sql)

You may also use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">