Using Wordpress Shortcode To Create Beautiful Download Boxes

Download
Since shortcode was introduced in Wordpress 2.5 it’s been possible to do many cool things. Everything from simple donate buttons to more advance things. In this article I will show you a simple but efficient way to create one of those download-boxes that I and many other use on their blogs.

The shortcode we want to use in this download-box example should contain the following:

• Url to the file for download
• Display name
• Version of the file

And it will look like this when we type it in our blog post

[ download file="myfile.zip" name="My Cool File" version="2.1"]

In order for Wordpress to understand what to do with this shortcode we need to create a plugin. Otherwise it will just be shown as we wrote it in plain text.

1. Creating the plugin

Follow the instructions on Wordpress on how to create a plugin to get started.

First we create the initiator for the plugin.

function SZVisualDownload_init() {

}
add_action('plugins_loaded', 'SZVisualDownload_init');

Then we add our function that will parse the shortcode. And we tell Wordpress to add our shortcode “download” to the system.

function SZVisualDownload_init() {

function download_function($atts) {

}
add_shortcode('download', 'download_function');
}
add_action('plugins_loaded', 'SZVisualDownload_init');

Now we need to write the code to handle the shortcode parameters. This is explained in detailed on the Wordpress Codex page. So you might want to check that out before you continue reading.

Now that you feel confident on how shortcode is parsed we will continue with the actual code to present the beautiful download box.

function download_function($atts) {
extract(shortcode_atts(array(
'file' => '',
'name' => 'No Name',
'version' => '1.0',
), $atts));
$fileurl = get_option('home').'/wp-content/uploads/projects/'.$file;
$filepath = get_option('upload_path').'/projects/'.$file;
$size = byteConvert(filesize($filepath));
return '
<div class="download-area">
<a class="download" href="'.$fileurl.'"><img src="'.get_bloginfo('template_url').'/images/download-button.gif" alt="Download '.$name.' here" /></a>
<h3><a href="'.$fileurl.'">Download '.$name.' v'.$version.'</a></h3>
File size: '.$size.'</div>
';
}

In order to have the file size display better we can add this function and use it on our $size variable.

function byteConvert( $bytes ) {
if ($bytes<=0)
return '0 Byte';

$convention=1000; //[1000->10^x|1024->2^x]
$s=array('B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB');
$e=floor(log($bytes,$convention));
return round($bytes/pow($convention,$e),2).' '.$s[$e];
}

2. Adding some style

Now we have the complete html for the download box. All we need now is to add some CSS to give it the correct style. This CSS inherits from my own theme stylesheet so you will need to adjust it for your own blog. The same goes of course for the images.

div.download-area {
background-image:url(../images/download-bg.gif);
background-repeat:no-repeat;
height:79px;
margin-bottom:15px;
margin-top:15px;
padding:20px;
width:582px;
}
div.download-area img {
float:left;
margin-right:10px;
}

3. Finished!

Now you’re done and you can activate the plugin and try it out. If you want you can download the complete plugin source from the beautiful download box below.