Working on a project where I would like to have buttons within the actual visual editor area where the user can click on the placeholder image and it brings up the upload dialog.

I've seen that people create their own buttons that adds boxes that the user then should select with their mouse and then click the add media upload. To me that seems like it's bound for a bad user experience. Thus I'm looking to see if someone have seen a plugin that does this.


Imaging that you could actually click "insert image here" and have an upload dialog brought up.

  • 2
    This would be somewhat difficult, a better option for heavily formatted posts is to forgo the default wysiwyg and use custom fields.
    – Wyck
    Jan 27, 2013 at 23:16
  • 2
    such an answer would likely become unworkable/unusable after a WordPress update, as TinyMCE get updated and APIs change
    – Tom J Nowell
    Jan 28, 2013 at 0:07

1 Answer 1


such an answer would likely become unworkable/unusable after a WordPress update, as TinyMCE get updated and APIs change - by @TomJNowell

While I agree with Tom, there still an be a general answer that explains the general concept and the parts that aren't moving.

The PHP plugin to set the default content

First there has to be some default content. And there's a filter for that:

/* Plugin Name: (#83397) Default TinyMCE Content */

add_filter( 'default_content', 'wpse83397_add_editor_default_content' );
public function wpse83397_add_editor_default_content( $content )
    if ( "your_post_type" !== get_current_screen()->post_type )
        return $content;

    return sprintf(
        '<img src="%s" title="Placeholder" />', 
        plugin_dir_path( __FILE__ ).'placeholder.png'

TinyMCE JS events

Then you simply need to add an event listener. Example from the official documentation.

tinymce.activeEditor.on( 'GetContent', function( e ) {
    console.log( e.content );
} );

The global WordPress wp object

Finally, you just need to attach the media open dialog action to the content itself. There's the wp object, that holds most of WordPress core js stuff. Just type wp into your console and you'll see that you have global access after the DOM is ready to the following:

  • Backbone: Object
  • Uploader: function ( options )
  • ajax: Object
  • autosave: Object
  • heartbeat: Heartbeat
  • html: Object
  • media: function ( attributes )
  • shortcode: function ( options )
  • template: function

As you can see, there's media and Backbone as well. Just hit wp.media. into your (for e.g.) Chrome dev tools console and you'll see the autocomplete function telling what's available. Additionally to that, Dominik Schilling, the author of the media library has a nice set of demos for the WP Media library on GitHub.

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.