+

Using the WordPress editor in your own plugins and themes.

November 10, 2012

As a WordPress developer I often want to extend what WordPress can do. The system is great but sometimes you want to add to it’s functionality. One of the great things about WordPress is the core development team has made this easy to do and encourages you to do so.

One thing I often run into is that I would like users of the themes and plugins I develop to be able to have a nice wysiwyg editor for their content in fields I provide to them. Often I add custom meta boxes to post types, or textareas to plugin options pages, where it would be ideal for the user to have the ability to edit text without having knowledge of HTML.

In steps the wonderful function wp_editor(). This allows you to use wordpress’ native wysiwyg editor in your own forms. Other options for this exist, custom fields plugins allow you to add these to the post type meta boxes, but this function can be used almost anywhere. ┬áIf you theme has an options page, or your plugin has a content area that you are storing in your own db table, you can use this function.

This code gives a simple example You can download it to hav a look, but don’t use it on your site. There are other steps you should take, I am not guaranteeing it won’t destroy your site, and this is just for reference anyway.


function add_nates_awesome_admin_page(){
         add_menu_page(
             'Wysiwyg Example',
             'Wysiwyg Example',
             'manage_options',
             'my-awesome-menu-page',
             'nates_awesome_admin_page');
}

function nates_awesome_admin_page(){
?>
<div class='wrap'>
  <h2>My Super Admin Page</h2>
    <form method='post'>
      <?php
          wp_nonce_field('nates_nonce_action', 'nates_nonce_field');

          $content = get_option('special_content');
          wp_editor( $content, 'special_content' );

          submit_button('Save', 'primary');
     ?>
   </form>
  </div><!-- .wrap -->
 <?php
}

function save_nates_awesome_menu_page(){
  // check the nonce, update the option etc...
  if( isset($_POST['nates_nonce_field']) && 
      check_admin_referer('nates_nonce_action', 'nates_nonce_field')){

   if(isset($_POST['special_content'])){
     update_option('special_content', $_POST['special_content']);
   }
  }
}

add_action('admin_menu', 'add_nates_awesome_admin_page');
add_action('admin_init', 'save_nates_awesome_menu_page', 10);
Posted in: Tools, Web Development   |   Tags: , ,

3 responses to “Using the WordPress editor in your own plugins and themes.”

  1. Danny says:

    Hey,

    Thanks for this!

    How would I call the content from this page in the theme?

    Regards,

    D

  2. Nate Reist says:

    You could call it onto the page by echoing get_option(‘special_content’) [ http://codex.wordpress.org/Function_Reference/get_option ]. You may want to also run it through the filter ‘the_content’ or use the function wpautop() [ http://codex.wordpress.org/Function_Reference/wpautop ] – this will format it automatically with paragraph tags.

  3. hosseincode says:

    This is awesome, thanks a lot, Nate!

« Back to Blog