How to Use WYSIWYG or WP Editor in WordPress Custom Meta box

WordPress Development

Want to learn about how to add and use WYSIWYG or WP editor with your custom WordPress metabox, then trust me, it’s super easy.

To add wp editor or wysiwyg editor, WordPress provides a function wp_editor() with some parameters and their attributes.

wp_editor($content, $editor_id, $settings);
  • $content – this is a string and required parameter, this parameters holds either the default content to be displayed in the editor or the content to be displayed in the editor. Default value: “” (leave it blank if you don’t want to set default value ).
  • $editor_id – this is a string and required parameter, and this parameter will set the ID for the textarea and TinyMCE.
  • $settings – this accepts an array of different settings for the wp editor, and all of these settings are optional, so if you don’t want anything special, just use an array as the default settings. Some of the most useful and common settings are:
    1. wpautop – this stands for ( wordpress auto paragraph ), this will automatically add paragraph in the editor if set to false. Default : true
    2. media_buttons – this allows you to add or remove the Add Media button with the wp editor. To remove the Add Media button from the editor just set it to false. Default : true
    3. textarea_name – this is the name of textarea in your editor, if you want to assign any specific name to the editor’s textarea then use this otherwise wordpress automatically assign the editor ID as the name of textarea.
    4. textarea_rows – this will set the number of rows to be displayed in the textarea, or in other words this will set the height for the textarea.
    5. tinymce – this will add the TinyMCE or Visual mode in the editor. If you don’t want the visual mode, you can set it to false. default : true
    6. quicktags – this will add Visual and Text tabs with the editor, set it to false to remove those tabs. Default : true
    7. drag_drop_upload – this will enable the drag and drop upload support for the editor. To make it enable, set it to true. Default: false.

You can find more settings about wp editor at codex wordpress

Add WYSIWYG or WP Editor in WordPress Custom Meta box

To add a WP editor with a custom metabox, first will create a custom metabox and then will add a wordpress editor in it.

  1. In the first step, will create a custom metabox for the post, following code snippet will create a custom metabox in our post type. 
    
function diwp_add_wysiwyg_editor_metabox(){

	add_meta_box(
					'diwp-wysiwyg-editor',
					'My Custom Editor',
					'diwp_custom_html_code_editor',
					'post'
			  );

}

add_action('add_meta_boxes', 'diwp_add_wysiwyg_editor_metabox');
  2. In the second step, will add the WordPress editor in our custom metabox, following code will add the wp editor within our custom metabox. 
    	
	// Callback function for our custom metabox

function diwp_custom_html_code_editor(){
	
	// function that will add the wp editor in the metabox.
	wp_editor( $content, 'diwp_custom_editor', array() );

}

    This will add a wp editor with the custom metabox in the post, as you can see in the below image. Now in the next step, You will see how to save and get the content from wp editor.

    custom wysiwyg wp editor

Save WP Editor Content

The following code snippet will save the content of the wp editor.

	function diwp_save_custom_wp_editor_content(){

	global $post;

	if(isset($_POST['_diwp_custom_editor'])){
		update_post_meta($post->ID, '_diwp_custom_editor', $_POST['_diwp_custom_editor']);
	}

}

add_action( 'save_post', 'diwp_save_custom_wp_editor_content' );

Get Content From WP Editor

To get content from WP editor, you can use the get_post_meta() function in the frontend and backend. Use the following code to display content from wp editor.

echo get_post_meta($post->ID, '_diwp_custom_editor', true);

You can also display the content in the editor, by using this code in place of $content in the wp_editor() function. Something like this in the second step..

$diwp_custom_editor = get_post_meta($post->ID, '_diwp_custom_editor', true); 
wp_editor( ‘$diwp_custom_editor’,  'diwp_custom_editor', array() );
Bhuvnesh Shrivastava
Owner of diveinwp.com, solely responsible for creating helpful, informative content about WordPress, a fulltime WordPress developer with 8+ years of hands-on experience in WordPress design and development.

Related Articles