Quick Tip: Using wp_editor

In this tip we will find out what wp_editor is good for!

What Is wp_editor?

It is a WordPress function that creates a visual (WYSIWYG) editor like the one featured in the WordPress admin when creating posts or pages. This handy little function has been available since WordPress v3.3.
There is a detailed Codex page about wp_editor, if you need more information. WordPress uses a custom version of TinyMCE editor, which can be found here. To check out the files please see wp-includes/js/tinymce in your WordPress install’s directory.

The usual editor in the admin

Why We Need This?

Because we can use this feature in themes and plugins as well! Rich content comes in handy on several occasions, not just in posts. We can use multiple editors on a single subpage, just use the content and ID variables appropriately.

Examples

This part assumes you know at least some basic PHP programming. The $content and $editor_id variables are mandatory, they must be set at all times. The $settings variable is an array in which the single editor features can be switched on / off.

Please note that most of the explainations are in the comments, read them as well!

The following codes (1, 2, 3 and 4) show how to use the function.

/**
 * Mandatory variables
 */
wp_editor( $content, $editor_id );

/**
 * Basic syntax
 */
wp_editor( $content, $editor_id, $settings = array() );

/**
 * 1.
 * The first variable will set the content to show in the box,
 * the second one holds the HTML id attribute of the editor
 * (must be lowercase letters and no underscores or hyphens).
 */
wp_editor( 'Hello World! This is our first test! Enjoy!', 'ourmaineditor' );

/**
 * 2.
 * This code renders an editor box and a submit button.
 * The box will have 15 rows, the quicktags won't load
 * and the PressThis configuration is used.
 */
$args = array(
	'textarea_rows' => 15,
	'teeny' => true,
	'quicktags' => false
);

wp_editor( 'This is the default text!', 'editor', $args );
submit_button( 'Save content' );

/**
 * 3.
 * We can recreate the post editor with the get_post function,
 * which retrieves an existing post (in this case number 117)
 * from the database.
 */
$post = get_post( 117, 'OBJECT' );
wp_editor( $post, 'editor' );

/**
 * 4.
 * Custom buttons for the editor.
 * This is a list separated with a comma after each feature
 * eg. link, unlink, bold, ...
 */
$settings = array(
	'textarea_name' => 'content',
	'media_buttons' => false,
	'tinymce' => array(
		'theme_advanced_buttons1' => 'formatselect,|,bold,italic,underline,|,' .
			'bullist,blockquote,|,justifyleft,justifycenter' .
			',justifyright,justifyfull,|,link,unlink,|' .
			',spellchecker,wp_fullscreen,wp_adv'
	)
);
wp_editor( '', 'content', $settings );

Customizing the Editor

We can customize the editor features with the help of this description in the Codex. For digging deeper you can also check out class-wp-editor.php under wp-includes in your WordPress install.