Create button shortcode in wordpress

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:

[prettify]

function button($atts, $content = null) {
extract(shortcode_atts(array(
“href” => “http://yourtarget.com”,
“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>’;
}

[/prettify]

Description for that function:

[liststyle style=”arrow1″]

• 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{}

[/liststyle]

Second step

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

[prettify]

function your_add_shortcodes() {

add_shortcode(‘button’, ‘button’);

}
add_action( ‘init’, ‘your_add_shortcodes’ );

[/prettify]

Third step

Third step is add button in your wordpress editor.

[prettify]

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;

}

[/prettify]

Description for that function:

[liststyle style=”arrow1″]

• 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…

[/liststyle]

 

Fourth step

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

[prettify]

(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);
jQuery(function(){
var form = jQuery(‘<div id=”button-form”><table id=”button-table”>\
<tr>\
<td><h3>button options</h3>\
</td>\
<tr>\
<th><label for=”button-url”>button url</label></th>\
<td><input type=”text” id=”button-url” name=”url” value=”http://yoursite.com” /><br />\
<small>Please fill with your button url. Example http://yoursite.com</small></td>\
</tr>\
<tr>\
<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>\
</tr>\
<tr>\
<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>\
</tr>\
</table>\
<p>\
<input type=”button” id=”button-submit” value=”Insert button” name=”submit” />\
</p>\
</div>’);
var table = form.find(‘table’);
form.appendTo(‘body’).hide();
form.find(‘#button-submit’).click(function(){
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 href=”‘ + button_url + ‘” style=”‘ + button_type + ‘”]’ + button_text + ‘[/button]’;
tinyMCE.activeEditor.execCommand(‘mceInsertContent’, 0, shortcode);
tb_remove();
});
});
})();

[/prettify]

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…