Add TinyMce Editor To Category Description

In WordPress by default there are two ways to organise and group your posts, you can either group them by tags or by categories. On both of these taxonomies you can customise the name, slug and description. This makes it really easy to create a category page with a short description of what this category will display and then list all the posts assigned to this category. The problem with the default WordPress description field is that you don't get the TinyMCE WYSIWYG editor, so you can't put any additional styling or images with the category styling. In this tutorial we are going to go through the process of how you can change the description box to have a TinyMCE editor.

We are going to go through the steps of adding a new TinyMCE editor, remove the old description box from the table, remove the HTML filtering WordPress has turned on for this field.

#Add TinyMce Description Box

To start off we need to add our new TinyMCE box to the page by using the wp_editor() function, this function allows us to set a default value, a name and multiple settings to create the TinyMCE box. Add a function to the * edit_category_form_fields* filter this will run after the edit category form, all we are doing in this form is output a new table with the editor inside a row.

add_filter('edit_category_form_fields', 'cat_description');
function cat_description($tag)
{
    ?>
        <table class="form-table">
            <tr class="form-field">
                <th scope="row" valign="top"><label for="description"><?php _ex('Description', 'Taxonomy Description'); ?></label></th>
                <td>
                &lt;?php
                    $settings = array('wpautop' => true, 'media_buttons' => true, 'quicktags' => true, 'textarea_rows' => '15', 'textarea_name' => 'description' );
                    wp_editor(wp_kses_post($tag->description , ENT_QUOTES, 'UTF-8'), 'cat_description', $settings);
                ?&gt;
                <br />
                <span class="description"><?php _e('The description is not prominent by default; however, some themes may show it.'); ?></span>
                </td>
            </tr>
        </table>
    <?php
}

#Remove Default Description Box

As we can't remove the description on the server side through a filter we need to remove the description box using jQuery and the remove() method. Use the admin_head action to add this Javascript to the HTML head tag to delete the description box if the page is the edit category page.

add_action('admin_head', 'remove_default_category_description');
function remove_default_category_description()
{
    global $current_screen;
    if ( $current_screen->id == 'edit-category' )
    {
    ?>
        <script type="text/javascript">
        jQuery(function($) {
            $('textarea#description').closest('tr.form-field').remove();
        });
        </script>
    &lt;?php
    }
}

#Remove HTML Filtering On Save

By default WordPress will make sure this content is ran through the wp_filter_kses and wp_kses_data filters to make sure we have valid HTML included. Because the TinyMce editors allow freeform HTML we should remove these filters from the term description element.

// remove the html filtering
remove_filter( 'pre_term_description', 'wp_filter_kses' );
remove_filter( 'term_description', 'wp_kses_data' );

#Full Plugin Code

The above code is all you need to add the TinyMCE editor to the category description area, below is the full plugin code if you want to add this into your application. /* Plugin Name: Tinymce Category Description Description: Adds a tinymce editor to the category description box Author: Paulund Author URI: http://www.paulund.co.uk Version: 1.0 License: GPL2 */ /* Copyright (C) Year Author Email This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License, version 2, as published by the Free Software Foundation. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this program; if not, write to the Free Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA */

// remove the html filtering
remove_filter( 'pre_term_description', 'wp_filter_kses' );
remove_filter( 'term_description', 'wp_kses_data' );

add_filter('edit_category_form_fields', 'cat_description');
function cat_description($tag)
{
    ?>
        <table class="form-table">
            <tr class="form-field">
                <th scope="row" valign="top"><label for="description"><?php _ex('Description', 'Taxonomy Description'); ?></label></th>
                <td>
                &lt;?php
                    $settings = array('wpautop' => true, 'media_buttons' => true, 'quicktags' => true, 'textarea_rows' => '15', 'textarea_name' => 'description' );
                    wp_editor(wp_kses_post($tag->description , ENT_QUOTES, 'UTF-8'), 'cat_description', $settings);
                ?&gt;
                <br />
                <span class="description"><?php _e('The description is not prominent by default; however, some themes may show it.'); ?></span>
                </td>
            </tr>
        </table>
    &lt;?php
}

add_action('admin_head', 'remove_default_category_description');
function remove_default_category_description()
{
    global $current_screen;
    if ( $current_screen->id == 'edit-category' )
    {
    ?>
        <script type="text/javascript">
        jQuery(function($) {
            $('textarea#description').closest('tr.form-field').remove();
        });
        </script>
    &lt;?php
    }
}

?>