WordPress: How to link images to files or URLs

How to link an image with WordPress

You can link images in your wordpress posts or pages to any URL or file. You might want to link to another website or you might want to link to a PDF or other file you have on your site. This short tutorial will show you how to do both.

First, we are going to link an image to another website.

  1. Go to the post or page you’d like to insert a linked image.
  2. Place your cursor and select the “add image” button.
  3. From here we are going to concentrate on the “Link URL” section.
  4. Right now you’ll notice that the link URL area is populated with the absolute path of the image we have chosen. If you choose “none” your image will not link to anything when clicked. If you choose “file URL” it will link to the original image you’ve uploaded in it’s original size. If you select the Post URL, it will link to the post or page that the image located in.
  5. We want this image to link to another website. So, we are going to replace the link with our own.
  6. Copy the URL to the page you want to link to and go back to my “Add an image” area and paste that URL into the “Link URL” area.
  7. Select “insert into post”.
  8. If you click “preview changes” you will see what the page will actually look like and test it to make sure it goes where I want to.

Next, we are going to take the same image and link it to a PDF file.

  1. First we need to upload a PDF.
  2. You can place your cursor anywhere because we aren’t actually going to place it. We just want to upload it to WordPress.
  3. Select the “Add Media” button and find and upload your PDF file the same way you did your image  earlier.
  4. This time, you want to click the “file URL” button. When you do, you’ll see that the link to the file will be populated in the space above. Copy that URL and close the window.
  5. Now, click on the image that you want to link the PDF to and select the “Edit Image” button.
  6. Where the Link URL appears, paste the URL of the PDF that we just copied.
  7. Now, click Update.
  8. Preview the page again to see your changes. When you click the photo it should bring up the PDF that you linked to it.

Lena Shore

Lena is a full-time freelancer and nerd that specializes in web development, graphic design, and illustration. She enjoys building things, learning new things, pursuing creative endeavors, and giving free advice.

30 Comments

  1. Charlie Brown on August 19, 2010 at 6:33 pm

    Dear Lena,
    I have searched and searched(2+ hours) for an answer to a basic question with wordpress. How do you link a file from filezilla to the link on wordpress? I want to link the kid’s track club records to a pdf file. I highlight the name of the age group, click on the link button, goes to small link page but I can not access the ftp file. The files are on the ftp site. Is there any way to upload all the pdf files and others straight to the wordpress sites and not use the ftp function. I have a bunch of pdf files that I would like to use in wordpress. The person who made the site has some pages already linked to the ftp but we can not seem to do it and they are unavailable currently. Thanks from a frustrated teacher and coach.

    • Lena on August 20, 2010 at 8:55 am

      FTP is “file transfer protocol” and doesn’t normally have the ability to link to files from the FTP. Also, any time you upload or download a file whether it be through filezilla, WordPress, Dreamweaver, Cyberduck, etc. you are using FTP. As i said, it just means “file transfer”. So, you’ll need to download the files from the FTP and upload them to your WordPress site somehow.

      You can go to the media section (or upload from inside a post etc.). That being said, if you have a ton of PDFs, you might want to just use FTP to upload all the PDFs into a folder on your computer at once. If you had 20 PDFs, this would be much quicker. Then you could just go back to your post and put in the correct path to each PDF.

      Hopefully, that was helpful. But, feel free to respond back or shoot me an email if you have further questions.

      (:

  2. Om Kolluri on March 9, 2011 at 2:19 pm

    Hello Lena,

    I created a custom theme in Photoshop. Wrote the HTML and CSS and validated both. Works perfectly as a static site. Now trying to transfer to wordpress so I can host it at Hostgator. Here is my problem. I took a blank theme I found with all the requisite files. Copied my images to the file “images”. Transferred my CSS called styles.css to the new theme folder. When I try to link to my images that are in the same folder as the rest of my site info, I get nothing. I am told I should use absolute links. What exactly is it. Do I use my theme name as the Theme URI? Do I find the path by clicking on the image in my images folder? What? No one seems to have an answer nor be able to articulate one. Most coders appear to be communication challenged. Turning out to be a pain. Might as well go to a dynamic site using PHP and MySQL as this wordpress thing is getting ridiculous. Any suggestions will be greatly appreciated. Thank you

  3. Lena on March 10, 2011 at 1:04 pm

    Om,

    This is going to take a longer answer. I will email you with some details. (:

  4. ねこちゃん on October 11, 2011 at 6:05 am

    thanks =) !

  5. Danny O'Callaghan on February 28, 2012 at 7:17 am

    I had a similair problem to this for my own website http://dannyocallaghan.com
    On my galleries page i wanted the individual images to link to different galleries. However they where linking directly to the image.

    After around 3 hours of looking into this problem, I have found a way to make the images redirect to the correct URL.

    You will firstly need to get the plugin called ‘redirection’ you can find it here: http://urbangiraffe.com/plugins/redirection/

    Now follow these instructions to make your image link to your required URL
    1. Upload your image as normal
    2. Once uploaded go to the gallery tab in the image upload box.
    3. Now click the ‘attachment link URL tab
    4. Now on the Links to Thumbnails: select Attachment Page
    5. Now save all settings and update your gallery.
    6. Now go to your image and click it – It will go to a post page in your wordpress site.
    7. Next copy that post page link.
    8. Now goto the redirection plugin
    9. Once the plugin is open copy the post page link fromn point 7 to the source URL section of the plugin
    10. now put the URL address in the Target URL where you want the image to point to.
    11. Now goto your website and click the image – It will now be directing.

    This method works 100% of the time and i have wrtitten it down step by step, so if it doesnt work for you, then you are not doing something right.

    This is the page I have used it on http://dannyocallaghan.com/galleries/

  6. hi on July 19, 2012 at 9:46 am

    good work

  7. amit on July 19, 2012 at 9:50 am

    good work in wordpress

  8. kanupriya on September 5, 2012 at 10:30 am

    i have created an image slider which takes the attached images in the page and display it as a slider on my theme page. I would like to add links to those images which will take to other pages in wordpress. How do i do that??

    • Lena Shore on September 5, 2012 at 11:09 am

      Not sure how you created your slider. But, you would basically add a link tag to each of the images

      (:

  9. Sheharyar on September 27, 2012 at 9:41 am

    Hi,

    Firstly thank you for this. Im stuck on a similar Issue. I can link new images to the url’s just fine however I have lots of images which are already uploaded. I really do not want to re upload them with the link images to URL settings. Is it possible to edit the already uploaded images and link them to URLs? Or would I need to re upload them with this setting?

    Thank you

    • Lena Shore on September 27, 2012 at 9:46 am

      You can edit the page where your image is posted and add it that way. Just click the image and then select the “link” icon in the toolbar. I believe you can also go to the Media Library and update the URL from there. I’d double check to make sure it updated any page you posted the image with the new URL though. (:

      • Sheharyar Ali on September 27, 2012 at 11:50 am

        That worked flawlessly. THANK YOU SO MUCH. Sorry for the caps but don’t know how to express my gratitude 🙂

        • Lena Shore on September 27, 2012 at 12:06 pm

          I think you expressed yourself just fine! Glad it helped you! You are welcome. (:

  10. Jessica on October 22, 2012 at 11:29 pm

    Hi, Thank you for this post it was very helpful. I have been trying to link a PDF to a thumbnail image and have not been able to do so. I followed what you said to do exactly and when I checked on the update this is what I got when I clicked on the image:

    “Image cannot be loaded. Make sure the path is correct and image exist.”

    I am new to WordPress so have no idea what I might be doing wrong. Do you have any suggestions about how I can correct this and get my image to link to the PDF?

    Thanks
    Jess

    • Lena Shore on October 23, 2012 at 6:43 am

      Hmmm.

      You have the thumbnail displayed to your page/post already, right? If not, do that and save the page. Now either upload your PDF in the media area or select it to get the full URL path (copy it). Can you get that far?

      At this point you can go back to your page/post and select the thumbnail and paste the new link to it.

      Tell me if that works or where it fails.

      (:

      • Jessica on October 23, 2012 at 2:46 pm

        Thanks for your response. I have done exactly as states above, word for word, step by step, over and over again and I just keep getting the same message when I go to preview the change:
        “Image cannot be loaded. Make sure the path is correct and image exist.”

        I wanted to test that the PDF link worked so I attached it to a thumbnail in a slider plug-in I have and that worked perfectly. I just cannot get a thumbnail image alone on a page to link to a PDF and do not understand why it is not working.

  11. Iris on January 23, 2013 at 12:15 pm

    Wow that was unusual. I just wrote an very long
    comment but after I clicked submit my comment didn’t show up. Grrrr… well I’m not writing all that over
    again. Anyway, just wanted to say fantastic blog!

    • Lena Shore on January 23, 2013 at 1:24 pm

      Aw man. I’m so sorry. I checked the spam filter and nothing is there. Thank you for the kudos! I appreciate them. (:

  12. Michele MArie on February 26, 2013 at 7:01 am

    I don’t have the upload/insert option above toolbox. Mine says ‘Add Media’. Have uploaded a PDF file to media library and want to link it to some words that say download brochure here on my classes page.

  13. tim on February 28, 2013 at 8:42 pm

    Hi, Excellent blog.

    How would I do this with an image from content builder, I followed this yet when ever I update & preview this wont work is there a code or link I would need to insert into the author section.

    Thank you

    • tim on February 28, 2013 at 8:51 pm

      For instance still follow the same process in relation to the image linking a URL, but then when uploading it to content builder, I would need a code of some sort to make it live i

    • Lena Shore on March 1, 2013 at 7:57 am

      Tim – I’m not sure I understand your question. But, the video is older, so maybe this will help. I will explain it slightly differently.
      1. Insert an image (don’t worry about linking it)
      2. After you see the image in your editing area – select it.
      3. While it’s selected click the “link” icon
      4. Enter the URL of where you want the image to link to.

      • tim on March 1, 2013 at 8:51 am

        Hi Lena, thank you. I am using a template theme with wordpress and content builder.

        I cant get an image to link to a website out side of mine, for instance.

        Im trying to build a partners page with images that have direct links to there site, I am dragging an image into the content builder but when ever i do try to link these it never works

  14. Rainbow32 on April 23, 2013 at 7:22 am

    Hi
    I have a page that gives links to previous pdf newsletters, but I would like them to show as thumbnails to click on rather than just a list of links. Can you tell me how to do it please? I am using wordpress 3.5.1 hope this makes sense. many thanks

    • Lena Shore on April 23, 2013 at 10:01 am

      All you would need to do is insert the thumbnail image and apply the link to them. If you need to see what the previous link was, you might want to look in the code view while editing the page. (:

      • Rainbow32 on April 24, 2013 at 6:29 am

        Hi again, thanks for that, it seemed so simple this time around and I’ve been trying for 2 days! The problem that I now have is that I saved the newsletter as a jpeg inorder for the thumbnail to look like an image, but when you click on it it looks dreadful. The pdf is so much clearer but doesn’t show as a thumbnail. Can I do anything to improve it?
        Many thanks.

        • Lena Shore on April 24, 2013 at 8:05 am

          Insert your image you want to use as a thumbnail. When you are done, click the “link chain” icon and enter the URL of the PDF. (:

  15. Peter on March 4, 2015 at 3:47 pm

    Hi,
    These have been helpful. I have another question. I have a wordpress blog, econsnapshot, where I provide economic insight mainly through graphs. For example, an employment graph. The issue is that the data changes monthly and I update the graph. Many economists use the figures in their classes. What I would like to do is to provide them with a URL where they can pull the graph from every month without changing address. That is, I would provide them with a say LaTeX file they can run with hyperlinks. The best would be if they could just run the file each month without changing the address.

    • Lena Shore on March 4, 2015 at 4:39 pm

      Hey Peter!

      I have a couple of thoughts.

      First, if the the graph lives somewhere and has the same URL, you are golden. Just copy that URL and link it into your post. If not, you could just change the link manually whenever it was updated.

      Second thought: What is you provided your graph through gmail’s Documents. They have equivalents of Excel and Word. I know you can make graphs with it. I have not used the plugin – but I know there are WordPress plugins to display graphs from gmail. Perhaps you could insert a graph and update it on gmail and then it would always display the latest graph on your website.

      Hope that gives you some ideas. (:

Leave a Comment





This site uses Akismet to reduce spam. Learn how your comment data is processed.

Archives