Maybe you’ve noticed the download buttons I’m using on this site that look like this..
It would be rather tedious to type this in for almost every post and, if I wanted to change anything about it, I’d have to go back to edit each post, quite tedious. So, instead, I added a simple WordPress shortcode to the theme’s “Theme Functions” (functions.php) file. Setting this kind of thing for yourself only requires a little basic HTML/CSS/PHP knowledge and basic how to edit a WordPress theme knowledge.
Here’s the code and I’ll break it down for you afterwards…
function DownloadButton($values)
{
extract(shortcode_atts(array(
"link" => ''
), $values));
$returnvalue = "";
if (! $link == '')
{
$returnvalue = "<div class=\"downloadbutton\"><a href='" . $link . "'>
<img src=\"/wp-content/uploads/2010/08/plugindownload.png\"
alt=\"Click to Download\" title=\"Click to Download\"
width=\"185\" height=\"60\" /></a></div>";
}
return $returnvalue;
}
add_shortcode('Download', 'DownloadButton');
First, we define a function, in this case “DownloadButton” with the variable for the array of variables sent to the function by WordPress.
Next, we want to extract the values from the parameter array. In this case, we only have the one parameter we’re wanting to pass, ‘link’. So, we use the built-in WordPress function to extract the shortcode attributes into our local variable $link.
After that, we want to see if the $link variable contains anything. If it doesn’t, we want to ignore the code. Otherwise, we want to generate the code we want placed at the spot in the post or page where the shortcode was located.
I know, the next part will make your brain sweat if you are afraid of code but it’s actually pretty simple. Here we’re building the HTML string to be displayed. The tricky part is that we will need to ‘escape’ the double quotes with a backslash and use the PHP concatenation operator, a period, to insert our variable value into the HTML code.
As the final part of the function, we want to return the value we generated. It is important to return the value from the function rather than echoing it. This insures that the HTML code will be placed correctly on the page.
After the function, we’ll want to execute the WordPress add_shortcode function. Otherwise, the shortcode won’t be setup. It is important that this call is outside of any function brackets so that it gets called on each page load on the WordPress site. The add_shortcode function’s first parameter is the name of the shortcode, in this case ‘Download’, and the second is the name of the function to call, in this case ‘DownloadButton’.
Now, after you save, the shortcode is ready to use. All you have to do is enter the code the post/page editor and the code will be inserted automatically. It would look something like this…
[Download link=”http://thelayoutsite.com/wp-content/uploads/2010/08/carwashco1.zip”].
Before you make any changes to a live theme, and especially the functions.php file, it is essential that you have a good backup of the file. Making changes and making a mistake while doing so can disable your blog. You want to be able to quickly replace a bad file with a working copy.
If you have any questions about how to create shortcodes in WordPress, please feel free to ask and I’ll try to help you out.
Update
Don’t be like me and forget to add back in the code for your download button if you update your theme. If you’re using the Twenty-Ten Theme like I am here this will automatically happen when you update WordPress.
