Quick Tip: Using wp_editor


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

What Is wp_editor?

Text editor / notepad icon

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 editor window in WordPress admin interface
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.


Code icon

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,|' .
wp_editor( '', 'content', $settings );

Customizing the Editor

Cog icon

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.

Related Posts
  • Code
    New wp-config Tweaks You Probably Don't Know8 new wp config tweaks you probably didnt know about 400
    The wp-config.php file: One of the most loved WordPress feature for some, one of the worst nightmares for others. There are countless tips and tricks in a plethora of articles, and you can't get enough of them; however, this article is aiming to be different. In this article, we're going to get familiar with eight new wp-config tricks that are less known than functionality such as turning off post revisions, increasing the memory limit, or other similar features.Read More…
  • Code
    Creative Coding
    Using WordPress for Web Application Development: Features: Custom Queries with WP_QueryApplication foundation 400
    We've been looking at how WordPress can be used as a foundation for application development, but one of the things that we've yet to cover that most modern frameworks offer is how to query the database to retrieve results for any given view. Specifically, we haven't talked about how to get information out of the database and insert it into our pages.Read More…
  • Code
    Creative Coding
    Adding Custom UI Themes to Wordpress Admin Using SassPreview image@2x
    With the release of WordPress 3.8 we now have a new feature for Admin UI themes. This means that every user can change the color scheme of his admin regardless of the the theme that’s being used on the front-end. To change the color scheme of your admin, go to Users > Your Profile. Here you’ll see eight predefined themes that you can select from. Select any theme from these themes and you’ll see the changes immediately. When you are done with selecting the theme, hit the “Update Profile” button.Read More…
  • Code
    Creative Coding
    Using WordPress for Web Application Development: Understanding Events, Actions, and FiltersApplication foundation 400
    Throughout this series, we've been taking a look at how WordPress can be used for building web applications. Up to this point, we've established that WordPress is a foundation - rather than a framework - and we've talked a bit about how we need to avoid trying to shoehorn WordPress into another type of design pattern than that of its native type.Read More…
  • Code
    Communicating With the Plugin APIWordpressdotorg plugin api border 400
    Over the last few weeks I have been wondering on how to possibly pull data about my plugins hosted on and display it on my website. The first thing that came to mind was "Web Scrapping" but quite frankly this is a lot of work, feels like going back in time, and is not something a good web citizen should do. In some cases, it could be illegal.Read More…
  • Code
    A Better Forum List Widget for bbPressBbpress
    When bbPress was still a standalone installation, I had tried it out and wasn't really impressed. Things were clunky and it didn't always work the way it was supposed to. After languishing for a few years, Automattic decided to take bbpress and turn it into a plugin, improving the functionality leaps and bounds and making it a strong contender amongst other forum option for WordPress.Read More…