WP Shortcodes : CSS3 Buttons

Wordpress Shortcodes : CSS3 Buttons

Shortcodes play an important role in WP theme development.

WordPress and Shortcodes

WordPress introduced Shortcode API. Shortcode is basically a tiny function that adds dynamic content in a post or a page which is triggered by a macro code (i.e. Shortcode)

e.g. [recent-posts no="5"] would return summery of five recent posts.

WordPress API allows us to use attributes, for instance [shortcode name="wrapcode" link="www.wrapcode.com"]

Learn more about WP Shortcodes and Shortcode API, Visit WordPress Shortcode API

Beautiful CSS3 Buttons with WP Shortcodes

Let’s see how we can create beautiful CSS3 buttons with the help of WP ShortCode API.


[scbutton link=”http://wordpress.org” target=”blank” variation=”blue” size=”large”]Blue Button[/scbutton]

[scbutton link=”http://wordpress.org” target=”blank” variation=”green” size=”large” ]Go Green[/scbutton]

[scbutton link=”http://wordpress.org” target=”blank” variation=”red” size=”large” ]Red like blood![/scbutton]

The Callback function

There is a code behind every shortcode you use in a post or a page, called as “Callback function”. Whenever WP finds a shortcode in an article it triggers the callback function to perform. Here’s the callback function for buttons. Add it to the bottom of functions.php if a theme template. If there is no functions.php in a theme that you are using (usually, it never happens), create a new one and add the below code.

function button( $atts, $content = null ) {
		'link' => '#',
		'target' => '',
		'theme' => '',
		'size' => '',
		'align' => '',
	), $atts));

	$style = ($theme) ? ' '.$theme: '';
	$align = ($align) ? ' align'.$align : '';
	$size = ($size == 'large') ? ' large_button' : '';
	$target = ($target == 'blank') ? ' target="_blank"' : '';

	$out = '<a' .$target. ' href="' .$link. '">' .do_shortcode($content). '</a>';

	return $out;
add_shortcode('button', 'button');

 The CSS Code :

Add following CSS in theme’s stylesheet, make sure class name I have used doesn’t conflict with the CSS classes that are already present in theme’s stylesheet.

	display: inline-block;
	font-size: 11px;
	height: 19px;
	margin: 5px 10px 5px 10px;
	padding: 9px 13px 0;
	text-decoration: none !important;
	color:#fff !important;
	background: #59595a;
	border-radius: 3px;
	border:1px solid #23282F;
/* You can add other sub classes such as small, very large as well. */

	font-size: 14px;
	height: 24px;
	line-height: 14px;
	padding: 11px 10px 0;
	background-position:0 -28px;
	text-shadow:0 1px 0 rgba(0, 0, 0, 0.4) !important;
	-webkit-transition:all 0.3s ease-in;
	-moz-transition:all 0.3s ease-in;
	-o-transition:all 0.3s ease-in;
	transition:all 0.3s ease-in;

	text-decoration:none !important;

Remember, you can always play with CSS to make buttons more attractive.

CSS for color schemes

Beauty if this shortcode is you can apply any color scheme to a button just by passing attribute theme.

Do add a color scheme (i.e. theme variation) write a CSS class with any name that contains a background color, font color and border color.

For instance, Here’s the sample class of color scheme.

 background: #0276c1 !important;
 color:#fff !important;
 text-shadow:0 -1px 0 #888 !important;
 border:1px solid #005c97 !important;

 background: #8ebd40 !important;
 color:#fff !important;
 text-shadow:0 -1px 0 #888 !important;
 border:1px solid #7ca932 !important;

Practically you can add n number of color schemes.

The Syntax

Take a closer look at the shortcode callback function. We are passing link, target, theme, size and align as attributes. We can pass all the attributes, however it is not compulsory at all. You can use this shortcode in various ways as given below.

  1. Passing all the attributes
    [button link="http://www.google.com" target="blank" size="button_large" theme="green" align="left"]Google[/button]
    [scbutton link=”http://www.google.com” target=”blank” size=”button_large” variation=”green” align=”left”]Google[/scbutton]
  2. Passing only link
    [button link="http://www.google.com"]Google[/button]
    [scbutton link=”http://www.google.com”]Google[/scbutton]
  3. Passing partial attributes
    [button link="http://www.google.com" size="button_large" theme="green"]Google[/button]
    [scbutton link=”http://www.google.com” target=”blank” size=”button_large” variation=”green” align=”left”]Google[/scbutton]


All done, now you can add all sort of buttons simply by putting following shortcode in posts.

[button link=" <link here> " target= " " theme = " theme class name" align = " Left or right" size = "button size"] Button Name [/button]

Result : [scbutton link=”/” target= ” ” theme = “orange”] Button Name [/scbutton]