Sunday, July 7, 2013

How to add shortcode of download button

Here full php + css code of download button shortcode, you can use it display an action button.

1. Click on Appearance -> Editor (in left side menu)
2. Click on functions.php file (in right side)
3. Add this code on functions.php file :
add_shortcode( 'action-button', 'action_button_shortcode' );
function action_button_shortcode( $atts ) {
extract( shortcode_atts(
array(
'color' => 'blue',
'title' => 'Title',
'subtitle' => 'Subtitle',
'url' => ''
),
$atts
));
return '<span class="action-button ' . $color . '-button"><a href="' . $url . '">' . $title . '<span class="subtitle">' . $subtitle . '</span>' . '</a></span>';
}

4. Save file.
5. click on style.css file
6. Add this css code on style.css file of your template
.action-button a:link, .action-button a:visited {
border-radius: 5px;
display: inline-block;
font: 700 16px Arial, Sans-Serif;
margin: 0 10px 20px 0;
-moz-border-radius: 5px;
padding: 14px 18px;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0,0,0,0.3);
text-transform: uppercase;
-webkit-border-radius: 5px;
}

.action-button .subtitle {
display: block;
font: 400 11px Arial, Sans-Serif;
margin: 5px 0 0;
}

.blue-button a:link, .blue-button a:visited {
background-color: #5E9CB9;
background-image: -moz-linear-gradient(top, #5E9CB9, #4E7E95);
background-image: -webkit-gradient(linear, left top, left bottom, from(#5E9CB9), to(#4E7E95));
color: #FFF;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#5E9CB9', EndColorStr='#4E7E95');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#5E9CB9', EndColorStr='#4E7E95')";
}

.blue-button a:hover {
background-color: #68A9C8;
background-image: -moz-linear-gradient(top, #68A9C8, #598EA8);
background-image: -webkit-gradient(linear, left top, left bottom, from(#68A9C8), to(#598EA8));
color: #FFF;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#68A9C8', EndColorStr='#598EA8');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#68A9C8', EndColorStr='#598EA8')";
}

Usage in Wordpress Post/Page Editor :
[action-button color="blue" title="Download Now" subtitle="Version 1.0.1 – Your Software Name" url="#"]

Disqus Comments