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?
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 etcwp_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 thatwp_editor
replaced. When you find code from some website, always read it, and look up the documentation. How else will you catch the call tosendAllMyMoneyTo("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 youthe_editor
was a deprecated function. Look these up as they will save you many headaches going forward