Add TinyMce Editor To Category Description

edit category 590x374

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.

edit category 590x374

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"></label></th>
                <td>
                <?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);
                ?>
                <br />
                <span class="description"></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_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"></label></th>
                <td>
                <?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);
                ?>
                <br />
                <span class="description"></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>
    <?php
    }
}

Remove HTML Filtering On Save

By default WordPress will make sure this content is ran through the wp_filter_kses and wp_kses_datafilters 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

// 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"></label></th>
                <td>
                <?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);
                ?>
                <br />
                <span class="description"></span>
                </td>
            </tr>
        </table>
    <?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>
    <?php
    }
}

0938.54.84.99