Shortcodes are a great solution for expanding the capabilities of your post editor in WordPress while keeping things simple. They allow you to create macro codes for use in post content without having to touch any code. If you’re 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 the way to go.
One example of a shortcode that can be useful is a custom “button” shortcode. This shortcode allows you to easily add buttons to your post editor without touching any code. Here’s how you can create and use this shortcode:
Adding A Custom “Button” Shortcode
The 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 ‘
}
// No link defined so return button as a span
else {
return ‘‘;
}
}
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 Text// Example usage 2
“`
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 we 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, we 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
“`
In conclusion, shortcodes are a great way to expand the capabilities of your post editor in WordPress. By creating a custom “button” shortcode, you can easily add buttons to your post editor without touching any code. With some CSS3 styling, you can make your buttons look sexy and add multiple color options for even more customization.
