11 mins read

How to Add a WYSIWYG Editor to a WordPress Meta Box: Is It Free and Does WordPress Already Have One?

Mike0

Table of Contents

Introduction

If you work with custom fields in WordPress, you may want more than a plain text box. Sometimes you need bold text, links, lists, or simple formatting inside a meta box. That is where a WYSIWYG editor becomes useful. The good news is that WordPress already includes a built-in visual editing system, and the default editing experience in modern WordPress is the Block Editor. The important catch is that adding the classic wp_editor() rich text editor directly inside a meta box is still possible, but WordPress developer guidance treats it as a legacy approach and recommends newer block-based methods for many modern projects.

What Is a WYSIWYG Editor in WordPress?

WYSIWYG means “What You See Is What You Get.” In simple words, it is a visual editor that lets you format content without writing raw HTML. You can click buttons for bold text, italic text, lists, links, and headings, and the content appears close to how it will look on the front end.

In WordPress, users often think of the old classic visual editor when they hear “WYSIWYG editor.” Today, WordPress mainly uses the Block Editor, which is also a visual editing system, but it works with blocks instead of one large text area. WordPress describes the Block Editor as the default way to create and format content visually.

Does WordPress Have a WYSIWYG Editor?

Yes, WordPress already has a built-in visual editor. On modern WordPress sites, that editor is the Block Editor. It opens by default when you add or edit posts and pages, and it gives you a visual way to insert, move, and style content.

WordPress also still includes the wp_editor() function, which renders the classic rich text editor tools such as TinyMCE and Quicktags. That means WordPress has both a modern visual editing experience for core content and legacy editor tools developers can still call in custom admin areas.

So the short answer is:

  • Yes, WordPress has a WYSIWYG editor
  • Yes, it is free in WordPress core
  • Yes, you can add one to a meta box
  • But for new projects, WordPress often points developers toward blocks or post-meta-based block solutions instead of older PHP meta box patterns.

Is a WYSIWYG Editor Free?

Yes. If you are using WordPress, the built-in editing experience is already included. You do not need to pay extra just to get basic visual editing. The Block Editor is part of WordPress itself, and wp_editor() is also part of WordPress core.

Extra cost only appears when you choose premium plugins, page builders, advanced custom field systems, or custom development. So if your question is, “Do I need a paid tool just to use a WYSIWYG editor in WordPress?” the answer is no.

What Is a Meta Box in WordPress?

A meta box is an extra panel shown on the post editing screen. Developers use meta boxes to collect additional data such as:

  • Extra descriptions
  • Author notes
  • Subtitle content
  • Product details
  • Sidebar text
  • FAQ content

WordPress developer documentation describes custom meta boxes as flexible edit screen elements used to collect information related to the post being edited.

Why Add a WYSIWYG Editor to a Meta Box?

A plain text field is enough for short values like a subtitle or a code. But some custom fields need formatting. For example:

  • A custom intro section
  • A short promo message
  • An author bio
  • A sidebar content block
  • A custom footer note on selected posts

In these cases, a WYSIWYG editor makes the field easier for non-technical users. They can style content without touching HTML.

Can You Add a WYSIWYG Editor to a WordPress Meta Box?

Yes, you can. The traditional way is to use the wp_editor() function inside your meta box callback. That will render a rich text editor in the meta box.

However, WordPress also gives an important warning: once TinyMCE is initialized, it cannot be safely moved in the DOM, so running wp_editor() inside a meta box is “not a good idea” unless only Quicktags is used. WordPress also encourages developers to port older meta box solutions to newer block-based methods for a more consistent editor experience.

That means this approach is still useful for legacy projects and specific admin workflows, but it is not the strongest long-term choice for every new build.

The Legacy Method: Add a WYSIWYG Editor to a Meta Box

Below is a basic example of how developers usually add a rich text editor to a custom meta box.

1. Register the Meta Box

add_action( ‘add_meta_boxes’, ‘my_register_custom_editor_metabox’ );

 

function my_register_custom_editor_metabox() {

add_meta_box(

‘my_custom_editor_box’,

‘Custom Editor Content’,

‘my_render_custom_editor_metabox’,

‘post’,

‘normal’,

‘high’

);

}

2. Display the WYSIWYG Editor

function my_render_custom_editor_metabox( $post ) {

wp_nonce_field( ‘my_custom_editor_nonce_action’, ‘my_custom_editor_nonce’ );

$saved_content = get_post_meta( $post->ID, ‘_my_custom_editor_content’, true );

wp_editor(

$saved_content,

‘my_custom_editor’,

array(

‘textarea_name’ => ‘my_custom_editor’,

‘media_buttons’ => false,

‘textarea_rows’ => 8,

‘teeny’     => false,

‘quicktags’       => true,

)

);

}

The wp_editor() function is the proper WordPress function for outputting the editor and its required components. WordPress notes that the $editor_id should not contain square brackets, and settings such as textarea_name, media_buttons, and other editor options can be passed in the settings array.

3. Save the Meta Box Content

add_action( ‘save_post’, ‘my_save_custom_editor_metabox’ );

function my_save_custom_editor_metabox( $post_id ) {

if ( ! isset( $_POST[‘my_custom_editor_nonce’] ) ) {

return;

}

if ( ! wp_verify_nonce( $_POST[‘my_custom_editor_nonce’], ‘my_custom_editor_nonce_action’ ) ) {

return;

}

if ( defined( ‘DOING_AUTOSAVE’ ) && DOING_AUTOSAVE ) {

return;

}

if ( ! current_user_can( ‘edit_post’, $post_id ) ) {

Ad Banner

return;

}

if ( isset( $_POST[‘my_custom_editor’] ) ) {

update_post_meta(

$post_id,

‘_my_custom_editor_content’,

wp_kses_post( $_POST[‘my_custom_editor’] )

);

}

}

4. Show the Saved Content on the Front End

$content = get_post_meta( get_the_ID(), ‘_my_custom_editor_content’, true );

if ( ! empty( $content ) ) {

echo wpautop( wp_kses_post( $content ) );

}

This is the common pattern: register the box, render the editor, save the value, then display it in your template.

Important Limitation You Should Know

Even though the code above works in many setups, WordPress clearly warns that TinyMCE inside meta boxes is not ideal because the editor cannot be safely moved after initialization. That matters because the Block Editor is a JavaScript application and older PHP meta boxes are handled in a compatibility layer. WordPress says most PHP meta boxes still work, but some advanced ones may break, especially when they depend on old editor selectors, TinyMCE APIs, or DOM behavior from the classic editor.

So if you are building something new, do not assume the legacy meta box method is your best path.

The Better Modern Option

For modern WordPress development, the preferred direction is often:

  • Register post meta with register_post_meta()
  • Expose it with show_in_rest => true
  • Create a custom block or editor UI that reads and saves that meta value

WordPress’s Block Editor handbook specifically recommends porting older custom meta boxes to newer methods and provides a guide for creating a custom block that stores post meta. It also notes that the block editor uses the REST API to load and save meta data, which is why show_in_rest matters.

A simplified registration example looks like this:

add_action( ‘init’, ‘my_register_post_meta_field’ );

function my_register_post_meta_field() {

register_post_meta(

‘post’,

‘my_custom_meta_field’,

array(

‘show_in_rest’ => true,

‘single’ true,

‘type’ ‘string’,

)

);

}

From there, a custom block or sidebar control can edit that value in a way that fits modern WordPress much better.

When Should You Still Use a WYSIWYG Meta Box?

Using wp_editor() in a meta box can still make sense when:

  • You are maintaining an older custom plugin or theme
  • The project already depends on classic meta boxes
  • The site editing workflow is stable and tested
  • The field is simple and used only by admins
  • You understand the compatibility risks

It is often acceptable for controlled internal projects. It is just not the most future-friendly option for new block-first builds.

When Should You Avoid It?

Avoid this method when:

  • You are starting a fresh plugin or product
  • The site is heavily block-editor based
  • You need strong long-term compatibility
  • You want a cleaner modern editing experience
  • Your field structure fits blocks or sidebar panels better

In these situations, a block or sidebar-based post meta solution is usually the better choice. WordPress explicitly encourages this direction.

Common Problems

Editor does not load

This is often caused by loading the editor on the wrong screen, missing hooks, or JavaScript conflicts.

Content does not save

Usually the issue is a missing nonce, autosave interference, permission checks, or a wrong field name.

Editor works in Classic Editor but feels unstable in Block Editor

That fits WordPress’s own warning. Legacy meta boxes can work, but complex ones may not behave well in the block editor compatibility layer.

Final Answer

Yes, WordPress has a built-in WYSIWYG editing experience, and yes, it is free. You can add a WYSIWYG editor to a WordPress meta box by using wp_editor(), saving the value with save_post, and outputting the stored content where needed. But for up-to-date WordPress development, this is now more of a legacy method than a best practice. WordPress increasingly favors blocks and post-meta-based block solutions for new work because they fit the modern editor better and avoid the known TinyMCE meta box limitations.

FAQs

Does WordPress come with a WYSIWYG editor?

Yes. Modern WordPress includes the Block Editor as the default visual editor, and WordPress core also includes the wp_editor() function for rich text editing in custom development.

Is the WordPress WYSIWYG editor free?

Yes. The built-in editor is included in WordPress core.

What function is used to add a WYSIWYG editor in WordPress code?

The classic function is wp_editor().

Is wp_editor() inside a meta box recommended?

It is possible, but WordPress warns that TinyMCE inside a meta box is not a great idea because of DOM movement limitations.

What is the modern alternative?

A custom block or sidebar interface that reads and writes post meta through the block editor and REST API is the more modern approach.

Mike Simpson is a seasoned WordPress and WooCommerce specialist with over 10 years of hands-on experience in building, optimizing, and troubleshooting eCommerce websites. As the lead technical writer at WooHelpDesk, Mike has helped thousands of store owners resolve complex WordPress issues, improve site performance, and implement best practices for online selling. His expertise spans WooCommerce store setup, plugin configuration, theme customization, payment gateway integration, and WordPress security hardening. Mike holds certifications in web development and has contributed to the WordPress community through detailed tutorials, step-by-step guides, and actionable how-to articles. When not writing, he provides direct support to WooHelpDesk clients across the US and Canada. Follow WooHelpDesk on Facebook, X, and Pinterest.
Website https://www.woohelpdesk.com/blog

Related Posts