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 potential to show attachment file icons in WordPress. You’ll be able to simply present totally different icons in order that customers know which sort 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 means that you can add photos, audio, video, and different paperwork. It’s also possible to allow extra file sorts to be uploaded in WordPress.
Whenever 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 information, it would simply add a file title as plain textual content and hyperlink it to the obtain or attachment web page.
Within the above screenshot, we have now added a PDF and a Docx file. Nonetheless, it’s troublesome for a person to guess which sort of file they’d be downloading.
If you happen to recurrently add totally different file sorts, then chances are you’ll need to show an icon subsequent to the hyperlink. This manner, your customers can simply discover the file kind they’re on the lookout for.
Having stated 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 method of including file kind icons is through the use of a WordPress plugin like MimeTypes Hyperlink Icons. It’s a free plugin that could be very straightforward to make use of and allows you to add icons for various file sorts.
The very first thing you want to do is set up and activate the MimeTypes Link Icons plugin. For extra particulars, see our step-by-step information on tips on how to set up a WordPress plugin.
Upon activation, you want to go to the Settings » MimeType Icons web page to configure the plugin settings.
The plugin means that you can select the icon measurement, in addition to between PNG and GIF icons. Subsequent, you want to 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. For example, there are icons for file sorts like PDF, PPT, CSV, AVI, RPM, TXT, and extra.
Subsequent, you possibly can scroll all the way down to the Superior Settings part.
Right here, you will see 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’re completed, don’t neglect to click on on the ‘Save Modifications’ button to retailer your settings.
Now you can edit a submit or web page and add a file obtain hyperlink utilizing the media uploader. Merely preview your submit, and you will notice the file icon subsequent to the obtain hyperlink.
Technique 2: Utilizing Icon Fonts for Attachment Recordsdata in WordPress
On this methodology, we will likely be utilizing an icon font to show an icon subsequent to the attachment file hyperlink.
The very first thing you want to do is set up and activate the Font Awesome plugin. If you happen to need assistance, then please see our information on tips on how to set up 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 final 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’re within the content material editor, it’s essential 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 notice totally 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’re completed, 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 totally different information as digital downloads. This lets you become profitable on-line or encourage customers to join your e-newsletter in change for a free useful resource.
The easiest way to promote digital merchandise is through the use of Easy Digital Downloads. It is without doubt one of the greatest eCommerce platforms for WordPress that’s very straightforward to make use of and setup.
Straightforward Digital Downloads simply integrates with totally different cost providers like PayPal and Stripe.
In addition to that, you possibly can merely add digital information that you just’d prefer to promote and begin creating wealth on-line.
The plugin enables you to add particulars like a title and outline, set the value of the obtain, choose a obtain picture, and extra.
For extra particulars, please see our information on tips on how to promote digital downloads in WordPress.
We hope this text helped you discover ways to add attachment file icons in WordPress. You might also need to see our information on tips on how to embed PDFs, spreadsheets, and different information in WordPress weblog posts and the very best WordPress plugins for small companies.
If you happen to preferred this text, then please subscribe to our YouTube Channel for WordPress video tutorials. It’s also possible to discover us on Twitter and Facebook.
Leave a comment