How to Add a Download Button to WordPress Page

There are multiple types of buttons, varying from Social Sharing to Form Submission, Read More, or Product Discovery ones. Each serves a different and unique function, depending on your desire. While Social Sharing buttons let you get your content shared easily, Product Discovery shows visitors your product details.

Among them, download buttons are no doubt one of the best ways to get your content accessible. WordPress site owners also use it to increase the conversion rate. The challenges now lie in adding buttons to pages and posts. WordPress doesn’t provide any built-in feature allowing you to create a button.

This post will help you solve this issue by showing 2 different ways to create a download button for your media file, including a PDF, video, or audio file. But before digging into details, let’s discuss some benefits of WordPress download buttons to understand why you should add one to your content.

Why Adding a Download Button to WordPress Site

File download buttons bring great value to your WordPress site. Since this button makes up the main call to action, it proves an effective way to boost conversions as well as making your content more readable.

• Boost conversion rate – Download buttons enable you to arouse user curiosity. Instead of forcing them to purchase the whole course, you can offer users free guides or ebooks for them to download. This gives you a higher chance to receive sales.
• Separate the page or post content – Similar to visual illustrations, file download buttons assist you in breaking the content. You don’t want viewers to get tired of reading a long text block which makes them lose interest in reading. The download button will make it more readable and at the same time redirect the user’s attention to the desired interaction.

Download Button Design Guidelines

As common as buttons are, you already have some ideas of how a button looks. However, creating an eye-catching one to drive visitors’ attention isn’t a breeze. Below are some tips you can take into account when designing your download button.

• Make the design consistent – You need to make sure your button design goes well with the website and branding, from colors to sizes. You might not notice but the button size and spacing are also important for mobile design.
• Use a clear label – The content on the button mainly decides whether users will click on it or not. It can be text or even an icon. You can combine both text and images in the button label too.
• Position them visibly – You should display your download buttons where they create enough contrast otherwise it will get lost. The button can lie in the middle of the page with a contrasting color.

How to Add a Download Button Using the Default Editor

WordPress makes it easy to add buttons with a built-in ‘Button’ block. The guide below will show you how.

Step 1: Upload the File and Get the URL

We assume that you don’t have the desired file in your Media Library and have to upload it there. To do so, you can:

1. Head to Media → Add New in your WordPress dashboard
   
2. Click Select Files and choose your files
3. Hit the Edit link on the right side of the screen and copy the file URL
   

Step 2: Add the File Link to the Page or Post Content

Once you have got the file URL, it’s time to link it to pages and posts. Then, click on Backend Editor and choose the Button block under Add Element.

Edit the button by pasting the file URL you’ve just downloaded and then fill in the text on the button. Remember to publish or update your post content and view it in a new browser. This is what users will see after you place a download button on the page.

How to Create a Download Button Using the Classic Editor

If you’re using the classic editor for your site, it’s not easy to create a download button. You’re required to come with the code method, using HTML / CSS code which is not beginner-friendly. Follow these 4 quick steps on how to add a download link to your WordPress site using the classic editor.

Firstly, add a link to your WordPress content as normal by bolding the desired text, clicking the Insert/edit link icon on the menu, and pasting the URL there.

Move to the Text tab at the top of the edit screen. You now add a CSS class near the download link to make it a real button. You can call the class “downloadbutton”. This class permits you to adjust the style of the link like a true button.

Go to the preview page and choose the Customize option to start styling your link.

There is an option of Additional CSS on the left-hand navigation menu for you to choose from. Then, paste this CSS code:

.downloadbutton {
background-color: #4285f4;
border: none;
color: #ffffff;
padding: 10px 10px;
font-size: 24px;
}

You should replace the background color, border status, and font size with your desired ones. You can also play around with the padding to customize how your download button looks and feels. That’s it!

Ready to Add a Download Button to WordPress Page?

File download buttons enable you to catch visitors’ attention which leads to an increase in conversions. It also helps break the content and make it more readable. When designing a button, you should also notice important factors such as style, position, and text.

There are 2 different ways for you to create a download button in WordPress, either using the default editor or classic editor. The former makes it easier for you to add a button block and customize it. The latter, meanwhile, requires you to be familiar with CSS code.

If you still have a concern about how to create a download button in WordPress, let us know your thoughts in the comment section below.