A customer posts regular legal forms, newsletters, event registration packs and other items their website. I got tired of writing the code for the download button each time when updating, and decided to add a quick solution.

The result is a quick implementation that revolutionized a mundane task for us. I bet it will do the same for you if you are in the same position.

Write the function:

Open your functions.php file and write the function that will inset the html.

function nets_download($atts) {
     // extract the shortcode values to an array
     extract(shortcode_atts(array(
          "title" => '',
          "alignment" => ''
     ), $atts));

     global $post;

     // get the zip attachment id
     $zip =& get_children('post_type=attachment&post_mime_type=application&post_parent='. $post->ID);
     if ( empty($zip) ) {
          // nothing found
     } else {
      // find the address of the first uploaded zip
     $arrKeys = array_keys($zip);
     $zipUrl = $zip[$arrKeys[0]]->guid;
     // construct the html code
     $output = '<p class="zipbutton' . $alignment . '">';
     $output .= '<a href="' . $zipUrl . '" title=" download ' . $title . '" >';
     $output .= $title;
     $output .= '</a></p>';
     return $output;
     }
}
 // add the short-code
add_shortcode('dwnl', 'nets_download');

The Button

I made a quick button in Photoshop for the tutorial. It is included in the tutorial download pack.
dwnload

The CSS

styling the button is easy. In the short-code you can specify the alignment, and create a style for it. I use 3 types of alignment namely “none” for no alignment, showing the button in the center, “left” to float it left and “right” to float it right.

“Left” “none” and “right” is terms that is often used in css files, so to ensure your code doesn’t get mixed up, I created “zipbutton” and “zip_” in the code to make the class name unique. If you would like to make your own styles and you named your alignment “blue” in the short code (if you have different colors of buttons as example) the class name would be “zip_blue”. That way you can specify quite a few different buttons on your site each styled uniquely.

first of the code for no alignment:

// styling the button
p.zipbutton a{
display: block;
width: 219px;
height: 101px;
background: url(images/dwnload.png) no-repeat top left;
line-height: 130px;
padding-left: 30px;
color: #5f5f5f !important;
font-weight: normal !important;
overflow: hidden;
}
// no alignment
.zip_none a{
margin: 0px auto;
}
// align left
p.zip_left{
float: left;
}
// align right
p.zip_right{
float: right;
}

Usage

Uploading is easy. open your media manager and upload the zip file. (we choose to always zip the file before uploading to save space, and make the url easy to find in the database using our short code). Then simply add the short-code to the post as in the example 

[dwnl title="your short description" alignment="your button alignment" ]

Get the code

You can download the code for the tutorial by clicking on the stylish new button below.
[dwnls title="Code for tutorial" alignment="none" ]