WordPress

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.

edit-category

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>
                <?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"><?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>
    <?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>
                <?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"><?php _e('The description is not prominent by default; however, some themes may show it.'); ?></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
    }
}
?>
Back to top

Comments

  1. Rosca Bogdan says:

    Hy, thanks for sharing this plugin.
    I have a question, is there a way to make it work for woocommerce product categories ?

    Thank you!

  2. Rosca Bogdan says:

    I`ve managed to solve my problem ( woocommerce product category wysiwyg ).
    I`ve modified the filter to 'product_cat_edit_form_fields' in order to work with product category description.
    Another problem was that my text from the default category description was inserted as html code in visual text editor so i modified the wp_editor call and added html_entity_decode :
    wp_editor(html_entity_decode( wp_kses_post($tag->description , ENT_QUOTES, 'UTF-8') ), 'cat_description', $settings);

    The last modification was the id of the current screen : edit-product_cat

    Now it`s working ok.

    P.S. : i think the html_entity_decode should be modified in your code too in order to render the html in visual tab.

    Thx again for your help!

  3. Hi,

    The solution of Rosca is working perfectly on the last version of Woocommerce right now (2.5.5).

    I've managed to add a wysiwyg editor on the product categories and to remove the default textarea.

    Here is my full code:

    add_filter('product_cat_edit_form_fields', 'cat_description');
    function cat_description($tag)
    {
    ?>

    true, 'media_buttons' => true, 'quicktags' => true, 'textarea_rows' => '15', 'textarea_name' => 'description' );
    wp_editor(html_entity_decode( wp_kses_post($tag->description , ENT_QUOTES, 'UTF-8') ), 'cat_description', $settings);
    ?>

    id == 'edit-product_cat' )
    {
    ?>

    jQuery(function($) {
    $('textarea#description').closest('tr.form-field').remove();
    });

    <?php
    }
    }