Hello friends,

Have you noticed that on some websites you are able to click on a download link that has an icon as well as text (or just an icon)? Do you want to add such links on your WordPress website? If the answer is “Yes” then you are on the right post at TheCMSPlace.com because in it I will show you a couple of ways to achieve this.

Let’s begin with the manual way of adding icons for your WordPress download links:

First of all you need to search the web and find a suitable icon for your download links. You can also add multiple icons if you are going to provide downloads for various documents. Another handy trick is to use only one unique icon that represents the download functionality.

Speaking of suitable icons you should consider different situations:

• Image type and size – if possible use high quality images in PNG, GIF or JPEG format and also make sure that you have optimized them in terms of image size and file size. Basically a download link should not take too much space from any page/post and it also should not burden the loading times of that page/post.
• Image license – you should only use images that have a license which has no (or few) restrictions (like CC0) or purchase images with license suitable for all types of usage (especially commercial if your goal is to monetize on your website). Respect the author rights by all means!
• Image content – here the goal is to decide whether you’d like to have one unique download image that should be suitable for all download types or use different images for the different files and documents that your visitors should be able to download from your website.

Having all of these figured out leads us to the next situation – how to add the images to your WordPress website and how to make them as download links.

The first part is quite easy – you just upload the image to your WordPress library and then add it to a post/page at a location of your choice. The “tricky”part is the download link. Basically you can also use the default WordPress functionality to add a link to an uploaded file on your website or at a different location. However in most cases the download dialogue of the browser will not show and the browser will try to open the file in a new window/tab. This might be troublesome especially with PDF files which can be read by any browse out of the box.

To evade this situation (unless of course your goal is to allow the browser to display the file in a new tab/window) you should add the following link structure:

<a href="file link" download target="_blank"><img src="YOUR FILENAME" alt="YOUR ALTERNATIVE TEXT" style="width:Xpx;height:Xpx;border:X;"></a>

This should work flawlessly with most browsers (especially Firefox and Chrome)  and should force the “Save As” dialogue instead of opening the file in new window. However in some older versions the above method may not work correctly.

In the example above you should add the filename of the image, an appropriate alternative text (very important for SEO purposes) and replace X with suitable numbers in the style section of the link structure. Bear in mind that you may need to use the WordPress Text editor to edit an already created image link so that it fits the above example.

And that’s it for this method, friends. You may find it not so much user-friendly especially for WordPress beginner users. That is why you can use another way to achieve a similar effect. In this case you will need the plugin MimeTypes Link Icons.

Download, install and activate it like you always do with WordPress links. Then head to Settings -> MimeType Icons and adjust the image size, image type, and the display position of your image links. The image types that you are able to select from are GIF and PNG. You are also able to add unique images for the different different file downloads.

The advanced settings of this plugin will allow you to modify CSS options. And that’s basically it. Now the plugin will search for any text links that may point to a file that is intended to be downloaded and will add the suitable icon next to that link.

And this information should be enough so that you can start adding download links with icons for your WordPress website. The example in the first method is also suitable for text links as well. Just use download target=”_blank (again added using the Text editor).

What do you think, friends? Do you consider this information enough? Or maybe you know some other ways of achieving this? Share any thoughts, feedback and questions on that matter in the comment form below. Don’t forget to spread the word about this post in social media as well.

See you soon, friends!