Add a downloadable PDF document with clickable image in WordPress

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 on uploading files from the WordPress codex

Do it with Gutenberg

We are using the standard WordPress editor but there is a way with a Gutenberg block to add a lovely cover image with text for your link to your PDF file.  See more on that here…

Start by uploading the image you wish to link from

As you can see below, I have chosen to insert what is called a cover image, which is an image with text over. 

Adding a cover image

Then head over to the Media Library to upload the PDF

Select media from the main admin menu on the left.  Upload your PDF file and once it is uploaded, copy the link. you can see I have highlighted it below.

Uploading a file to the media library and copying the link.

Add the link to your image

Select the link icon as shown over the image below and simply paste in the link you have copied from your uploaded PDF in the media library.  Then you will have a beautiful image with a link to your download file.

Adding a cover image