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.

add-wysiwyg-editor

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.

Click Here to Leave a Comment Below

Nishat

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

Reply
Hadi

Thanks, but how to use it in theme?

Reply
    Imtiaz Rayhan

    Hi Hadi,

    To use it in a theme, you have to add the code to your theme’s functions.php file.

    Thank you.

    Hope this helps.

    Reply
    Matthew

    I think Hadi wants to know how to use the content in his theme.

    ID, ‘custom_editor’, true); ?>

    worked for me.

    AWESOME Tutorial Imtiaz!

    Reply
      Imtiaz Rayhan

      Hi Matthew,

      Thanks for your input. Really appreciate. Glad it worked for you.

      Regards.

      Reply
        Matthew

        You cut some of my code from the reply, so it won’t work for Hadi. It may be the wrong way to do it anyway, because mine won’t automatically add the tags. I have to manually put them in the code editor.

        Reply
suvetha

Hi,
Thanks for the tutorial. I am a beginner. I am able to display the editor in post edit page. How to call and display it in the frontend? Please guide me.

Thank You

Reply
Leave a Reply: