Create button shortcode in wordpress

1 5801

Create button shortcode in wordpress it's simple and easy. Shortcode its very usefull for work and create post ease... Now we will discuss how to create a complete shortcode button to add button in TinyMCE.

First step

The first you must add shortcode function like this:

function button($atts, $content = null) {
"href" => "",
"style" => "btn-info",
), $atts));
$hrefs = empty($href) ? '' : $href;
$styles = empty($style) ? '' : $style;
return '<a href="'. esc_attr ( $hrefs ) .'" target="'.esc_attr ( $targets ).'">'.do_shortcode($content).'</a>';

Description for that function:

  • href its your link target button
  • style its your style button you can add this with the CSS code example btn-info so you must call in CSS .btn-info{}

Second step

The second step you must register the shortcode. You can see the function below

function your_add_shortcodes() {

add_shortcode('button', 'button');

add_action( 'init', 'your_add_shortcodes' );

Third step

Third step is add button in your wordpress editor.

add_action('init', 'add_buttons');
function add_buttons() {
if ( current_user_can('edit_posts') &&  current_user_can('edit_pages') )
add_filter('mce_external_plugins', 'add_plugins');
add_filter('mce_buttons_3', 'register_buttons');

function register_buttons( $buttons ) {
array_push($buttons, "button"); );
return $buttons;


function add_plugins( $plugin_array ) {
$plugin_array['button'] = get_bloginfo( 'template_url' ).'/yourpath/button.js';
return $plugin_array;


Description for that function:

  • add_buttons This function for add button in tinymce
  • mce_buttons_3 this for add in row 3
  • register_buttons this for register tinymce button
  • add_plugins this function add JS plugin in timce...


Fourth step

Create button JS file for add button in tinymce. This is my example button.JS

(function() {
tinymce.create('tinymce.plugins.button', {
init : function(ed, url) {
ed.addButton('button', {
title : 'Insert button',
image : url+'/images/button.png',
onclick : function() {
var width = jQuery(window).width(), H = jQuery(window).height(), W = ( 720 < width ) ? 720 : width;
W = W - 80;
H = H - 84;
tb_show( 'Button Options', '#TB_inline?width=' + W + '&height=' + H + '&inlineId=button-form' );                                     }
createControl : function(n, cm) {
return null;
tinymce.PluginManager.add('button', tinymce.plugins.button);
var form = jQuery('<div id="button-form"><table id="button-table">\
<td><h3>button options</h3>\
<th><label for="button-url">button url</label></th>\
<td><input type="text" id="button-url" name="url" value="" /><br />\
<small>Please fill with your button url. Example</small></td>\
<th><label for="button-text">Text for button</label></th>\
<td><input type="text" id="button-text" name="btext" value="button" /><br />\
<small>Please fill with your button text. Example button, download or other.</small></td>\
<th><label for="button-type">Select button type</label></th>\
<td><select name="type" id="button-type">\
<option value="btn-primary">Primary style</option>\
<option value="btn-info">Info style</option>\
</select><br /><br/>\
<small>Select your favorite style here</small></td>\
<input type="button" id="button-submit" value="Insert button" name="submit" />\
var table = form.find('table');
var shortcode = '';
var button_url = table.find('#button-url').val();
var button_type = table.find('#button-type').val();
var button_text = table.find('#button-text').val();
shortcode = '' + button_text + '';
tinyMCE.activeEditor.execCommand('mceInsertContent', 0, shortcode);

Job done... Now you can see button in your tinymce.. If use manual you can use the shortcode:

[button href="" style=""]My button[/button]

If any error and trouble just comment. I will fix and help you...


banner 468x60
Category: WordpressTags:
Hello world! My name gian, im from blogging from indonesian. Im interest with webdesign, php coding and wordpress. Why i choose wordpress? Because its simple and easy to use for my blog. And thanks to read my article.
One Response