How To: Link Images to PDF files

This post will cover how you can link an image to another file, such as a PDF in this specific case, that you have in your media library. For this example, we’ll show you how to:

  • Upload the PDF file into your library
  • Insert an image into your blog post that links to this PDF

First things first, we’ll deal with uploading the PDF:

  1. The first thing you want to do once you’re in the WordPress admin panel is expand the Media tab and click add new.
PDF Information
PDF Information
 Click Select File
Click Select File
  1. From here, navigate to where the file is located. In our case, the PDF file is located on the desktop in a folder called “Tutorial”.
  2. Complete the information fields (if you want, this is optional but recommended).
  3. Copy the file link -[Ctrl + C] It will end in .pdf  like this: https://wpbarista.com/wp-content/uploads/2011/07/sample.pdf.
  4. Once you’re done that, go ahead and click the “Save All Changes” button.

Once that’s done, you’re finished with uploading the PDF file. Next, we’re on to inserting the image into your post and linking it to the file we just uploaded. Head on over to the add new post tab.

Add an image button

Now that we have our PDF file uploaded, we can go ahead and add our image in the post.  To do this we’ll start by clicking the little “Add an image” button just above the WYSIWYG toolbar. Once you click it, you’ll see a new window pop up that lets you

  1. Add an image from your computer
  2. From a URL
  3. From your existing media library
Uploaded image
Uploaded image

Once you’ve uploaded the image, take note in the screenshot of the highlighted orange field; that is the field we want to put the link in. By default, it’s setup so that when you click on the image, it’ll take you to a full size version of the image. We want to change this so that it links to the PDF we uploaded earlier.
Remember when we copied the PDF link? You’re going to need that now!  Paste it into this field as shown.  [Ctrl + V]

Linked URL
Properly Linked URL

After that’s all done and you’ve figured out what alignment and other options you want on this, go ahead and click “Insert Into Post”. The window will disappear and you’ll see the image in your WYSIWYG editor properly linked to the PDF.

When everything is said and done and you preview/publish your post, you’ll see your image and it should be linked right to the PDF like the example below:

Download our PDF!

Similar Posts

2 Comments

  1. Hi,

    I followed your instructions to the letter but it still won’t work.
    Nothing happens when I click the image, even though I can see the url displayed at the bottom of the page when I have my mouse over the image.

    Very well laid set of instructions,

    Thanks
    Paul

    1. It depends how you have your browser settings I think – some browsers block the download, or won’t let a click open a new tab. You’ll have to allow for that one site.

Leave a Reply

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