Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
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

This comment has been minimized.

Show comment Hide comment
@Warkman

Warkman May 5, 2013

Thanks, very handy and simple.

Warkman commented May 5, 2013

Thanks, very handy and simple.

@jlambe

This comment has been minimized.

Show comment Hide comment
@jlambe

jlambe 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

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

This comment has been minimized.

Show comment Hide comment
@ryanhellyer

ryanhellyer Sep 2, 2013

Dang that's a convenient bit of code.

Dang that's a convenient bit of code.

@syamvilakudy

This comment has been minimized.

Show comment Hide comment
@syamvilakudy

syamvilakudy May 16, 2014

Awesome..., thank you so much..

Awesome..., thank you so much..

@Qix-

This comment has been minimized.

Show comment Hide comment
@Qix-

Qix- Jul 11, 2014

Holy crap it worked.

Qix- commented Jul 11, 2014

Holy crap it worked.

@aldelpech

This comment has been minimized.

Show comment Hide comment
@aldelpech

aldelpech Aug 6, 2014

Thanks !!!!

Thanks !!!!

@nimmolo

This comment has been minimized.

Show comment Hide comment
@nimmolo

nimmolo 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.

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

This comment has been minimized.

Show comment Hide comment
@hadionesa

hadionesa Jul 29, 2016

How to display metabox content on post?

How to display metabox content on post?

@cuongpx

This comment has been minimized.

Show comment Hide comment
@cuongpx

cuongpx Aug 11, 2016

thank you.!

cuongpx commented Aug 11, 2016

thank you.!

@hadionesa

This comment has been minimized.

Show comment Hide comment
@hadionesa

hadionesa Nov 30, 2016

How to automatically create paragraphs?

How to automatically create paragraphs?

@romeropixel

This comment has been minimized.

Show comment Hide comment
@romeropixel

romeropixel Dec 27, 2016

it works!

it works!

@MatthewKosloski

This comment has been minimized.

Show comment Hide comment
@MatthewKosloski

MatthewKosloski Jun 25, 2017

the_editor is deprecated; use wp_editor instead!

MatthewKosloski commented Jun 25, 2017

the_editor is deprecated; use wp_editor instead!

@onomatopoetry

This comment has been minimized.

Show comment Hide comment
@onomatopoetry

onomatopoetry Jan 21, 2018

Thank you so much! One question/comment: according to the docs (scroll to the bottom under "Notes"), content saved from the editor should use wp_kses_post - making line 74-75:

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

Is that necessary in this case?

Thank you so much! One question/comment: according to the docs (scroll to the bottom under "Notes"), content saved from the editor should use wp_kses_post - making line 74-75:

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

Is that necessary in this case?

@LordZombi

This comment has been minimized.

Show comment Hide comment
@LordZombi

LordZombi Feb 22, 2018

Do you really need part after this:

//Add CSS & jQuery goodness to make this work like the original WYSIWYG

Isn't this enough: ?

$content = get_post_meta( $post->ID, WYSIWYG_META_KEY, true );
wp_editor( $content, $editor_id);

LordZombi commented Feb 22, 2018

Do you really need part after this:

//Add CSS & jQuery goodness to make this work like the original WYSIWYG

Isn't this enough: ?

$content = get_post_meta( $post->ID, WYSIWYG_META_KEY, true );
wp_editor( $content, $editor_id);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment