How to Add Attachment File Type Icons in WordPress (Easy Tutorial)

Have you ever ever seen web sites that present file icons subsequent to the obtain hyperlinks?

Lately, considered one of our readers requested if it was attainable to show attachment file icons in WordPress. You may simply present completely different icons in order that customers know which kind of file they’re downloading.

On this article, we are going to present you tips on how to add attachment file icons in WordPress.

When You Want Attachment File Icons in WordPress

By default, WordPress permits you to add photographs, audio, video, and different paperwork. You can too allow additional file types to be uploaded in WordPress.

While you add a file by way of the media uploader and add it to a submit or web page, WordPress will attempt to embed the file as whether it is a picture, audio, video, or in a supported file format.

For all different recordsdata, it should simply add a file identify as plain textual content and hyperlink it to the obtain or attachment web page.

Within the above screenshot, we’ve added a PDF and a Docx file. Nonetheless, it’s tough for a consumer to guess which kind of file they’d be downloading.

Should you frequently add completely different file sorts, then chances are you’ll need to show an icon subsequent to the hyperlink. This fashion, your customers can simply discover the file kind they’re searching for.

Having mentioned that, let’s see tips on how to add attachment file icons in WordPress for various file sorts.

Technique 1: Add Attachment File Icons in WordPress Utilizing Plugin

The simplest means of including file kind icons is by utilizing a WordPress plugin like MimeTypes Hyperlink Icons. It’s a free plugin that may be very straightforward to make use of and allows you to add icons for various file sorts.

The very first thing you could do is set up and activate the MimeTypes Link Icons plugin. For extra particulars, see our step-by-step information on how to install a WordPress plugin.

Upon activation, you could go to the Settings » MimeType Icons web page to configure the plugin settings.

The plugin permits you to select the icon measurement, in addition to between PNG and GIF icons. Subsequent, you could select the icon alignment and which file sorts will show the icon.

After that, you possibly can scroll down and choose icons to show in your web site. As an example, there are icons for file sorts like PDF, PPT, CSV, AVI, RPM, TXT, and extra.

Subsequent, you possibly can scroll right down to the Superior Settings part.

Right here, you will discover the choice to indicate file measurement subsequent to the obtain hyperlink. It’s turned off by default, because it might be resource-intensive.

As soon as you might be accomplished, don’t neglect to click on on the ‘Save Modifications’ button to retailer your settings.

Now you can edit a post or page and add a file obtain hyperlink utilizing the media uploader. Merely preview your submit, and you will note the file icon subsequent to the obtain hyperlink.

Technique 2: Utilizing Icon Fonts for Attachment Recordsdata in WordPress

On this technique, we might be utilizing an icon font to show an icon subsequent to the attachment file hyperlink.

The very first thing you could do is set up and activate the Font Awesome plugin. Should you need assistance, then please see our information on how to install a WordPress plugin.

Upon activation, you possibly can head to the Settings » Font Superior web page out of your WordPress dashboard. Right here, you possibly can edit the overall settings for the plugin, like selecting whether or not it ought to use professional or free icons.

Subsequent, you possibly can edit a submit or web page the place you need to add an attachment hyperlink.

As soon as you might be within the content material editor, you have to enter the HTML code for the icon you need to show.

To seek out that HTML code, you possibly can go to the Font Superior icon library web site. Merely seek for an icon within the search bar after which click on on the picture.

Subsequent, you will note completely different variations of the icon and its HTML code.

Go forward and click on on the code to repeat it.

After that, you possibly can return to your web site’s WordPress content material editor and click on the ‘+’ signal so as to add a Customized HTML block.

From right here, merely paste the code on your icon into the block.

As soon as you might be accomplished, go forward and publish or replace your web page.

Now you can go to your web site to see the newly added icon for the attachment file kind.

Bonus: Promote Digital Recordsdata to Make Cash On-line

Now that you know the way so as to add attachment file kind icons, you possibly can go a step additional and promote completely different recordsdata as digital downloads. This lets you earn cash on-line or encourage customers to join your publication in trade for a free useful resource.

The easiest way to promote digital merchandise is by utilizing Easy Digital Downloads. It is among the best eCommerce platforms for WordPress that’s very straightforward to make use of and setup.

Straightforward Digital Downloads simply integrates with completely different fee providers like PayPal and Stripe.

In addition to that, you possibly can merely add digital recordsdata that you simply’d prefer to promote and begin creating wealth on-line.

The plugin helps you to add particulars like a title and outline, set the value of the obtain, decide a obtain picture, and extra.

For extra particulars, please see our information on how to sell digital downloads in WordPress.

We hope this text helped you learn to add attachment file icons in WordPress. You might also need to see our information on how to embed PDFs, spreadsheets, and other files in WordPress blog posts and the best WordPress plugins for small businesses.

Should you preferred this text, then please subscribe to our YouTube Channel for WordPress video tutorials. You can too discover us on Twitter and Facebook.