I'm a novice and looking to add the wp_editor to a custom metabox textarea field. I've looked seemingly everywhere for an complete example for writing a metabox with a textarea that uses the wp_editor. I am looking for a complete beginning to end example.

I do not want to use a plugin.

Anyone have a link to a complete example?


2 Answers 2


There is at least 1 issue with using wp_editor in a meta box, as discussed in ticket #19173(Good read on the subject of wp_editor and meta boxes). TinyMCE gets all messed up if you move the meta box that contains it (specifically, if TinyMCE's location in the DOM is changed). You can, however, use the Quicktags version (non tinyMCE). Another alternative is to just not move the box (lame) or add your editors using the edit_page_form or edit_form_advanced hooks instead of using add_meta_box().

I wrote a quick plugin to demonstrate the issue. It's a fully working example of using wp_editor in a meta box though. You can configure wp_editor to make it more meta box friendly by disabling TinyMCE and enabling quicktags using the appropriate args.

 * Plugin Name: WP Editor in a Meta Box
 * Plugin URI: 
 * Description: Demonstration of WP Editor in a meta box.
 * Version: 1.0
 * Author: goto10
 * Author URI: 
 * License: 

// file name: wp_editor-in-meta-box-test.php 

/* Meta box code based on http://codex.wordpress.org/Function_Reference/add_meta_box */

/* Define the custom box */
add_action( 'add_meta_boxes', 'myplugin_add_custom_box' );

/* Do something with the data entered */
add_action( 'save_post', 'myplugin_save_postdata' );

/* Adds a box to the main column on the Post and Page edit screens */
function myplugin_add_custom_box() {
  add_meta_box( 'wp_editor_test_1_box', 'WP Editor Test #1 Box', 'wp_editor_meta_box' );

/* Prints the box content */
function wp_editor_meta_box( $post ) {

  // Use nonce for verification
  wp_nonce_field( plugin_basename( __FILE__ ), 'myplugin_noncename' );

  $field_value = get_post_meta( $post->ID, '_wp_editor_test_1', false );
  wp_editor( $field_value[0], '_wp_editor_test_1' );

/* When the post is saved, saves our custom data */
function myplugin_save_postdata( $post_id ) {

  // verify if this is an auto save routine. 
  // If it is our form has not been submitted, so we dont want to do anything
  if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) 

  // verify this came from the our screen and with proper authorization,
  // because save_post can be triggered at other times
  if ( ( isset ( $_POST['myplugin_noncename'] ) ) && ( ! wp_verify_nonce( $_POST['myplugin_noncename'], plugin_basename( __FILE__ ) ) ) )

  // Check permissions
  if ( ( isset ( $_POST['post_type'] ) ) && ( 'page' == $_POST['post_type'] )  ) {
    if ( ! current_user_can( 'edit_page', $post_id ) ) {
  else {
    if ( ! current_user_can( 'edit_post', $post_id ) ) {

  // OK, we're authenticated: we need to find and save the data
  if ( isset ( $_POST['_wp_editor_test_1'] ) ) {
    update_post_meta( $post_id, '_wp_editor_test_1', $_POST['_wp_editor_test_1'] );


Edit: This version of the wp_editor_meta_box() function from the example above, will have TMCE disabled, and Quicktags enabled:

/* Prints the box content */
function wp_editor_meta_box( $post ) {

  // Use nonce for verification
  wp_nonce_field( plugin_basename( __FILE__ ), 'myplugin_noncename' );

  $field_value = get_post_meta( $post->ID, '_wp_editor_test_1', false );

  // Settings that we'll pass to wp_editor
  $args = array (
        'tinymce' => false,
        'quicktags' => true,
  wp_editor( $field_value[0], '_wp_editor_test_1', $args );
  • 1
    Thanks for the code. Would you mind explaining a little more "TinyMCE's location in the DOM is changed" and how I would go about "disabling TinyMCE and enabling quicktags". Commented Apr 23, 2012 at 3:30
  • No problem. Updated answer with non-Tiny version. Also, when you move a meta box using its drag and drop feeature, it is moved in the DOM. If the meta box contains an instance of TinyMCE, that instance's position in the DOM will have changed, which causes problems. Apparently it is possible to overcome these problems, but it would require a bunch of new functionality, so it was decided that wp_editor (at least when it's using TinyMCE) should not be used in a meta box. Commented Apr 23, 2012 at 3:59

Are you looking for a code example from scratch, or would you consider integrating a custom metabox plugin which supports a WYSIWYG editor in a metabox? If the latter, might I suggest https://github.com/jaredatch/Custom-Metaboxes-and-Fields-for-WordPress

  • I am looking for an example from scratch without a plugin. I will update the question. Commented Apr 23, 2012 at 2:57

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.