Is there way to have multiple WYSIWYG editors for a custom post type? For example, if I had a 2 column layout I wanted to have one editor for one column and another editor for the other.

  • What kind of WYSIWYG configuration do you need? The full panel incl. uploading images, fullscreen mode etc?
    – hakre
    Commented Aug 17, 2010 at 13:58
  • Related question: wordpress.stackexchange.com/questions/53/…
    – hakre
    Commented Aug 17, 2010 at 14:06
  • Bueltge has a nice article that shows how that can be done: wpengineer.com/1991/example-how-to-add-meta-boxes-to-edit-area
    – hakre
    Commented Aug 17, 2010 at 14:08
  • I need exactly this question answered for a client project. Thanks for asking! Commented Aug 17, 2010 at 18:25
  • MikeSchinkel - I'm new to WordPress; where do I put the code you posted?
    – user5696
    Commented May 26, 2011 at 1:21

5 Answers 5


Say your custom post type was called Properties, you would add the box to hold your additional tinyMCE editor using code similar to this:

function register_meta_boxen() {
    add_meta_box("wysiwyg-editor-2", "Second Column", "second_column_box",
    "properties", "normal", "high");    
add_action('admin_menu', 'register_meta_boxen');

wysiwyg-editor-2 is the ID that the meta box will have applied to it, Second Column is the title that the meta box will have, second_column_box is the function which will print out the HTML for the meta box, properties is our custom post type, normal is the location of the meta box, and high specifies that it should be shown as high in the page as possible. (Usually below the default tinyMCE editor).

Then, taking this as the most basic example, you must attach the tinyMCE editor to a textarea. We still have to define our second_column_box function which will print the HTML for the meta box so this is as good a place as any to do this:

function second_column_box() {
    echo <<<EOT
    <script type="text/javascript">
jQuery(document).ready(function() {
    if ( typeof( tinyMCE ) == "object" &&
         typeof( tinyMCE.execCommand ) == "function" ) {
        tinyMCE.execCommand("mceAddControl", false, "tinymce");
    <textarea id="tinymce" name="tinymce"></textarea>

There are a couple of issues which I'm not sure of how to overcome. The tinyMCE editor will be nested inside of a metabox, which might not be ideal, and it will not feature the ability to switch between HTML and Visual editing modes, as well as the the media insertion commands which the normal post editor has. Switching the modes appears to be defined as a function who's first argument is the ID, but yet it also appears to coded into the wp-tinymce script. It is possible to use the built in tinyMCE functions to do so, but this changes the textarea between full tinyMCE and a basic textarea, without any of the WP HTML insertion buttons.

  • "Meta_boxen"? Awesome! I thought I was the only one. Gonna give you solution a try in a little while.
    – mfields
    Commented Mar 5, 2011 at 12:44
  • Thomas McDonalds solution is not working for me in 3.1 - is there a way in 3.1 to do this?
    – user4484
    Commented Apr 6, 2011 at 14:52

First: Big Thanks to @Thomas McDonald for his answer; I needed to figure out exactly the same question that @Paul Sheldrake asked and Thomas' code got me started in the right direction.

Unfortunately I then got stuck because I needed to change the layout from the default to a simpler and smaller layout since I needed to use the TinyMCE in a side metabox. I looked practically everywhere for a solution and especially on the MoxieCode TinyMCE Wiki and TinyMCE Tips & How To Forum and found nothing! 1 Everything I found explained how to set theme, width, height, etc. using tinyMCE.init({...}) but apparently you can't use that when you use tinyMCE.execCommand("mceAddControl").

I was about stumped when I ran across the article multiple TinyMCE 3 instances on one page by Hamilton Chua, and he nailed it! His solution was to assign tinyMCE.settings before calling tinyMCE.execCommand("mceAddControl"), for example:

$id = "sidebar-content";
$script = <<<EOT
<script type="text/javascript">
jQuery(document).ready(function($) {
    if ( typeof( tinyMCE ) == "object" &&
         typeof( tinyMCE.execCommand ) == "function" ) {
      tinyMCE.settings = {
        theme : "advanced",
        mode : "none",
        language : "en",
        theme_advanced_layout_manager : "SimpleLayout",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull",
        theme_advanced_buttons2 : "",
        theme_advanced_buttons3 : ""
      tinyMCE.execCommand("mceAddControl", true, "{$id}");
<textarea id="sidebar-content" name="sidebar-content"></textarea>

The sad part is this was really not hard, but it wasn't documented anywhere else I could find. It's amazing to discover almost nobody else has experienced this issue.

So anyway the above code generated the following second TinyMCE in exactly the format/layout that my client needed:

Multiple TinyMCE TextAreas in the WordPress 3.0 Admin Editor
(source: mikeschinkel.com)

So if you are using @Thomas McDonald code above you find you have any need to modify the layout be sure to check out Hamilton Chua's awesome article (thanks Ham!):

P.S. If you do something even slightly wrong the TinyMCE may just not show at all. For example in my case I use theme: "simple" at first and I got nothing and it took me over an hour to realize that I just needed to use theme: "advanced". So if you find TinyMCE is not working for you be sure to try changing things around, you may be having a similar problem. (BTW, I haven't tried any other themes nor explored what else is available; if you find other themes that work do please let a comment below.)


1: Very frustrating! After little more than a month with WordPress Answer I'm now expecting to find answers to all my questions as the same level of quality as here, and elsewhere I'm typically finding disappointment!

  • Mike, you're missing an equals after $script and also there's no closing for your heredoc, ie. EOT;. Apart from the small errors it's a good working example.. ;)
    – t31os
    Commented Nov 13, 2010 at 8:01
  • @t31os - Thanks for letting me know. Not sure how I missed those; I usually test and then copy my answers from my working code. Go figure! Commented Nov 13, 2010 at 10:16
  • using this solution resulted in the normal visual editor being set SimpleLayout as well for me in 3.1.
    – mfields
    Commented Mar 5, 2011 at 14:02
  • @mfields - Bummer that 3.1 has broken so many things. :-( Commented Mar 5, 2011 at 15:06
  • Wanted to draw your attention to this article, as it may clarify some things: dannyvankooten.com/450/…
    – marfarma
    Commented Oct 8, 2011 at 0:05

Since I found this article as the first result in Google, I just wanted to comment that WP now offers a function to handle this sort of task.

Within the add_meta_box function, add the following code -->

wp_editor( $content, $editor_id, $settings = array() );

Wherever you want to add the TinyMCE editor

Reference: wp_editor

  • 1
    Answers should be more than plain links. They should actually be an answer instead of a route where someone will maybe find an answer. Please help preventing link rot, edit your answer and provide the needed information that helps the OP as well as later visitors to solve their problem.
    – kaiser
    Commented Oct 12, 2014 at 20:50

The default editor, tinymce, is loaded by a function in wp-admin/includes/post.php called wp_tiny_mce(); Look in the source at line 1350. There is an array of settings at line 1478. One of the options apparently designates the textarea selector to apply the javascript editor to. I was reading this post by Keighl on his blog that pointed me toward it. Read the article, and maybe there's a way to call wp_tiny_mce() in an admin section plugin and apply it to a second text area you create.


I got it just by adding “theEditor” as class attribute to a textarea:

<div style="background: #FFF; border: 1px solid #CCC;"><textarea id="my_details_field" name="my_details" class="theEditor" rows="20" style="width: 100%;"><?=get_post_meta($post->ID, 'my_details', TRUE)?></textarea></div>

Not the answer you're looking for? Browse other questions tagged or ask your own question.