Make your PDF download link an image in WordPress

Steve Davis and Andrew Bell Baker Marketing

This image from our PDF is actually a link to the PDF as well

Have you ever wanted the cover of a PDF document to act as its link on your WordPress website?

This has been one of the recurring questions I receive from clients each year, so today I’ll show you how to do it yourself.

There are two main approaches can follow:

  • Use the actual cover as a link
  • Use an image from the PDF document as a link

No matter which option you choose, the final step remains the same. And I will use a quick ‘saved as PDF’ version of our recent Baker Marketing Insights newsletter as my sample document.

Choosing an image for the PDF download link

Probably the most common request for help in this area is when a client has a report to share on their website and they’d like the report cover to be a download link.

There are a few ways of getting that image:

  • Ask for an image of the cover to be created by the people helping you compile the report , eg, if the Baker Marketing team is creating a report for you, just ask us to supply a cover image as part of the process
  • Copying the cover image within a PDF reader. Go to Edit > Take A Snapshot and then drag your cursor from the top left to the bottom right of your PDF cover and release. This captures an image of the area you dragged over, to paste into a photo editing program like Adobe Photoshop Elements, which is a trusty tool for any business owner with a website. With the image copied, go to your image software and paste it in, trim it to size and save the image as a jpeg.
  • Select a key image used in your PDF document to represent it on your website, eg, I’ve extracted the birthday shot of myself and Andrew Bell for this approach, above, from the newsletter.

Armed with an image, you can now bring the elements together

baker-marketing-insights-july-2015Now that you have an image we can bring it all together.

Firstly, upload your PDF document to your website using the Media tool. Go to Media > Add New and upload your PDF, taking care to name it in a meaningful way in its title and alt text fields.

After uploading, go to Media > Library and click on your PDF which should be at the top of the list. At this point, you’ll be able to double-click on the link in the URL field and copy it (CTRL-C)

Next, go to the Page or Post where you want your PDF image/download link to appear and follow the usual steps for inserting an image: click in the editing area, choose Add Media, then select or upload your image.

In the final step, with the image ready for you to insert, look at the list of options for title, alt, align, etc. You will see a field called Link To in the Attachment settings. Select Custom URL and paste in the link you copied earlier for your PDF (CTRL-V).

Finally, click Insert Into Post and you have just added an image that links to your PDF document, as I’ve done with the image on the right. You might want to tell your visitors to click the PDF cover/image to download your report or brochure, in text on the Page or Post or in Caption text for your image, as I did with the image at the top of this page.



Submit a Comment

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

Chat With Us On Messenger