I have created a shortcode via the Shortcode API that does something like this:

[accordion_item numero="01" primeiro="true"]Item 01[/accordion_item]
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed quis nisi eget eros ultrices vestibulum in sit amet nunc.
Cras varius pellentesque tellus nec vulputate. Nam viverra congue diam ut vehicula.


<div class="DV_item BordaTop ">
                            <li class="LI_numero neoSans">01</li>
                            <li class="LI_Pergunta">
                                <h2>Item 01</h2>
                    </div><br />
<div class="DV_Conteudo"><p><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
Sed quis nisi eget eros ultrices vestibulum in sit amet nunc.<br />
Cras varius pellentesque tellus nec vulputate. Nam viverra congue diam ut vehicula.<br />

I would like the user to be able to preview that result in the editor, like some other shortcodes do, like [gallery].

Any ideas?

2 Answers 2


I have just spent 24 hours attempting the same implementation, but with a more elaborate styled preview of results. Basically like a layout builder using shortcodes.

Wish I would have found this post earlier cause it lays the groundwork for the first objective (using TinyMCE for point & click selection of shortcode attributes):

The second part of your question you'll have to accomplish on your own, as I found zero help in the form of tutorials/guidance and for good reason; found many premium themes using this as selling point. You can strip the preview functionality from a woothemes plugin called "shortcode-ninja," but it will attempt to force you to use a woo theme.

I'm not fluent with tinymce, thickbox, or any real code obfuscation (which I'm assuming the plugin is attempting.) Though it may be a breeze for any actual coder.

tinymce shortcodes plugin
shortcode previews plugin

Ok I will attempt to improve my answer as per s_ha_dum's suggestion.

I've spent a lot of time already fooling around with this, so this answer is a shotgun approach. Please feel free to edit it if it doesn't conform to format guidelines, etc.

To stop the plugin from checking for a wootheme you'll need to find entries such as these:

$woo_framework_version = get_option('woo_framework_version');

$MIN_VERSION = '2.9';

$meetsMinVersion = version_compare($woo_framework_version, $MIN_VERSION) >= 0;

$woo_shortcode_css = dirname(__FILE__) .  '/../../../themes/' 
                                   . basename(get_template_directory())
                                   . '/functions/css/shortcodes.css';
                                   $isWooTheme = file_exists($woo_shortcode_css);

<?php if ( $meetsMinVersion && $isWooTheme ) { ?>

<?php  }  else { ?>

<div id="scn-options-error">

<?php } else { ?>

Looks like your active theme is not from WooThemes. Shortcode Ninja only works with fights for themes from WooThemes.

What to do now?

Pick a fight: (1) If you already have a theme from WooThemes, install and activate it or (2) if you don't yet have one of the awesome WooThemes head over to the "nowdeadwebsiteaffiliatelink" and get one.

Anyway just getting around the theme check didn't do much that I recall. You'll need to rewrite the code or reverse engineer? the code. It seemed to me like it was passing around way to many random variables, but honestly maybe that's just how TinyMCE operates. I'm not too certain in this regard.

Another thing I should mention is while hardcore researching for an answer such as this one, I found out that the whole wootheme exploit not too long ago was due to the code in this plugin. Which might be why there's no longer a preview when using their shortcode generator like there was before. So make sure the code is actually safe before putting into production. Shortcode preview is a small luxury, but not if it comes with security vulnerabilities.

WooThemes WooFramework exploit: Execute any shortcode as an unauthenticated visitor: gist.github.com/jasongill/2523147

The cause of this is the following code in functions/js/shortcode-generator/preview-shortcode-external.php

$shortcode = isset($_REQUEST['shortcode']) ? $_REQUEST['shortcode'] : '';

$shortcode = strip_tags( stripslashes($shortcode) );

echo do_shortcode($shortcode);

The best answer I could give you, other than the actual updated plugin itself, is to look for kreisi's modification of it which he includes in his premium wordpress themes. I also found someone selling similar plugin functionality on codecanyon. "vision shortcodes" or similiar.

Googling this would probably serve you well:
"VisualShortcodes.com (modified by Kriesi)"

Please try to purchase a theme if you find his modifications useful.

Edit 2: Found a really cool/unique implementation of thickbox with great styling, and point and click selection of fontawesome icon shortcode. Only preview is of the icons, but I thought it definitely warranted inclusion:

http://themenectar.com/demo/salient/features/elements/ (available for purchase on themeforest)

  • Let me know if you follow through with the idea, and I'll update with specifics
    – nocommit
    May 1, 2013 at 18:06
  • 3
    You should expand upon the answer anyway. The information is not just for the person who asked the question.
    – s_ha_dum
    May 1, 2013 at 18:30
  • unable to post links due to reputation, but just replace the DOT's
    – nocommit
    May 2, 2013 at 17:10

Replacing shortcodes in TinyMCE with a graphic:

Replacing inserted shortcodes in TinyMCE with a Graphic - WPSites.co.uk

  • 2
    Link only answers are discouraged. If something happens to that link the answer becomes useless. Please try to make your answer here stand alone.
    – s_ha_dum
    Nov 10, 2013 at 17:21

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.