WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I have asked this question about a year ago and I am hoping there is some type of simple solution which will allow me achieve my objective. So here it goes:

I often utilize shortcodes within the Admin Editor but when I turn this over to client they often don't understand how they work.

What I am looking for is a solution which would simply automatically render the associating output of shortcodes within the admin WYSIWYG editor.

From a visual perspective, I would like for this to display similar to when the "more" line show up or when an image is displayed within the editor. By this I mean that the user would see the output but would only be able to delete it but not edit the content of the rendered shortcode.

share|improve this question
Have you read this (wp.tutsplus.com/tutorials/theme-development/…) article? Check the TinyMCE part. – cr0z3r Dec 15 '11 at 15:50
I have read that but a far as I can tell it just deals with creating/registering short codes and creating buttons for the editor to quickly insert short codes... But no info on rendering those shortcodes with the HTML block counterparts as I described. – NetConstructor.com Dec 15 '11 at 18:51
Do you mean that you want to include a visual aid that's representative of whatever shortcode you're including, and not actually replacing the shortcode with the real-deal HTML? i.e. the gallery placeholder, which isn't actually the gallery code, but rather a visual placeholder which is merely letting the user know, "Hey, there's a gallery here"? – Matthew Boynes Jan 30 '12 at 5:27
Exactly! And I would like for it to be a bit flexible thus allowing me to customize it on a per shortcode basis (similar to like you said the gallery or when an image is included) – NetConstructor.com Jan 30 '12 at 10:55
up vote 10 down vote accepted

It's actually not too bad to do what you're asking. This should take you about an hour to do your first one, and 10 minutes to do subsequent ones.

Ultimately what you're going to do is create a TinyMCE plugin. Here's what you should arm yourself with to start:

  1. General guide to creating a tinymce plugin
  2. Example code from WordPress Core
  3. A general guide on adding a TinyMCE plugin to WordPress. I found this one, which seems adequate.

You now have all the tools to get 'er done! Of all this, the code that will be of most interest to you is this block in the WP example code:

4   function replaceGalleryShortcodes( content ) {
5       return content.replace( /\[gallery([^\]]*)\]/g, function( match ) {
6           return html( 'wp-gallery', match );
7       });
8   }
10  function html( cls, data ) {
11      data = window.encodeURIComponent( data );
12      return '<img src="' + tinymce.Env.transparentSrc + '" class="wp-media mceItem ' + cls + '" ' +
13          'data-wp-media="' + data + '" data-mce-resize="false" data-mce-placeholder="1" alt="" />';
14  }

Here, the shortcode for a gallery gets replaced with an img tag. The img tag has the class wp-gallery, which gets styled by the CSS found here.

Edit 2016-04-06: Updated content and links for TinyMCE 4 and WordPress 4.4

share|improve this answer
interesting! let me ask you... what are your thought in having the actual content of all shortcodes automatically converted into the associating content? – NetConstructor.com Feb 1 '12 at 9:09
That would all depends on the content. First, remember that some HTML gets stripped, has trouble rendering in TinyMCE, etc. Second, let's say your shortcode renders a block of complex HTML -- if your user went to edit it, they could inadvertently break it. Third, if your shortcode has options, those options are now rendered uneditable unless you kill the whole HTML block and redo the shortcode. Chances are, if your code is complex enough that you need shortcode, I think the placeholder is your best bet. – Matthew Boynes Feb 1 '12 at 14:09
did you ever happen to see a solution by anyone else on this? – NetConstructor.com Nov 23 '12 at 23:54

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.