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.

  • Have you read this (wp.tutsplus.com/tutorials/theme-development/…) article? Check the TinyMCE part.
    – cr0z3r
    Commented Dec 15, 2011 at 15:50
  • 1
    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. Commented Dec 15, 2011 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"? Commented Jan 30, 2012 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) Commented Jan 30, 2012 at 10:55
  • 1
    – jgraup
    Commented Aug 30, 2016 at 14:12

3 Answers 3


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

  • interesting! let me ask you... what are your thought in having the actual content of all shortcodes automatically converted into the associating content? Commented Feb 1, 2012 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. Commented Feb 1, 2012 at 14:09
  • did you ever happen to see a solution by anyone else on this? Commented Nov 23, 2012 at 23:54

This is not a complete answer, just an design direction. I think the best approach is something like this:

In the admin edit post

Rip all the shortcodes from the saved post and render it inside a metabox, aside from the editor. Make shure they appears in the same order as the shortcodes occur in the tiny Editor.

In tinyMCE javascript API

Make a jQuery function, when user click on a shortcode, it swaps the HTML from the metabox into the editor. And vice versa. The order itselfs should be ok as association, but Im not shure about enclosing shortcodes. However there is many ways to design a nice ID-connection. The updates of shortcodes can be done on the fly with ajax.

Never save the rendered shortcode state

Before switch editors, save drafts, autodrafts and publish, make a API call to trigger the restore, so the rendered shortcode state never get saved...

This can be done, but you need to be familar with the tinyMCE API to understand where and when to access the contents of the editor, and hook into javascript actions before 'save' and more.

There can be several tinyMCE editor on the same edit post pageload.

The restore part can be investigated by looking at the [gallery] shortcode beaviour. But the click on [MY_SHORTCODE] has to be done by some jQuery tricks.

in the admin_footer script, access the content of where the cursor is active with:

var $editor_content = $(tinymce.activeEditor.getBody());

is a hint of how to start.


I was looking for a way to graphically display and tweak shortcodes too. And now, finally, I found a tutorial that does exactly that: https://generatewp.com/take-shortcodes-ultimate-level/


I add the description so that search engines pick it up:

We are going to create a simple plugin with a shortcode, then we are going to add a TinyMCE editor button to insert that shortcode trough a popup which will collect all of the user input for the shortcode attributes. Then, we are going to replace the shortcode in the TinyMCE editor with a placeholder image, much like the native gallery of WordPress (which is actually a shortcode, in case you didn’t know), and last – we are going to allow editing of the shortcode and its attributes by double clicking on the placeholder image.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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