Have you ever ever seen web sites that present file icons subsequent to the obtain hyperlinks?
Just lately, one in all our readers requested if it was doable to show attachment file icons in WordPress. You’ll be able to simply present totally different icons in order that customers know which kind of file they’re downloading.
On this article, we’ll present you the way to add attachment file icons in WordPress.
When You Want Attachment File Icons in WordPress
By default, WordPress means that you can add pictures, audio, video, and different paperwork. It’s also possible to allow extra file varieties to be uploaded in WordPress.
While you add a file via the media uploader and add it to a put up 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’s going to 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 got added a PDF and a Docx file. Nevertheless, it’s tough for a consumer to guess which kind of file they’d be downloading.
If you happen to frequently add totally different file varieties, then it’s possible you’ll need to show an icon subsequent to the hyperlink. This manner, your customers can simply discover the file sort they’re searching for.
Having mentioned that, let’s see the way to add attachment file icons in WordPress for various file varieties.
Technique 1: Add Attachment File Icons in WordPress Utilizing Plugin
The best manner of including file sort icons is by utilizing 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 varieties.
The very first thing it’s essential do is set up and activate the MimeTypes Hyperlink Icons plugin. For extra particulars, see our step-by-step information on the way to set up a WordPress plugin.
Upon activation, it’s essential go to the Settings » MimeType Icons web page to configure the plugin settings.
The plugin means that you can select the icon dimension, in addition to between PNG and GIF icons. Subsequent, it’s essential select the icon alignment and which file varieties will show the icon.
After that, you’ll be able to scroll down and choose icons to show in your web site. As an example, there are icons for file varieties like PDF, PPT, CSV, AVI, RPM, TXT, and extra.
Subsequent, you’ll be able to scroll all the way down to the Superior Settings part.
Right here, you will discover the choice to point out file dimension subsequent to the obtain hyperlink. It’s turned off by default, because it might be resource-intensive.
As soon as you’re carried out, don’t neglect to click on on the ‘Save Adjustments’ button to retailer your settings.
Now you can edit a put up or web page and add a file obtain hyperlink utilizing the media uploader. Merely preview your put up, 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 can be utilizing an icon font to show an icon subsequent to the attachment file hyperlink.
The very first thing it’s essential do is set up and activate the Font Superior plugin. If you happen to need assistance, then please see our information on the way to set up a WordPress plugin.
Upon activation, you’ll be able to head to the Settings » Font Superior web page out of your WordPress dashboard. Right here, you’ll be able to edit the overall settings for the plugin, like selecting whether or not it ought to use professional or free icons.
Subsequent, you’ll be able to edit a put up or web page the place you need to add an attachment hyperlink.
As soon as you’re within the content material editor, you need to enter the HTML code for the icon you need to show.
To search out that HTML code, you’ll be able to 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 totally different variations of the icon and its HTML code.
Go forward and click on on the code to repeat it.
After that, you’ll be able to 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 to your icon into the block.
As soon as you’re carried out, 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 sort.
Bonus: Promote Digital Recordsdata to Make Cash On-line
Now that you understand how so as to add attachment file sort icons, you’ll be able to go a step additional and promote totally different recordsdata as digital downloads. This lets you generate profits on-line or encourage customers to enroll in your e-newsletter in change for a free useful resource.
The easiest way to promote digital merchandise is by utilizing Simple Digital Downloads. It is likely one of the greatest eCommerce platforms for WordPress that’s very straightforward to make use of and setup.
Simple Digital Downloads simply integrates with totally different cost providers like PayPal and Stripe.
Apart from that, you’ll be able to merely add digital recordsdata that you just’d wish to promote and begin getting cash 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 the way to promote digital downloads in WordPress.
We hope this text helped you learn to add attachment file icons in WordPress. You may additionally need to see our information on the way to embed PDFs, spreadsheets, and different recordsdata in WordPress weblog posts and the greatest WordPress plugins for small companies.
If you happen to favored this text, then please subscribe to our YouTube Channel for WordPress video tutorials. It’s also possible to discover us on Twitter and Fb.
The put up How you can Add Attachment File Kind Icons in WordPress (Simple Tutorial) first appeared on WPBeginner.
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!