Add a downloadable PDF document with a clickable image

Wordpress image

Adding downloadable documents with a clickable images will make them stand out in your WordPress page or post.

There are a couple of steps to do this and 2 file uploads: one for the PDF file you wish to make available for download and one for the clickable image. This is easy to do on WordPress but it’s not obvious how to do it.

Save your document as a PDF file. You can do this with Word, Excel and PowerPoint documents by clicking ‘save as’ and selecting PDF as the file format.

Upload your Clickable Image

  • In the WordPress post or page editor click the Add Media icon. (You will probably want to put in a new paragraph of text before the next file upload.)

WordPress add media button

  • Upload (or select from images already uploaded to the media library) the image that you wish to use as the clickable link. This might be a PDF icon or something else.
  • Add a caption if you wish.
  • Always add the Alt text when you add an image in WordPress (this is what screenreaders for visually impaired people use to tell what the image is about)
  • Make sure that the link is set to none.
  • Insert the image to your page or post.

Selecting your clickable image from the media library

Upload your PDF

  • Once again click the Add Media button above the WordPress editing box.
  • When you upload your PDF file you will see the icon in the library.

Adding the PDF file in WordPress

  • Fill in the title with something meaningful
  • Make sure Link To is set to Media File
  • Copy the URL on the bottom right hand corner.  You can see I have highlighted it in blue, if you right click you will be able to copy it.
  • Don’t insert into post.  Close this media box using the x in the corner.

Add the copied PDF file link to the image

  • Click on the image in the WordPress post editor to select it.
  • Then click on the link icon in the tool bar just above.
  • Paste in the link to the PDF file that you copied earlier
  • Hit the blue return button in the link editor box

Add the PDF link to your image

Don’t forget to click the WordPress post update button to make sure it is all saved and comitted to the live website.

The WordPress update button

More Reading

Share on FacebookTweet about this on TwitterPin on PinterestShare on LinkedInShare on Google+Email this to someone