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'm using Wordpress 3.9.1 and I wrote a custom shortcode that working, but I'd like to custom it a little bit When I use my shortcode, this is the render in the admin page : [toggles title="zaez"]aezaezae[/toggles]

I can edit, add text or link to the text "aezaezae". And i'd like to keep this behavior but make it more good to look.

So I used some code from wordpress (gallery's code) and did that :


var views = {},
    instances = {},
    media = wp.media,
    viewOptions = ['encodedText'];

// Create the `wp.mce` object if necessary.
wp.mce = wp.mce || {};

wp.mce.toggles = {
    shortcode: 'toggles',
    toView:  function( content ) {
        var match = wp.shortcode.next( this.shortcode, content );

        if ( ! match ) {

        return {
            index:   match.index,
            content: match.content,
            options: {
                shortcode: match.shortcode
    View: wp.mce.View.extend({
        className: 'editor-toggles',
        template:  media.template('editor-toggles'),

        // The fallback post ID to use as a parent for galleries that don't
        // specify the `ids` or `include` parameters.
        // Uses the hidden input on the edit posts page by default.
        postID: $('#post_ID').val(),

        initialize: function( options ) {
            this.shortcode = options.shortcode;

        getHtml: function() {
            var attrs = this.shortcode.attrs.named,
                content = this.shortcode.content,

            options = {
                content: content,
                title: attrs.title

            return this.template( options );


wp.mce.views.register( 'toggles', wp.mce.toggles );

And this is the template that is called

   <script type="text/html" id="tmpl-editor-toggles">
<div class="toolbar">
    <div class="dashicons dashicons-edit edit"></div><div class="dashicons dashicons-no-alt remove"></div>
<# if ( data.title ) { #>

        <h2>{{ data.title }}</h2>
        <p data-wpview-pad="1">{{ data.content }}</p>

<# } #>

It's working too, but at this time I cannot edit my content anymore. I looked with the gallery's function, but it called another window (wp.media.gallery), and I'd like to be able to edit in this default editor...

Can someone tell me if it's possible and maybe give me a clue ? I found this but like I said it's for media (images... videos) Custom wp.media with arguments support

If I've to call a new window to edit my shortcode I'll do it but I don't really know how..

Thanks you ! Best regards Thomas

share|improve this question
Any luck with this? I want to do the same thing. – soderlind Sep 17 '14 at 6:04
No I figured out that it's not possible at the moment whitout changing wordpress's core... But if you find out a way, let me now please ! – H4mm3R Sep 17 '14 at 9:21
WP 4.0 has added support for edit, just have to understand how to override it. Have a look at line 379 in phpcrossref.com/xref/wordpress/wp-includes/js/mce-view.js.html – soderlind Sep 17 '14 at 23:22

Your Answer


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

Browse other questions tagged or ask your own question.