Sponsors (Advertise on Circlebox Blog)
This beginners Wordpress tutorial will teach you how to add a Download Button to the bottom of your Wordpress posts, with the ability to change the buttons destination URL on every post by using a Custom Field.
The outcome of this quick and easy tutorial should look and work something like the download button I recently designed and installed over at Circlebox Textures.
The first step is to design or download a button you want to use. If you can’t design your own, there are plenty of freebies out there on other design blogs, as well as icons and button generators. Once you’ve designed or chosen your button, it’s time to insert it into your theme with the PHP code.
Go to your Wordpress Admin Dashboard, and under the Appearance tab, click Editor. On the right hand side, you should see a list of files that your theme is using. Click on the Single Post (single.php) file. Locate this line:
With that line located, insert this code somewhere beneath it. Remember to change IMG URL to your image, for example ‘http://yourdomain.com/images/downloadbutton.jpg‘.
<a href="<?php echo get_post_meta($post->ID, "download_link", $single = true); ?>"<img src="IMG URL" border="0"></a>
<?php } ?>
You’ll probably want to style your button a little using CSS to get it in the right place. Put it in a DIV, your code should now look something like this:
<?php if(get_post_meta($post->ID, "download_link", $single = true) != ""){ ?>
<a href="<?php echo get_post_meta($post->ID, "download_link", $single = true); ?>"<img src="IMG URL" border="0"></a>
<?php } ?>
</div>
With that done, you can head over to your Stylesheet to style your button. Here’s the CSS I used:
float: left;
margin-left: 0px;
margin-top: 10px;
margin-bottom: 20px;
}
That’s it! Now all you have to do to get the button displaying and working in your post is insert a Custom Field. When writing a new post, you’ll find a Custom Fields box beneath the editor. Click ‘Enter New’. Insert ‘download_link’ in name, and the URL to the download link in Value, and then click ‘Add Custom Field’.
After doing it once, you’ll be able to select the custom field automatically from the drop down menu.
A good thing about this particular piece of code is if you don’t insert a custom field (i.e. you don’t have a download link for that post) the download button won’t show, therefore not confusing your readers!
A huge thanks Zach Dunn from Build Internet! for teaching me this trick in the first place. I hope it taught you as much as it did me!
Circlebox Blog is all about you and the rest of the community. To make sure everyone makes the most out of what you see on this page, please help to promote the post by hitting some of the buttons below!
Adrian
Posted at 19:08 on 3/9/09
great tutorial,very easy to understand keep it up thank you
Callum Chapman
Posted at 6:50 on 4/9/09
@Adrian Thanks! Glad you found it helpful
Msila-Net : Visit Msila-Net's website
Posted at 11:51 on 4/9/09
Nice theme and explain the distinctive
Thank you very much and more creativity
Very helpful
Thanks
Victor
Posted at 17:33 on 6/10/09
Hey – Great post. Its just what I needed. Quick questin. How would you force it to download the file rather than open in window. I’m trying to use .ics files as the download.
Jorens : Visit Jorens's website
Posted at 13:46 on 12/10/09
Hmm, this works only if I’m using firefox borwser. On others – Opera, IE it doenst work… cant figure out what might be the problem
Callum Chapman
Posted at 20:01 on 12/10/09
@Jorens: I’m really not sure – should work fine, it did for me… I’m no coding expert so if you’re not having any luck head over to the guys at builtinternet.com, they should be able to help you as they did me
Jorens : Visit Jorens's website
Posted at 21:03 on 12/10/09
Ok, thank you, I’ll try! Damn, but it’s really weird, it works for Firefox, but not on other Browsers, I tried it even from other PC, the same, it seems Firefox is the only one picking up the link picture and link at all…
Callum Chapman
Posted at 8:52 on 13/10/09
Really wish I could help you out – when I did it it worked straight up with no problems… Have you tried getting rid of the script, starting over and clearing your browsers cache? Not sure it would work but anything is worth a go
I hope you get it working!
Rejis : Visit Rejis's website & twitter
Posted at 11:03 on 3/11/09
Great help. I was really struggling to add some button in just some pages. Let me chk with this . Thanks A Lot
Donal : Visit Donal's website & twitter
Posted at 22:03 on 12/1/10
I seem to be having the same problem as Jorens, whose site is NSFW by the way! I’m using a custom field for something else but it only works in FF.