WordPress short codes are everywhere: in practically every theme and many, many plugins. They are extremely useful and provide huge amounts of extra functionality. With all of their greatness, however, there is one major problem with them: they are not very user friendly, particularly for users who are not familiar with programming, especially when a short code accepts more than one parameter. So, in order to help the non-programmer users, we need a new solution.

The ideal solution is one that provides an interface for the user to input all of their short code options without having to enter any “code”. This is a pretty common technique used by a lot of developers, but until now, there has never been a good tutorial on it, so we are going to fix that.

In this tutorial I’m going to show you how to add short code buttons to the tinyMCE editor that, when clicked, bring up a modal window with all of the options for your short code.

Through the steps in this tutorial, we will be writing a complete WordPress plugin that will provide a small collection of CSS 3 buttons available for use through short codes. All of the options for the buttons, size, color, style, url, text, etc, will be available through the modal window.

If you look at the image at the top of this post, you can see exactly how that modal window will look (Much easier than remembering all of the short code’s option names yourself!)

Prerequisites

In order to follow this tutorial, one of the first things you will need to know is how to create short codes. If you are not yet familiar with the process, please follow my tutorial Working with WordPress Short Codes.

Getting Started

The first thing we need to do is setup our plugin structure. Please use the following file structure as a reference.

To make things easier, I would recommend that you go ahead and create each of the files according to the image. I will reference the filename we’re using in each step.

Beginning the Plugin

Just like every other WordPress plugin, we need to setup our plugin header in order to tell WordPress about our plugin. Place the following code into friendly-shortcode-buttons.php.

1
2
3
4
5
6
7
8
9
10
11

/*
Plugin Name: Friendly Short Code Buttons
Plugin URI: http://pippinsplugins.com/user-friendly-short-codes-plugin-example/
Description: Adds user-friendly short code buttons to your  WordPress site. This plugin is more of an example than anything, but does provide a few nice looking buttons
Version: 1.0
Author: Pippin Williamson
Author URI: http://pippinsplugins.com
*/
 
// plugin root folder
$fscb_base_dir = WP_PLUGIN_URL . '/' . str_replace(basename( __FILE__), "" ,plugin_basename(__FILE__));

Our plugin will now be available to WordPress. Note that I have also placed a variable called $fscb_base_dir. This is a variable that contains the file path to the root folder of our plugin. We will use this later to load CSS and JS scripts.

Setting Up the Short Code

Now that we have our plugin registered with WordPress, we need to setup our short code and its options. This is a very simple function that registers our short code with WordPress and sets up the HTML structure of our buttons. Place this code in friendly-shortcode-buttons.php:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// setup the shortcode for use
function friendly_button_shortcode( $atts, $content = null )
{
      extract( shortcode_atts( array(
        'color' => 'blue',
        'size' => 'medium',
        'style' => 'round',
        'align' => 'none',
        'text' => '',
        'url' => '',
      ), $atts ) );
 
      return '<div class="friendly_button friendly_button_' . $size . ' friendly_button_' . $color . ' friendly_button_' . $style . ' friendly_button_' . $align . '"><a href="' . $url . '">' . $text . $content . '</a></div>';
 
}
add_shortcode('button', 'friendly_button_shortcode');

The return statement of this function may look a little complex, but all I have done is make it so that a DIV with a class name for each option is displayed. So there is a class for the size, the color, the style, etc. This will allow us to style each kind of button with CSS later on.

The Button CSS

Our button short code is now available in WordPress, so let’s go ahead and add all of the necessary CSS. We will use wp_enqueue_style() to load our CSS into the site header. Again, place this in friendly-shortcode-buttons.php:

1
2
3
4
5
6
7
8

// load button css
function friendly_buttons_css() 
{
        // the path to our root plugin folder
	global $fscb_base_dir;
	wp_enqueue_style('friendly-buttons', $fscb_base_dir . 'includes/css/friendly_buttons.css');
}
add_action('wp_print_styles', 'friendly_buttons_css');

Remember the GLOBAL variable we defined earlier with the path to the root plugin folder? We’re using that here to obtain the correct path to our CSS file, which we will create now. As indicated in the file structure diagram above, the CSS file is called friendly_buttons.css as is located inside of includes/css/.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147

.friendly_button a{
	border:1px solid #000; 
	color:#fff; 
	font-family:arial; 
	font-weight:bold; 
	padding:8px 24px; 
	text-decoration:none; 
	text-shadow:1px 1px 0px #000;
	display:block; 
	-moz-border-radius:6px; 
	-webkit-border-radius:6px; 
	border-radius:6px;
	margin: 0 10px 10px 0; 
}
.friendly_button a:active{position:relative; top:1px}
 
/******************************************************
* sizes
******************************************************/
 
.friendly_button_large a{font-size:16px !important;}
.friendly_button_small a{font-size: 11px !important; padding: 6px 16px;}
.friendly_button_medium a{font-size: 12px; padding: 8px 22px; }
 
/******************************************************
* sizes
******************************************************/
 
.friendly_button_left {float: left;}
.friendly_button_left a{margin: 0 10px 10px 0;}
.friendly_button_right {float: right;}
.friendly_button_right a{margin: 0 0 10px 10px;}
.friendly_button_none {float: none; display: inline-block; zoom: 1; *display: inline; }
 
/******************************************************
* styles
******************************************************/
 
.friendly_button_round a {
	-moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px
}
.friendly_button_less_round a {
	-moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px
}
.friendly_button_square a {
	-moz-border-radius:1px; -webkit-border-radius:1px; border-radius:1px
}
 
/******************************************************
* colors
******************************************************/
 
/*black button*/
.friendly_button_gray a{
	-moz-box-shadow:inset 0px 1px 0px 0px #fff; 
	-webkit-box-shadow:inset 0px 1px 0px 0px #fff; 
	box-shadow:inset 0px 1px 0px 0px #fff; 
	background:-webkit-gradient( linear,left top,left bottom,color-stop(0.05,#ededed),color-stop(1,#dfdfdf) ); 
	background:-moz-linear-gradient( center top,#ededed 5%,#dfdfdf 100% ); 
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed',endColorstr='#dfdfdf'); 
	background-color:#ededed; 
	border:1px solid #dcdcdc; 
	color: #777;
	text-shadow:1px 1px 0px #fff;
}
 
.friendly_button_gray a:hover{
	background:-webkit-gradient( linear,left top,left bottom,color-stop(0.05,#dfdfdf),color-stop(1,#ededed) ); 
	background:-moz-linear-gradient( center top,#dfdfdf 5%,#ededed 100% ); 
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf',endColorstr='#ededed'); 
	background-color:#dfdfdf
}
 
/*black button*/
.friendly_button_blue a{
	-moz-box-shadow:inset 0px 1px 0px 0px #bdddff; 
	-webkit-box-shadow:inset 0px 1px 0px 0px #bdddff; 
	box-shadow:inset 0px 1px 0px 0px #bdddff; 
	background:-webkit-gradient( linear,left top,left bottom,color-stop(0.05,#7db8ff),color-stop(1,#2c80e8) ); 
	background:-moz-linear-gradient( center top,#7db8ff 5%,#2c80e8 100% ); 
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db8ff',endColorstr='#2c80e8'); 
	background-color:#7db8ff; 
	border:1px solid #047fd1; 
	color:#fff; 
}
 
.friendly_button_blue a:hover{
	background:-webkit-gradient( linear,left top,left bottom,color-stop(0.05,#2c80e8),color-stop(1,#7db8ff) ); 
	background:-moz-linear-gradient( center top,#2c80e8 5%,#7db8ff 100% ); 
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2c80e8',endColorstr='#7db8ff'); 
	background-color:#2c80e8
}
 
/*black button*/
.friendly_button_red a{
	-moz-box-shadow:inset 0px 1px 0px 0px #ffa6a6; 
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffa6a6; 
	box-shadow:inset 0px 1px 0px 0px #ffa6a6; 
	background:-webkit-gradient( linear,left top,left bottom,color-stop(0.05,#f55858),color-stop(1,#ba1c1c) ); 
	background:-moz-linear-gradient( center top,#f55858 5%,#ba1c1c 100% ); 
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f55858',endColorstr='#ba1c1c'); 
	background-color:#f55858; 
	border:1px solid #8a0a0a; 
}
 
.friendly_button_red a:hover{
	background:-webkit-gradient( linear,left top,left bottom,color-stop(0.05,#ba1c1c),color-stop(1,#f55858) ); 
	background:-moz-linear-gradient( center top,#ba1c1c 5%,#f55858 100% ); 
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ba1c1c',endColorstr='#f55858'); 
	background-color:#ba1c1c
}
 
/*black button*/
.friendly_button_green a{
	-moz-box-shadow:inset 0px 1px 0px 0px #39de10; 
	-webkit-box-shadow:inset 0px 1px 0px 0px #39de10; 
	box-shadow:inset 0px 1px 0px 0px #39de10; 
	background:-webkit-gradient( linear,left top,left bottom,color-stop(0.05,#13c20a),color-stop(1,#05ad19) ); 
	background:-moz-linear-gradient( center top,#13c20a 5%,#05ad19 100% ); 
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#13c20a',endColorstr='#05ad19'); 
	background-color:#13c20a; 
	border:1px solid #169124; 
}
 
.friendly_button_green a:hover{
	background:-webkit-gradient( linear,left top,left bottom,color-stop(0.05,#05ad19),color-stop(1,#13c20a) ); 
	background:-moz-linear-gradient( center top,#05ad19 5%,#13c20a 100% ); 
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#05ad19',endColorstr='#13c20a'); 
	background-color:#05ad19
}
 
/*black button*/
.friendly_button_black a{
	-moz-box-shadow:inset 0px 1px 0px 0px #8a8a8a; 
	-webkit-box-shadow:inset 0px 1px 0px 0px #8a8a8a; 
	box-shadow:inset 0px 1px 0px 0px #8a8a8a; 
	background:-webkit-gradient( linear,left top,left bottom,color-stop(0.05,#525252),color-stop(1,#000) ); 
	background:-moz-linear-gradient( center top,#525252 5%,#000 100% ); 
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#525252',endColorstr='#000'); 
	background-color:#525252; 
}
.friendly_button_black a:hover{
	background:-webkit-gradient( linear,left top,left bottom,color-stop(0.05,#000),color-stop(1,#525252) ); 
	background:-moz-linear-gradient( center top,#000 5%,#525252 100% ); 
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000',endColorstr='#525252'); 
	background-color:#000
}

Note, I am not going to explain which parts of the CSS do what. That is not the purpose of this tutorial. Suffice it to say that there are separate CSS styles for each color, size and type of button, as well as a couple other items, such as alignment. The code is well laid out and commented, so it should not be difficult to follow.

Excellent. Now that we have our button short code created and our CSS loaded, we will now be able to create buttons that look like this:

Setting Up the TinyMCE Button

It is now time to begin the really fun part of this tutorial: adding a button to our tinyMCE editor that allows us to enter the short code into our post content. We are first going to register a “plugin” with tinyMCE (this is our button), and then we will connect that button to a modal popup window. So to begin, we need to place three functions into friendly-shortcode-buttons.php:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

// registers the buttons for use
function register_friendly_buttons($buttons) {
	// inserts a separator between existing buttons and our new one
	// "friendly_button" is the ID of our button
	array_push($buttons, "|", "friendly_button");
	return $buttons;
}
 
// filters the tinyMCE buttons and adds our custom buttons
function friendly_shortcode_buttons() {
	// Don't bother doing this stuff if the current user lacks permissions
	if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') )
		return;
 
	// Add only in Rich Editor mode
	if ( get_user_option('rich_editing') == 'true') {
		// filter the tinyMCE buttons and add our own
		add_filter("mce_external_plugins", "add_friendly_tinymce_plugin");
		add_filter('mce_buttons', 'register_friendly_buttons');
	}
}
// init process for button control
add_action('init', 'friendly_shortcode_buttons');
 
// add the button to the tinyMCE bar
function add_friendly_tinymce_plugin($plugin_array) {
	global $fscb_base_dir;
	$plugin_array['friendly_button'] = $fscb_base_dir . 'friendly-shortcode-buttons.js';
	return $plugin_array;
}

The first of these functions registers our button with tinyMCE. It places a separator at the end of the current buttons, then our custom button following that.

The second function uses an add_filter hook to make our custom button actually display. It places the button created in the first function in the tinyMCE buttons.

And the third function connects our button to a javascript file. This is the file that controls the behavior of our button.

Important! In both the first and third function I have used friendly_button as an ID for the button. It’s very important that this never changes. I will use friendly_button a couple more times in this tutorial and it must be the same throughout.

Our TinyMCE Button’s Javascript

It is now time to create the javascript file that will control the behavior of the tinyMCE button that we added above.

Place this code into friendly-shortcode-buttons.js, which, remember the diagram, resides in the root plugin folder.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

(function() {
	tinymce.create('tinymce.plugins.buttonPlugin', {
		init : function(ed, url) {
			// Register commands
			ed.addCommand('mcebutton', function() {
				ed.windowManager.open({
					file : url + '/button_popup.php', // file that contains HTML for our modal window
					width : 220 + parseInt(ed.getLang('button.delta_width', 0)), // size of our window
					height : 240 + parseInt(ed.getLang('button.delta_height', 0)), // size of our window
					inline : 1
				}, {
					plugin_url : url
				});
			});
 
			// Register buttons
			ed.addButton('friendly_button', {title : 'Insert Button', cmd : 'mcebutton', image: url + '/includes/images/icon.gif' });
		},
 
		getInfo : function() {
			return {
				longname : 'Insert Button',
				author : 'Pippin Williamson',
				authorurl : 'http://pippinsplugins.com',
				infourl : 'http://pippinsplugins.com',
				version : tinymce.majorVersion + "." + tinymce.minorVersion
			};
		}
	});
 
	// Register plugin
	// first parameter is the button ID and must match ID elsewhere
	// second parameter must match the first parameter of the tinymce.create() function above
	tinymce.PluginManager.add('friendly_button', tinymce.plugins.buttonPlugin);
 
})();

This code does a couple of things: first, it registers a command that runs when our button is clicked. This command opens a modal window that contains the contents of the button_popup.php file. We have also set the dimensions of our window to be 220×240 px. The second thing this code does is apply an image to our button, for aesthetics. And thirdly, this code sets up the meta data of our tinyMCE plugin button. Not overly important, but nice to have.

Recall above how I mentioned the ID of the button being friendly_button? Line 17 and 34 both use that same ID. It MUST not change, otherwise your button will not work.

Okay, we now have our button and it should look like this (though your image may be different):

If you click the button now, a window will pop up, but it will display an “Object not found!” error. So we need to create the window contents now.

The Modal Popup

The contents of the modal window are nothing more than a PHP (or HTML) file. The file will have all of the necessary components of any other HTML page: HTML, HEAD, TITLE, and BODY tags. So let’s begin our file. The first part is the HEAD section. Place the following code into button_popup.php, which should be located in the root of your plugin folder.

1
2
3
4
5
6
7
8
9
10
11

<?php
// this file contains the contents of the popup window
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Insert Button</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
<script language="javascript" type="text/javascript" src="../../wp-includes/js/tinymce/tiny_mce_popup.js"></script>
<style type="text/css" src="../../wp-includes/js/tinymce/themes/advanced/skins/wp_theme/dialog.css"></style>
<link rel="stylesheet" href="includes/css/friendly_buttons_tinymce.css" />

Aside from the normal HTML file stuff, such as declaring a DOCTYPE, I have also placed SCRIPT, STYLE, and LINK tags to load the necessary scripts. We need to load jQuery, the tinyMCE Pop Up file, a CSS file for tinyMCE, and lastly our custom CSS file, which will control the styling for the window contents.

Note that I have not used wp_enqueue_script() and wp_enqueue_style() to load our scripts here. This is because those will not work in this case. With a bit of tweaking, you could probably make them work, but for this tutorial we will not worry about that. Also note that the first three files are all located inside of the WordPress install and are not part of this plugin. We’re just making use of them.

Alright, we have two more parts to our button_popup.php file. One is the javascript that will take care of inserting the short code and its selected attributes into the post editor, and the second is the HTML form code for our short code attributes. Let’s do the javascript first.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

<script type="text/javascript">
 
var ButtonDialog = {
	local_ed : 'ed',
	init : function(ed) {
		ButtonDialog.local_ed = ed;
		tinyMCEPopup.resizeToInnerSize();
	},
	insert : function insertButton(ed) {
 
		// Try and remove existing style / blockquote
		tinyMCEPopup.execCommand('mceRemoveNode', false, null);
 
		// set up variables to contain our input values
		var url = jQuery('#button-dialog input#button-url').val();
		var text = jQuery('#button-dialog input#button-text').val();
		var size = jQuery('#button-dialog select#button-size').val();
		var color = jQuery('#button-dialog select#button-color').val();		 
		var style = jQuery('#button-dialog select#button-style').val();		 
		var align = jQuery('#button-dialog select#button-align').val();		 
 
		var output = '';
 
		// setup the output of our shortcode
		output = '[button ';
			output += 'size=' + size + ' ';
			output += 'style=' + style + ' ';
			output += 'color=' + color + ' ';
			output += 'align=' + align;
 
			// only insert if the url field is not blank
			if(url)
				output += ' url=' + url;
		// check to see if the TEXT field is blank
		if(text) {	
			output += ']'+ text + '[/button]';
		}
		// if it is blank, use the selected text, if present
		else {
			output += ']'+ButtonDialog.local_ed.selection.getContent() + '[/button]';
		}
		tinyMCEPopup.execCommand('mceReplaceContent', false, output);
 
		// Return
		tinyMCEPopup.close();
	}
};
tinyMCEPopup.onInit.add(ButtonDialog.init, ButtonDialog);
 
</script>

The important things to know about this code, so that you can modify it for your own uses, are the var declarations and the output string.

Starting at line 15, we have a variable declared for each attribute of our short code: url, text, size, color, style, align. Each of these variables contain the value (using jQuery’s .val() function) of their respective form field, which we will be adding shortly.

Then, starting at line 22, we setup the output string. This variable will contain the final short code to be inserted into the editor. We start by adding [button to it. This is the beginning of our short code. Then we add each attribute so that it ends up like this:

[button size=SIZE style=STYLE color=COLOR align=ALIGN

Next, we perform two IF checks. One to check if the URL field is empty, and if it’s not, we add the url=URL attribute. The second IF statement checks to see if the TEXT field is empty, and if it’s not, we close the short code, place the TEXT value inside of it, and then place the closing short code tag after that, so that the result looks like this:

[button size=SIZE style=STYLE color=COLOR align=ALIGN url=URL]TEXT[/button]

If the TEXT field is empty, then we insert whatever text was selected (if any) when the user clicked the insert button, which would result in and output like this:

[button size=SIZE style=STYLE color=COLOR align=ALIGN url=URL]SELECTED TEXT[/button]

That’s it for the jQuery, now we need to create the HTML form for our short code attributes.

The Short Code Attributes Form

This next piece of code will contain all of the form fields for our short code attributes. One of the important things to note is that the field IDs match those of the variables we declared for each attribute in our jQuery above. Also note that we are included in the closing HEAD, BODY, and HTML tags in this next snippet.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

</head>
<body>
	<div id="button-dialog">
		<form action="/" method="get" accept-charset="utf-8">
			<div>
				<label for="button-url">Button URL</label>
				<input type="text" name="button-url" value="" id="button-url" />
			</div>
			<div>
				<label for="button-text">Button Text</label>
				<input type="text" name="button-text" value="" id="button-text" />
			</div>
			<div>
				<label for="button-size">Size</label>
				<select name="button-size" id="button-size" size="1">
					<option value="small">Small</option>
					<option value="medium" selected="selected">Medium</option>
					<option value="large">Large</option>
				</select>
			</div>
			<div>
				<label for="button-style">Style</label>
				<select name="button-style" id="button-style" size="1">
					<option value="less_round">Less Round</option>
					<option value="round" selected="selected">Round</option>
					<option value="square">Square</option>
				</select>
			</div>
			<div>
				<label for="button-color">Color</label>
				<select name="button-color" id="button-color" size="1">
					<option value="gray" selected="selected">Gray</option>
					<option value="blue"=>Blue</option>
					<option value="red">Red</option>
					<option value="green">Green</option>
					<option value="black">Black</option>
				</select>
			</div>
			<div>
				<label for="button-align">Alignment</label>
				<select name="button-align" id="button-align" size="1">
					<option value="gray" selected="selected">None</option>
					<option value="left"=>Left</option>
					<option value="right">Right</option>
				</select>
			</div>
			<div>	
				<a href="javascript:ButtonDialog.insert(ButtonDialog.local_ed)" id="insert" style="display: block; line-height: 24px;">Insert</a>
			</div>
		</form>
	</div>
</body>
</html>

There’s really nothing complex about this code, it’s just a plain HTML form with either an INPUT or SELECT field for each of our short code options. First, notice that I have set default options by defining the VALUE attribute for input fields and SELECTED attribute for select fields. This helps to ensure that blank attributes are not inserted.

The next important thing about this code is at the bottom, where I have placed an anchor link with a bit of javascript for the HREF. This is vital to the modal window’s function. Without this HREF, the short code will not be inserted into the content.

The Modal Window CSS

Recall that a few steps back we loaded a CSS file called friendly_buttons_tinymce.css. This file controls the appearance of the HTML form fields we just created. But without any CSS in that file, it’s not doing very much ;) So here is the CSS:

1
2
3
4
5
6

#button-dialog { }
#button-dialog div{ padding: 5px 0; height: 20px;}
#button-dialog label { display: block; float: left; margin: 0 8px 0 0; width: 80px; }
#button-dialog select, #button-dialog input { display: block; float: right; width: 100px; padding: 3px 5px;}
#button-dialog select { width: 112px; }
#button-dialog #insert { display: block; line-height: 24px; text-align: center; margin: 10px 0 0 0; float: right;}

This file is placed in the includes/css folder, along with the CSS file for the actual buttons.

That’s it! We’re done! Now, when you click the button in the TinyMCE button bar, you should be presented with this:

And, assuming you have done everything correctly, your short code should appear in your post editor as soon as you click the “Insert” button.

Going Further

So what’s next? It is entirely up to you. With the code provided in this tutorial, you have everything you need to add awesome, easy to use short codes to your WordPress theme or plugin. I believe I have done pretty well explaining the code, and making it easy to modify, but if you have any trouble, of course ask in the comments!

Download the Complete Plugin

If doing all the manual coding yourself isn’t quite your thing, you’re in luck! I have put the code from this tutorial into a complete plugin that you can download for free at my website: Pippin’s Plugins.com

Enjoy this post? You should follow me on Twitter!