How to Add a Cool CSS3 Button Shortcode in WordPress

Table of Contents

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:


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; }

Green Shortcode Button

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]

Source: WP Explorer

Follow Us On:

Copyright Notices: This website is not sharing themes by cloning or cracking. We respect the GNU General Public License (GPL) and the hard work of the theme creator. On this website, we share that link those are already stored somewhere else on the internet and are not a part of this website. Our website does not carry any responsibility for them. If your copyrighted material has been indexed by our site and you want this material to be removed then contact us immediately. We will remove it in 48 hours. All items contained within the directory on “DirectWordpressNulled” are developed by third-party developers and redistributed by “DirectWordpressNulled” under the terms of the General Public Licence (GPL).

Lastest Blog & Tips:

Table of Contents

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.

Powered By
Best Wordpress Adblock Detecting Plugin | CHP Adblock