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. Automating Code Linting with GitHub Actions for WordPress Plugins
  2. Comprehensive Guide to Linting PHP, JavaScript, and CSS in WordPress Plugins Using Composer
  3. The Ultimate Guide to Indexing in Database Design
  4. Understanding 'update_meta_cache' in WordPress - When to Use It, When Not to, and Its Impact on Database Queries
  5. A Guide to Configuring JavaScript and SCSS Paths in WordPress Plugins with @wordpress/scripts

Your Questions / Comments

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