I am trying to use the http://www.tinymce.com/ plugin to add a tinymce to my textareas in my meta boxes I have created. I've googled other ways and either I cant get it to work or didnt grasp the concept. SO this is what Im trying now --

I tried creating plugin to add the script to my admin dashboard --

add_action('admin_init', 'admin_load_scripts'); 
function admin_load_scripts() { 
    $js_file = plugins_url( '/tinymce/jquery.tinymce.min.js', __FILE__ );  
    wp_enqueue_script('jquery.tinymce.min', $js_file, array('jquery')); 

Then I need to call it like so --


But im not sure how to do this, being that this is for the backend and not the front end. How can I achieve this?


This is my code for the meta boxes. http://pastebin.com/WcC51uA9

I tried the following methods (placing it in functions.php of course), and for the most part they either just didnt work or would show up on the top of the page or on the bottom of the page. They didnt show up on the textarea at all. ---






3 Answers 3


Here's a pastebin with your code included.

Get the old value of the tinyMCE

$meta_biography = get_post_meta( $post->ID, 'meta_biography', true );

Call the TinyMCE Editor

wp_editor( $meta_biography, 'biography', array(
    'wpautop'       => true,
    'media_buttons' => false,
    'textarea_name' => 'meta_biography',
    'textarea_rows' => 10,
    'teeny'         => true
) );

Save The Editor Value or if nothing is there - delete old values.

if( isset( $_POST['meta_biography'] ) && $_POST['meta_biography'] != '' ) {
    update_post_meta( $post_id, 'meta_biography', $_POST['meta_biography'] );
} else {
    delete_post_meta( $post_id, 'meta_biography' );

If you want to add more options to the editor - You can view the Codex or Check out this nice WPTuts Article. You want to use the tinymce and pass it an array of settings. You might have to remove the teeny => true in the wp_editor() since the Codex says that it will only use minimal editor configuration.

  • thanks. One last question I had was, I saw the wptuts article and the settings array, but I didnt see no mention about passing in a settings array for the "kitchen sink". Any ideas on that? I wanted to make an editor for another field that only allows changing the font color.
    – 730wavy
    Oct 10, 2013 at 16:14
  • @mygm26 - in the WPTuts Article, it is passing theme_advanced_buttons1 - if you want a second row you can also pass theme_advanced_buttons2 or howevery many rows you want. In the WPTuts article it also has wp_adv at the end of theme_advanced_buttons1 which you need in order to show your 2nd or 3rd row of buttons. If you're only trying to change the color - might I suggest looking into the Color Picker that's also built into Wordpress.
    – Howdy_McGee
    Oct 10, 2013 at 16:49
  • Ok I got it, thanks. Is there anyway to hide the kitchen sink on specific instances? I am using the wp editor code for multiple textareas but wanted to hide the kitchen sink on one of them @Howdy_McGee
    – 730wavy
    Oct 12, 2013 at 0:57
  • @mygm26 That I'm not 100% sure of and was trying to find the answer - you can refer to this question but if you ever figure it out, lemme know how: wordpress.stackexchange.com/questions/117395/…
    – Howdy_McGee
    Oct 14, 2013 at 2:42
// for pages use 'edit_page_form' as the first parameter. And see my comment below.
add_action( 'edit_form_advanced', 'my_meta_editor' ); 

function my_meta_editor() {

    // set 'your_meta_key' to the actual key
    $content = get_post_meta($post->ID, 'your_meta_key', true);

    // only low case [a-z], no hyphens and underscores
    $editor = 'mymetaeditor';

    // See my comment below
    $editor_settings = array();

    wp_editor( $content, $editor, $editor_settings);


Search Administrative Actions for edit_form_after_title, edit_form_after_editor, edit_form_advanced if you want to change the location of the meta box.

Also see wp_editor for editor settings.

  • thanks for the answer, Im not sure how to apply this to my situation. Im going to update my answer with the code I am using to create my metaboxes.
    – 730wavy
    Oct 2, 2013 at 17:07
  • Where ever you want the tinymce you can just say something like: pastebin.com/6N5adFip -- In my experience, this is best put in a large content area, such as below your main Post Editor or what have you.
    – Howdy_McGee
    Oct 2, 2013 at 18:56
  • @Howdy_McGee ok so if i put the code from the pastebin into my theme functions file, and replace the id, then it will render the editor for that textarea?
    – 730wavy
    Oct 2, 2013 at 19:49
  • Theoretically yes, all @MaxYudin have given you is ways to show wp_editor(); you should be able to get it working from there. it's pretty straight forward. Otherwise a quick search should yield many results. Let me know if you are able to get it working!
    – Howdy_McGee
    Oct 2, 2013 at 20:24
  • 1
    Paste it to the functions.php located in theme directory you use.
    – Max Yudin
    Oct 7, 2013 at 11:54

This function worked perfectly for me just add to your functions.php file and make your custom fields textareas and you are done:

//add tinymce editor to custom fields
function admin_add_wysiwyg_custom_field_textarea()
{ ?>
<script type="text/javascript">/* <![CDATA[ */
        var i=1;
          var id = $(this).attr('id');
          if (!id)
           id = 'customEditor-' + i++;
          tinyMCE.execCommand("mceAddEditor", false, id);
          tinyMCE.execCommand('mceAddControl', false, id);
/* ]]> */</script>
<?php }
add_action( 'admin_print_footer_scripts', 'admin_add_wysiwyg_custom_field_textarea', 99 );

Taken from here.

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.