1

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?

6
  • 4
    This code is the not good, a reason why you should not copy/paste from the web, I would just use something else. Also do not cross post on stack please --> stackoverflow.com/questions/22425355/…
    – Wyck
    Mar 15, 2014 at 15:29
  • I agree, this is terrible code. Is your question just about refactoring your code?
    – fuxia
    Mar 15, 2014 at 16:10
  • @wyck Okay, I am a WP beginner. thank you for your hint and the link. but I am not sure which of the plugins listed on the page are suitable for my needs Mar 15, 2014 at 16:47
  • @toscho my goal is simply adding two more editors to my custom post type. do you have an idea what is the easiest solution to do this? Mar 15, 2014 at 16:48
  • Plugin recommendations are off-topic here, the ones in the list I linked for the most part all have WYSIWYG editors you can enable as "meta fields", but they require developer experience to use.
    – Wyck
    Mar 15, 2014 at 17:38

1 Answer 1

3

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:

enter image description here

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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