Adding multiple WYSIWYG editors to custom post type

Question

I created a custom post type and found a great code that allows me to add an WYSIWYG editor. I have no problems at all at making this editor show up in my post type backend. But I have no idea how to add another editor and to display the content of the second one in the same single.php file in which I would display the content of the first one. Let me write down the codes first:

Here comes the implementation code for adding a WYSIWYG editor (functions.php):

define('WYSIWYG_META_BOX_ID', 'my-editor');
define('WYSIWYG_EDITOR_ID', 'myeditor'); //Important for CSS that this is different
define('WYSIWYG_META_KEY', 'extra-content');

add_action('admin_init', 'wysiwyg_register_meta_box');
function wysiwyg_register_meta_box(){
add_meta_box(WYSIWYG_META_BOX_ID, __('Display title', 'wysiwyg'), 'wysiwyg_render_meta_box', 'artists');
}

function wysiwyg_render_meta_box(){

global $post;

$meta_box_id = WYSIWYG_META_BOX_ID;
$editor_id = WYSIWYG_EDITOR_ID;

//Add CSS & jQuery goodness to make this work like the original WYSIWYG
echo "
        <style type='text/css'>
                #$meta_box_id #edButtonHTML, #$meta_box_id #edButtonPreview {background-color: #F1F1F1; border-color: #DFDFDF #DFDFDF #CCC; color: #999;}
                #$editor_id{width:100%;}
                #$meta_box_id #editorcontainer{background:#fff !important;}
                #$meta_box_id #$editor_id_fullscreen{display:none;}
        </style>

        <script type='text/javascript'>
                jQuery(function($){
                        $('#$meta_box_id #editor-toolbar > a').click(function(){
                                $('#$meta_box_id #editor-toolbar > a').removeClass('active');
                                $(this).addClass('active');
                        });

                        if($('#$meta_box_id #edButtonPreview').hasClass('active')){
                                $('#$meta_box_id #ed_toolbar').hide();
                        }

                        $('#$meta_box_id #edButtonPreview').click(function(){
                                $('#$meta_box_id #ed_toolbar').hide();
                        });

                        $('#$meta_box_id #edButtonHTML').click(function(){
                                $('#$meta_box_id #ed_toolbar').show();
                        });

        //Tell the uploader to insert content into the correct WYSIWYG editor
        $('#media-buttons a').bind('click', function(){
            var customEditor = $(this).parents('#$meta_box_id');
            if(customEditor.length > 0){
                edCanvas = document.getElementById('$editor_id');
            }
            else{
                edCanvas = document.getElementById('content');
            }
        });
                });
        </script>
";

//Create The Editor
$content = get_post_meta($post->ID, WYSIWYG_META_KEY, true);
the_editor($content, $editor_id);

//Clear The Room!
echo "<div style='clear:both; display:block;'></div>";
}

add_action('save_post', 'wysiwyg_save_meta');
function wysiwyg_save_meta(){

$editor_id = WYSIWYG_EDITOR_ID;
$meta_key = WYSIWYG_META_KEY;

if(isset($_REQUEST[$editor_id]))
        update_post_meta($_REQUEST['post_ID'], WYSIWYG_META_KEY, $_REQUEST[$editor_id]);

}

Here comes the display code for displaying the content (single-cpt.php):

<?php $content = get_post_meta($post->ID, WYSIWYG_META_KEY, true); ?>
<p><?php echo $content; ?></p>

My problem: In the display-code we have "WSIWYG_META_KEY" which is a constant. So this means I cannot use this code a second time in the same single.php file in order to display another content of another second editor I would implement in the functions.php. Does anyone of you see a solution which allows me two add two of these editors and to separately display the content of both in my single.php file?

Answer 1

How to display a metabox and how to save/put values in in for text areas is beyond the scope of this question, but you asked how to have a rich text editable area, like the main content.

To do this, use the wp_editor function. WordPress will take your identifier, content and some options, and create a new TinyMCE instance with buttons etc

$settings = array( 'media_buttons' => false );
$content = get_post_meta( $post_id, 'kents-secondary-content-thing', true );
wp_editor( $content, 'kents-second-editor', $settings );

wp_editor will spit out the necessary html and css/js to display what you want.

Note that this will only work reliably in the admin area, frontend use of wp_editor will require some extra steps ( a good idea for a new question! ).

Also note that wp_editor will display a content editor area, but it wont save/validate that content, you still have to do that.

A sidenote:

Your code uses the_editor, a function that wp_editor replaced. When you find code from some website, always read it, and look up the documentation. How else will you catch the call to sendAllMyMoneyTo("0723-323...etc");

If you had done this, you would have seen this and saved yourself a lot of time:

Enabling WP_DEBUG and looking at your php log would also have told you the_editor was a deprecated function. Look these up as they will save you many headaches going forward