User Friendly Short Codes with TinyMCE
61WordPress 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!
Hi Pippin
Only just getting used to Michael’s new look site – really starting to grow on me.
Loved those words…
“If doing all the manual coding yourself isn’t quite your thing” – LOL
A really useful post and that plugin sounds fantastic.
Glad to hear it’s growing on you still Keith! :D
Pippin makes awesome plugins, always delighted when he shares his process behind them here! :)
Thanks!
Awesome tutorial Pippin. I will be adding this manually to my next theme. Thanks!
Great to hear AJ
Hi Michael
“Glad to hear it’s growing on you still Keith! :D”
I think that I was so used to the old one, this one always surprises me.
How about another couple of layers of nested comments Michael – have you deliberately kept it to 2?
The comments work the same as the old site. You can add as many comments as you want, but you always click the “reply” button from the first comment.
(I deliberately hide it on replies so that if there is a chain of 3 or 4 comments, no-one can reply to the first one and have their comment inserted in the middle, which would be a little confusing)
Perhaps I haven’t made that clear enough though? Hmm….
(I just managed to mis-post as well, and I made the thing, so it seems quite likely! Will look into other options! xD )
Just got your comment Michael
What a star you are.
I can feel all superior for the rest of the evening. LOL
Cheers Michael
I am not into coding, so I could not make any heads or tails about this cascading style sheet stuff. However, I shall request my daughter to look into the same since she is familiar with these things.
If she has any questions about it, she’s more than welcome to ask here! :)
It’s definitely one of our more advanced posts though, I completely understand that.
Don’t forget that you can also download the complete plugin for free from my site. There is a link at the bottom of the tutorial.
YAY! I’m going to download your plugin and use it on my sites!
I JUST learned how to style gradient buttons using CSS3 about two weeks ago – took about two days to wrap my non-programmer head around it. I love the results, but I need something easier – especially because my husband wants more buttons in more colors and I really don’t want to spend the time for him on each one. :-(
There are a lot of CSS 3 gradient generators that you can use that will make your life much easier :)
Seems a very handy and useful plugin! Let me try this! Thanks for sharing :D
Glad you liked it!
Nice! I downloaded it from your site and installed it, but it’s not working for me. . .there are no styles showing in the form that opens in the Thickbox and when I click “Insert” it doesn’t get inserted.
Any ideas?
Here’s a screenshot of the thickbox when I open it. . .http://bit.ly/lVbmED
It looks like your “tiny_mce_popup.js” isn’t loading. Try adjusting the path. This is in the “The Modal Popup” step.
Fixed. . .needed an extra “../”
AWESOME TUTORIAL by the way. . .It took me a while to figure out how to add a shortcode insert button with options. . .I like your way better than the way I figured it out before
This will change occasionally, depending on your WordPress install setup. There is improvement to be made for the script loading in this section, but it works as an example.
Great! Glad you liked it!
asking permit to download the plugin with many thanks.
sorry, but they didn’t work, can you help ?
Yes, you can download it from the link at the bottom of the post.
Which part didn’t work? I ned to know what part you are struggling with in order to help you out.
@Pippin – great work – will bookmark for later use
@Michael – nice sauve design change..- text is easier to read I think – Thumbs Up !! :)
Your plugins are really useful. Short code is a user friendly concept and its easy to use.
Nice, loved it man! Great Plugins really loved it :)
thanks for these short codes hopefully they will come in handy for my antigua resort website
This is a wonderful plugin.. Its very evident how much work you have put into it. Thanks for making this available for the community. I think I will use it on my new themes. Thanks..
Sounds like a great list of short cuts… Thanks again for always keeping us in the loop!
Tutorials are my big love :)
great tutorial! thanks a lot for the short codes info.
great tutorial and thanks for the share :) ,Just one question if you dont mind,is it possible to launch the modal window with one button,then display a dropdown list of shortcodes which when selected reveal their selectable attributes and can then be inserted into post or page.also can the button be used in html view and how. i know its a big ask,but any help is much appreciated. :)
Dan, yes, that is most definitely possible. What you need to remember is that the content inside of the modal window is nothing but plain HTML, so you can put anything you want (including a tabbed interface). Once you have your tabs set up, all you need to do is add in the JS variables (just like we did for the short codes here) for each of the shortcodes.
a very lengthy article but still very useful, but i want to know one thing is it possible to create our very own short codes if we have a knowledge of php and other languages
thanks a lot for the short codes info.
Hi Pippin,
Liking the plugin. Is there a way of getting it to find the height and width dynamically?
Just I’m trying to use it in such a way where the content is generated dynamically (e.g. if ‘button’ then show options for the button; if ‘map’ show the map options – and so on).
Aside from that, is there any particular benefit for using the iframe method used in this tutorial over using WP’s built-in overlay (as in the tb_show option)?
Thanks.
Clare.
Clare, you would almost undoubtedly have to use jQuery for it, and I don’t expect it would be too difficult. Simply get the inner height (the height filled by the window’s content) then resize the outer window.
Thanks Pippin for your help there. One more thing, do you know how I would get the ‘output +=…’ to increment data?
What I mean is I want to auto increment tabs so something like: (where tabnameX and the value is a loop, if that makes sense)
[tabs tabname1=’a tab’ tabname2=’another tab’….]
I can get it done manually but obviously not ideal and the for loop or jquery’s .each() didn’t seem to work (came up with errors).
Anyway, thanks again.
Clare.
I’m having an issue where I can’t get the tiny_mce_popup.js path because I don’t have access to WordPress vars and contants. Using just ../../ doesn’t work for me. Any ideas?
I had to add an extra ../
I’d much rather figure out how to access WordPress vars and constants though.
User Friendly Short Codes with TinyMCE is making it easy to make a list of short cuts for easy access.
This is a great post and it has helped me a lot,
Resources much like the one anyone reveal here are going to be very cooperative in my opinion! I will certainly post one of the links to this page on our blog. More than likely my guests will quickly realize that quite significant.
http://www.hermeshandbagoutlet.com
Great post!!
Good job.. Thanks for your share
Thanks for this tutorial. will use this for my next project.
thanks again.
very thanks
Can anyone tell me how to use the clean code function? I can’t even get the little paint brush to show up on my icon board, also does this remove bolding and underscore or does it clean up garbage that MS Word puts in?
thanks for the great comments here… however, I cannot seem to get the table function to work… is there a short tutorial available?
I simply had to appreciate you all over again. I am not sure the things that I might have sorted out without those opinions revealed by you directly on my situation. Completely was the intimidating dilemma in my circumstances, however , noticing your expert fashion you treated it took me to weep over gladness. I am thankful for your assistance as well as have high hopes you recognize what a great job you are accomplishing instructing others with the aid of your blog post. Most likely you haven’t come across any of us.
Hi Pippin,
thanks for really great plugin!
Just wanted to let you know about a little mistake (may be)
in a line:
tinyMCEPopup.execCommand(‘mceReplaceContent’, false, output);
it should be “mceInsertContent” parameter instead of “mceReplaceContent”.
because of the position of cursor when you press “insert” button. The shortcode appears right below the content without any white space.
Thanks Again!
Excellent free plugin, many thanks for sharing all your hard work!
Hi, this is an excellent tutorial. I know you don’t owe anyone further explanation but I want to create multiple buttons. After experimenting a little I’ve decided that the easiest way to go is to basically duplicate all the files and modify as needed.
Would this approach slow things down in the WP editor? Is there any way to have all the js in one plugin?
As you can tell – I’ve no idea what I’m doing :P
Thanks for the tip. Good stuff and pretty easy to implement.
Thanks for the tutorial and for the blog.
I was curious about if you ever thought of changing the page layout of your blog? Its very well written; I love what youve got to say. But maybe you could add a a bit more in the way of content so people could connect to it better. You have got an awful lot of wording for only having one or two photos. Maybe you could space it out better?
Great tutorial!! Could you tell me how to add a second button that will work the same way but without making a second plugin for that? Thanks!
hi, thats awesome work. i want to add some more shortcode e.g. Alerts box, Panels, youtub video, columns etc in this plugin you tell me how to do it
Great tutorial. Another option is to get ElegantThemes Shortcodes plugin which is loaded with tons of really great shortcodes such as pricing chart, check mark lists, buttons, notice boxes, author boxes and much more.
For some reason, in WordPress 3.5 you can’t use the selected text code anymore… It doesn’t work. More people with this problem in 3.5?
Very Good Tutorial in Deed .. .