Create a gist now

Instantly share code, notes, and snippets.

How to add a Wordpress WYSIWYG editor to a meta box.
<?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, __('WYSIWYG Meta Box', 'wysiwyg'), 'wysiwyg_render_meta_box', 'post');
}
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]);
}
@Warkman
Warkman commented May 5, 2013

Thanks, very handy and simple.

@jlambe
jlambe commented May 16, 2013

Hi, the function you use "the_editor" is deprecated since WP version 3.3.
In order to render a WYSIWYG editor, only make a call to the php function "wp_editor()"

You can take a look in the codex here : http://codex.wordpress.org/Function_Reference/wp_editor

@ryanhellyer

Dang that's a convenient bit of code.

@syamvilakudy

Awesome..., thank you so much..

@Qix-
Qix- commented Jul 11, 2014

Holy crap it worked.

@aldelpech

Thanks !!!!

@nimmolo
nimmolo commented Aug 24, 2014

Hi Inspector,
I noticed there's no nonce in your metabox, as is recommended.
Does wp_editor automatically check the post nonce when saving? I can't see that it's adding its own either.

@hadionesa

How to display metabox content on post?

@cuongpx
cuongpx commented Aug 11, 2016

thank you.!

@hadionesa

How to automatically create paragraphs?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment