Setting a custom external link url to a slide

Note : the following code snippet requires advanced WordPress developer skills. There's no guarantee that this snippet works as is with the latest version of our themes, and with the latest version of WordPress. That's why you need to always test any code snippets in a staging environment before implementing it in a production site.

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.


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

MY-CUSTOM-URL => this is your custom link. Ex :


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 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.

Related Snippets you may also like

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

  • biblee

    can you tell me how to link header image to another url pls (Hueman teme). I open Editor and then Header.php. What to do next, please? Thank you!

  • Johan Sunnanängs

    Why don’t i have the option “change permalink” as in the picture above? Is it a difference between premium or free theme there or do I do something wrong?

    • Menaka S

      If your Permalinks is set to the default “Plain”, you can see this when you edit media. But if you have already changed your permalinks structure, this will be different. There is no relation to free or paid theme.

  • imvu cheats

    Thanks for finally talking about > Setting a
    custom external link url to a slide – Press Customizr < Liked it!

  • Rocco Aliberti

    Hello Sarah,
    why don’t use the snippet “Replacing the call to action link by a custom external url” ?

  • Sarah M.

    I looked through this thread but didn’t find a solution. On two of the slider images, I want the call to action button to link to an external URL. I don’t want the entire image to link to an external URL, just the call to action button.

    • Sarah M.

      sorry here’s the rest of the code. IT only lets me post 150 chars.

      • Sarah M.

        if ( $(‘a[href=””]’ , ‘#customizr-slider’ ).length === 0 )
        $(‘a[href=””]’ , ‘#customizr-slider’).attr(‘target’ , ‘_blank’);

        } return my_new_target($image_id);

  • Luke Jones

    Thanks for this!

    I was wondering, how would I link both the background picture and the call to action button to the same custom url?


      • Rocco Aliberti

        Hello Luke,
        to achieve what you want you just have to “join” the first and second snippet, with the only care to use different names for the functions (php, as any other programming language gives an error if you declare two functions with the same name in the same namespace).

        Hope this helps.

  • Stephanie

    Awesome!! It took a few tries, but I finally got it working for my Call to Action buttons on the slides to each have a different link other than WordPress pages!! This was my first time editing in the function.php–beyond happy that it worked out!! I did a mix of both Nicholas and Antonio’s suggestions. Thanks for taking the time to post all this great help, guys! 🙂

  • RW

    I think this is a great solution, but I’m looking for a way to have an option to enter a URL without hardcoding it. Is there a way to have another field where a URL can be entered?


  • 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.


  • 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.


    Not sure where to look on this one,

    Thanks for all the help


  • 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

    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

  • 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


    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‘,

    • 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',
  • 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!

    • 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! 😉

  • Marco


    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

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


    • 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!

    • 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..

    • 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:

      • 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?

        • 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:

  • Feliciano Borrego

    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:

  • 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 😉

  • Jacqui

    So instead of

    I do this

    Is that correct?

    • 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.

      • Rocco Aliberti

        typo in the code above : two commas after $my_custom_url (line 17) – remove one of those 😀

  • 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?

  • 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.

    • 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

  • 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?

    • Frank

      Ha, I figured it out with your above code with all comments. just thought i was missing an easier way.

      • 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,

  • Kai Giuseppin

    Sorry not all the code got pasted I guess…

  • 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?

  • 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.

  • 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!

  • 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”?

  • 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

    • 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.

  • tdm

    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?

      • 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?

          • 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/ in /home/sites/ on line 26’

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


            • 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 :

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

            • Solomon Oh

              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?

Comments are closed.