How to Add a Cool CSS3 Button Shortcode in WordPress
If you are not a big fan of working with the HTML editor in WordPress or want to provide some cool enhancements for your premium themes, shortcodes are a great solution for expanding the capabilities of your post editor while keeping things simple.
I was thinking that it would be cool to add some sort of button to my site when providing links to free files or other sites (using shortcodes of course) so after adding the shortcode to my theme I figured I would share the code here on the blog so other people interested in adding button shortcodes to their site could simply copy and paste my code into their theme and not have to spend too much time making the shortcode and styling the button.
What Are Shortcodes?
Shortcodes were introduced back in WordPress 2.5 and they allow you to create macro codes for use in post content. A simple shortcode would look something like this:
[shortcode]
Which when added to the post editor will return the value of the shortcode as defined in your theme files. I will show you how to create a shortcode that will allow you to easily add buttons to your post editor without touching any code.
Adding A Custom “button” Shortcode
First thing you need to do is add the php code for your shortcode to your theme. The following code can be used to add a simple button to your site. This code can be placed in the functions.php file. If you are using a 3rd party theme, this is best done via a WordPress Child Theme.
function myprefix_button_shortcode( $atts, $content = null ) {
// Extract shortcode attributes
extract( shortcode_atts( array(
'url' => '',
'title' => '',
'target' => '',
'text' => '',
'color' => 'green',
), $atts ) );
// Use text value for items without content
$content = $text ? $text : $content;
// Return button with link
if ( $url ) {
$link_attr = array(
'href' => esc_url( $url ),
'title' => esc_attr( $title ),
'target' => ( 'blank' == $target ) ? '_blank' : '',
'class' => 'myprefix-button color-' . esc_attr( $color ),
);
$link_attrs_str = '';
foreach ( $link_attr as $key => $val ) {
if ( $val ) {
$link_attrs_str .= ' ' . $key . '="' . $val . '"';
}
}
return '<a' . $link_attrs_str . '><span>' . do_shortcode( $content ) . '</span></a>';
}
// No link defined so return button as a span
else {
return '<span class="myprefix-button"><span>' . do_shortcode( $content ) . '</span></span>';
}
}
add_shortcode( 'button', 'myprefix_button_shortcode' );
Using The Shortcode In Your Post Editor
Now that you have a shortcode you can add the new “button” (which looks like a plain link now since we haven’t styled it) to your post editor.
// Example usage 1
[button href="YOUR LINK" target="self"]Button Text[/button]
// Example usage 2
[button href="YOUR LINK" target="self" text="Button Text"]
Styling The Button
What is the point of creating a shortcode if it’s just going to look like a plain link? Nothing. That’s why I will show you how to add some cool CSS3 to style the download button and make it look sexy.
As you noticed in the shortcode I added the class “myprefix-button” so you can easily style it via your style.css file. Insert the following code to your stylesheet to make a nice blue button like the one in the image.
/* Main Button Style */
.myprefix-button{ background:#65A343; text-shadow:1px 1px 1px #000; -webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px;-webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.1); -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.1); box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.1); cursor: pointer; display: inline-block; overflow: hidden; padding: 1px; vertical-align: middle; }
.myprefix-button span { border-top: 1px solid rgba(255, 255, 255, 0.25); -webkit-border-radius: 5px; -moz-border-radius: 5px;border-radius: 5px; color: #fff; display: block; font-weight: bold; font-size: 1em; padding: 6px 12px; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25); }
/* Hover */
.myprefix-button:hover{ background: #558938; text-decoration:none; }
/* Active */
.myprefix-button:active{ background:#446F2D; }
Multiple Color Support
If you noticed the shortcode has a color parameter which you can use to add CSS styles for different button colors. For example if you can add a blue color option by adding this extra CSS:
/* Blue Button */
.myprefix-button.color-blue { background:#2981e4 }
/* Blue Button Hover */
.myprefix-button.color-blue:hover { background:#2575cf }
/* Blue Button Active */
.myprefix-button.color-blue:active { background:#0760AD }
Now simply use the color parameter in the shortcode:
[button href="YOUR LINK" target="self" color="blue"]Button Text[/button]
What would be the way to get the shortcode to align center? I know I can surround the shortcode with a but I would like to have it align center by code. I want this because I am going to be using this on over 60 posts, and it would really save time. Any ideas? (Also keep up for good work!)
You should add a paramater to your shortcode align=”” that way you could enter left/center/right and based on the parameter add a class to your button. And you could set the default to center if you want.
All WP themes should have these classes in their themes “alignleft”, “aligncenter”, “alignright”. So these are the classes I would recommend working with.
Hi Aj,
Let say we want the target link will be “nofollow” so how to do that?
Have a look at how I did it for my symple shortcodes plugin
I was unable to get the buttons to work in chrome or IE. They work in Safari and Firefox though without any issues.
This is an older post, might just have to tweak the CSS a bit 😉
Hello AJ Clarke,
Thanks for making such a useful article.. Its works for me fine .. 🙂 Thanks man…
thanq u bro
Hi aj. Thank you very much, I love you a lot Although I have an appointment I hope you can help me. I want a single button to open in another tab is possible? I’m a newbie in WordPress and programming.
I’ll update the article in a bit to include a target parameter 😉