Sarathlal N

Add TinyMCE WYSIWYG (Rich text area) meta box - WordPress

Have you ever tried to add rich text area meta box in your post editing screen? Now the WordPress improved its wp_editor function & it is very easy to create new WYSIWYG meta box in WordPress admin screen.

wp_editor( $content, $editor_id, $settings = array() );

The parameter, $settings is an array of arguments. More details are available in WordPress Codex page.

Below you can find an example code snippet that add a new WYSIWYG meta box - Notes, in the post post type.

add_action( 'add_meta_boxes', 'post_note_meta_box_add' );
function post_note_meta_box_add()
{	
	// Add new meta box
	add_meta_box( '_post_note', 'Notes', 'render_post_note_meta_box', 'post', 'normal', 'default' );
}

function render_post_note_meta_box()
{
	global $post;
	// Get saved meta data
	$post_note_meta_content = get_post_meta($post->ID, '_post_note', TRUE); 
	if (!$post_note_meta_content) $post_note_meta_content = '';
	wp_nonce_field( 'post_note'.$post->ID, 'post_note_nonce');
	// Render editor meta box
	wp_editor( $post_note_meta_content, 'post_note', array('textarea_rows' => '5'));
}

add_action( 'save_post', 'post_note_meta_box_save' );
function post_note_meta_box_save( $post_id )
{
	// Bail if we're doing an auto save
	if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
	 
	// if our nonce isn't there, or we can't verify it, bail
	if( !isset( $_POST['post_note_nonce'] ) || !wp_verify_nonce( $_POST['post_note_nonce'], 'post_note'.$post_id ) ) return;
	 
	// if our current user can't edit this post, bail
	if( !current_user_can( 'edit_post' ) ) return;
	
	
	// Make sure our data is set before trying to save it
	if( isset( $_POST['post_note'] ) )
		$result = update_post_meta( $post_id, '_post_note', $_POST['post_note'] );
}

Looking for a skilled WordPress/WooCommerce developer? I'm currently available for freelance, contract, or full-time remote opportunities! Let's create something amazing together. Send me a quick message, and I'll respond within 24 hours!

Recent Posts

  1. Understanding the Singleton Pattern and Using Traits to Achieve Singleton in WordPress Plugin Development
  2. REST API Methods Explained with Best Practices for Building Clean and Secure APIs
  3. My 28-Day Plan to Master Modern WordPress Development Using AI Tools
  4. Scaling WordPress - How Custom Database Tables Solve the Post Meta Bottleneck
  5. WordPress Transients Explained - A Developer's Guide to Site Performance

Your Questions / Comments

If you found this article interesting, found errors, or just want to discuss about it, please get in touch.