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

how to add attachment file type icons in wordpress

Have you ever seen websites that show file icons next to the download links?

Recently, one of our readers asked if it was possible to display attachment file icons in WordPress. You can easily show different icons so that users know which type of file they are downloading.

In this article, we will show you how to add attachment file icons in WordPress.

How to add attachment file type icons in WordPress
How to Add Attachment File Type Icons in WordPress (Easy Tutorial) 2

When You Need Attachment File Icons in WordPress

By default, WordPress allows you to upload images, audio, video, and other documents. You can also enable additional file types to be uploaded in WordPress.

When you upload a file through the media uploader and add it to a post or page, WordPress will try to embed the file as if it is an image, audio, video, or in a supported file format.

For all other files, it will just add a file name as plain text and link it to the download or attachment page.

View download links
How to Add Attachment File Type Icons in WordPress (Easy Tutorial) 3

In the above screenshot, we have added a PDF and a Docx file. However, it is difficult for a user to guess which type of file they would be downloading.

If you regularly upload different file types, you may want to display an icon next to the link. This way, your users can easily identify the file type they are looking for.

Having said that, let’s see how to add attachment file icons in WordPress for different file types.

Method 1: Add Attachment File Icons in WordPress Using a Plugin

The easiest way to add file type icons is by using a WordPress plugin like MimeTypes Link Icons. This free plugin is very easy to use and lets you add icons for different file types.

READ  How to Add Captions to Featured Images in WordPress

The first thing you need to do is install and activate the MimeTypes Link Icons plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, visit the Settings » MimeType Icons page to configure the plugin settings.

Mimetype general settings
How to Add Attachment File Type Icons in WordPress (Easy Tutorial) 4

The plugin allows you to choose the icon size, as well as between PNG and GIF icons. Next, you need to choose the icon alignment and specify which file types will display the icon.

After that, you can scroll down and select the icons to display on your website. For instance, there are icons for file types like PDF, PPT, CSV, AVI, RPM, TXT, and more.

Select file type icons
How to Add Attachment File Type Icons in WordPress (Easy Tutorial) 5

Next, navigate to the Advanced Settings section. In this area, you’ll discover an option labeled Show file size next to the download link. By default, this feature is disabled due to its potential to be resource-intensive.

Advanced settings mimetype
How to Add Attachment File Type Icons in WordPress (Easy Tutorial) 6

After making your adjustments, be sure to click the Save Changes button to secure your settings.

Next, you can edit a post or page and insert a file download link using the media uploader. Preview your post, and you’ll notice the file icon displayed next to the download link.

View file type icons
How to Add Attachment File Type Icons in WordPress (Easy Tutorial) 7

Method 2: Using Icon Fonts for Attachment Files in WordPress

In this approach, we will utilize an icon font to display an icon beside the attachment file link.

First, install and activate the Font Awesome plugin. If you require assistance, refer to our guide on how to install a WordPress plugin.

Once activated, navigate to the Settings » Font Awesome page in your WordPress dashboard. Here, you can adjust the general settings for the plugin, such as selecting between pro or free icons.

READ  8 Best WordPress Development Tools (Free + Paid)
Font awesome settings
How to Add Attachment File Type Icons in WordPress (Easy Tutorial) 8

Next, edit the post or page where you wish to add an attachment link.

Within the content editor, insert the HTML code for the icon you want to display.

To obtain the HTML code, visit the Font Awesome icon library website. Use the search bar to find an icon, then click on the desired image to get the code.

Search for font icon
How to Add Attachment File Type Icons in WordPress (Easy Tutorial) 9

You will then see various versions of the icon along with their HTML code.

Click on the desired code to copy it.

Copy the icon code
How to Add Attachment File Type Icons in WordPress (Easy Tutorial) 10

Afterward, return to your website’s WordPress content editor and click the + sign to add a Custom HTML block.

Paste the icon’s code into this block.

Add custom HTML block
How to Add Attachment File Type Icons in WordPress (Easy Tutorial) 11

When finished, click Publish or Update your page.

Now, visit your website to view the newly added icon next to the attachment file type.

View attachment file type icon
How to Add Attachment File Type Icons in WordPress (Easy Tutorial) 12

Bonus: Sell Digital Files to Make Money Online

Now that you’ve mastered adding attachment file type icons, you can elevate your website by selling various files as digital downloads. This method not only helps you generate online income but also encourages users to sign up for your newsletter in exchange for a free resource.

To sell digital products effectively, use Easy Digital Downloads. This platform is one of the top eCommerce solutions for WordPress, known for its simplicity and ease of setup.

Easy Digital Downloads seamlessly integrates with popular payment services such as PayPal and Stripe.

How to accept payments online with Easy Digital Downloads
How to Add Attachment File Type Icons in WordPress (Easy Tutorial) 13

Additionally, you can effortlessly upload digital files that you want to sell and start earning money online.

The plugin allows you to add details such as a title and description, set the download price, choose a download image, and more.

READ  11 Best WordPress Paywall Plugins (Free and Paid Options)
Adding a new digital download product
How to Add Attachment File Type Icons in WordPress (Easy Tutorial) 14

For more information, please check out our guide on how to sell digital downloads in WordPress.

We hope this article has helped you learn how to add attachment file icons in WordPress. You may also want to explore our guides on how to embed PDFs, spreadsheets, and other files in WordPress blog posts, as well as the best WordPress plugins for small businesses.

If you enjoyed this article, please subscribe to our YouTube Channel for WordPress video tutorials. You can also follow us on Twitter and Facebook.

Conclusion: How to Add Attachment File Type Icons in WordPress

Adding attachment file type icons in WordPress improves both the visual appeal and usability of your site by helping users quickly recognize file types. By using the right plugins and following the steps in this guide, you can easily implement custom icons for various file attachments.

We hope this guide has been beneficial in enhancing your WordPress site. For more related information, explore our guides on how to sell digital downloads in WordPress and how to embed PDFs, spreadsheets, and other files in WordPress blog posts. Also, check out the best WordPress plugins for small businesses to further optimize your site.

If you found this article helpful, please subscribe to our YouTube Channel for WordPress video tutorials. You can also connect with us on Twitter and Facebook.

Leave a Reply

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