Advertisement
Tips

Quick Tip: Using wp_editor

by

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.


Examples

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,|' .
			',spellchecker,wp_fullscreen,wp_adv'
	)
);
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
    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
    How to Implement Post Status Transitions for Custom Web ApplicationsCustom post status 400
    WordPress uses posts and pages to provide the dynamic content for applications. The introduction of Custom Post Types has increased the possibility of developing complex applications with WordPress. Generally, normal posts go through a well-defined workflow, before they get published on the website or on the application. During this workflow, various statuses are assigned to posts and handled internally by WordPress. Post statuses can be used as a powerful technique for managing status in a custom web application. In this article, we are going to discuss how to use WordPress custom post statuses and transitions to build applications which go beyond the conventional websites or blogs. Do you have experience in working with custom post status transitions? All of you are welcome to discuss your experiences.Read More…
  • Code
    Plugins
    Communicating With the WordPress.org 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 WordPress.org 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
    Plugins
    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…
  • Code
    Plugins
    Integrating Multiple Choice Quizzes in WordPress - Creating the BackendIntegrating multiple choice quizzes in wordpress
    Multiple choice questions are something that most of us have faced at least once in our life. We love them because we can provide correct answers by logically thinking about provided possibilities, even if we don't exactly know the correct answer. Also answering takes less time which makes it so popular. Creating a multiple choice quiz in WordPress can be a very exciting and profitable task. You can use it in your personal blog to attract more visitors, or you can create a premium section with advanced quizzes, or you can create quizzes focusing on popular certification exams. There are numerous possibilities for making it profitable.Read More…