How To Add WYSIWYG Editor to Custom Meta Boxes

With Custom Post types and Custom Meta Boxes, WordPress gives you the power to control or organize your contents more efficiently. Here I have written a quick tutorial on how you can add WYSIWYG editor to custom meta boxes or custom post types.


This is actually an easy task. Few years back, it used to be a bit tough because you would have to print some jQuery to footer which makes it complicated. But now it’s insanely easy, because WordPress provides a function call wp_editor() to add WYSIWYG editor. This is available since WordPress 3.3.

Let’s check how we can use that function to add a custom editor to our meta boxes or custom post types.

How To Add WYSIWYG Editor to Custom Meta Boxes

I will break down the whole thing so it’s easier for you to understand. Basically what we will do is – we will initialize the meta box, show it in our post editor and finally we’ll store the data of that meta box in our database. Let’s check out how you can add WYSIWYG editor to custom meta boxes with this simple functions.

Initializing the Meta Box

First, we used add_meta_box() function to initialize the meta box. This function takes several parameters. You can check them from codex. Here, we used four parameters.

  1. First one is an ID for the meta box. This is used in the ‘id’ attribute for the meta box.
  2. Second is the title of the meta box. Here, I used ‘Custom Editor’ as my tittle. Double underscores are for translation issues.
  3. Then the callback function which fills the meta box with desired content. You can find this function on the next section.
  4. Finally, the Post type where we want to add our meta box. In my case, it’s Portfolio, which is a custom post type. If you don’t want to add to any custom post types simply replace ‘portfolio’ with ‘post’.

Then, we hooked our custom_editor_meta_box() function to ‘admin_init’ hook to initialize the box.

Displaying the Meta Box

This function displays the meta box in post edit screen.

This is the callback function we used when we initialized the meta box. Here, you can see we used the wp_editor() function to render the WYSIWYG editor. This function takes three parameter.

  1.  First one is the initial content for the editor. Default value is none.
  2. Second one is the HTML id attribute value for the editor. Don’t use hyphens, the editor may not display properly.
  3. And the third one is an array of arguments which you use to customize the editor.

Here, I just used one argument to show ‘Add Media’ button in my editor. You can use several arguments to control how the editor works, check the arguments here.

Saving the Meta Box data

We then create a function to do some security check and save the data from meta box. I have commented in PHP to make it clear for you.

  1. First we check if the user has submitted any changes, if not it will not save anything.
  2. Then, it is checked if the input is coming from the proper form.
  3. Finally making sure if the user has permissions to edit that post. If everything checks, data will be saved.

The function update_post_meta() is used to update any existing value of a meta box. When you edit your posts, this is how your data will be updated.

Finally, we use the ‘save_post’ hook to hook our save data function.

Let’s Put It All Together

This is the full code which will add WYSIWYG editor to custom meta box. You can customize it to your requirements. My code outputs this :

add wysiwyg editor in custom meta boxes

Over to You

I hope now you know how easy it is to add WYSIWYG editor to your custom post types or meta boxes. Let me know if you have any questions or suggestions.

Don’t forget to share with others if you find this helpful.

Sharing is Caring
Imtiaz Rayhan

WordPress Enthusiast, Novice PHP Developer. Music Addict, The Beatles Fan. Conncect with me on Facebook, Google+ and Twitter.

Click Here to Leave a Comment Below 1 comments

It’s a nice post. It helps me so much. Thank you.


Leave a Reply: