6

Is there a way to add a TinyMCE editor to the taxonomy description field on the term editing pages? The solution here (Can you add the visual editor to the description field for custom taxonomies?) no longer works, I think because the wp_tiny_mce function has been deprecated.

4 Answers 4

20
+50

You can use a {$taxonomy}_edit_form_fields action hook to add html to the term edit table. In that HTML you can remove description textarea and add tinymce editor

add_action("{$taxonomy}_edit_form_fields", 'add_form_fields_example', 10, 2);

function add_form_fields_example($term, $taxonomy){
    ?>
    <tr valign="top">
        <th scope="row">Description</th>
        <td>
            <?php wp_editor(html_entity_decode($term->description), 'description', array('media_buttons' => false)); ?>
            <script>
                jQuery(window).ready(function(){
                    jQuery('label[for=description]').parent().parent().remove();
                });
            </script>
        </td>
    </tr>
    <?php
} 
6
  • Oleg, I'll try this first thing in the morning.
    – Josh M
    Jun 8, 2015 at 18:57
  • About to test. By the way, you have a typo on line 3, "function." :)
    – Josh M
    Jun 8, 2015 at 20:03
  • I am really sorry about that. Thanks userabuser for fixing my typo. (I was about to go home yesterday due a terrible headache when I deside to post response on 'one more' question here.) Jun 9, 2015 at 7:17
  • I get "Undefined variable: taxonomy". How does this work? I put it in functions.php Aug 14, 2017 at 18:32
  • I've tried the code and it's working, but the thing is I don't know to apply it to my issue: wordpress.stackexchange.com/questions/318814/… Nov 10, 2018 at 5:20
8

For those still looking for a solution to this problem, it's worth mentioning that the Yoast SEO plugin adds a WYSIWYG editor for descriptions automatically on the taxonomy term edit screen.

If you're not planning to use that plugin for SEO please don't add it only for this functionality. Given the plugin's popularity, I figured it was worth noting it here since it could save time for someone who already plans to install the plugin.

4
  • Where is this setting if you don't mind me asking? Is this a premium feature or apart of the free plugin? I don't see this working with free...
    – lcm
    Feb 10, 2021 at 9:35
  • @lcm, it was part of the free plugin and I'm pretty sure it activated automatically. Try it on a fresh WordPress install and if it works, then there's likely something breaking the functionality. It might also be worth checking the console to see if you're getting any JavaScript errors.
    – jg314
    Feb 10, 2021 at 13:04
  • Looks like this is only on the Edit Screen, but not on the Add screen. So first you will need to add it then edit it to see the full editor.
    – ggedde
    May 26, 2021 at 21:48
  • It's also worth noting that you have to enable Show SEO Settings for the Taxonomy within Yoast settings for that taxonomy in order for the wysiwyg to kick in. There are some Taxonomies I'm using for organization purposes but don't want the actual archive page indexed but I still have that setting turned on just to enable the wysiwyg on the description box. Jun 23, 2022 at 15:48
1

Oleg Butuzov's answer was probably valid in 2015, since it was accepted and voted on. In 2024, for those who had the same problem with WordPress 6.4.2, it no longer works.

I propose a different solution:

add_action("{$taxonomy}_edit_form_fields", 'tinymce_on_description', 10, 2);

function tinymce_on_description($term, $taxonomy){
    ?>
    <script>
        jQuery(document).ready(function($) {
            wp.editor.initialize('description', {
                tinymce: {
                    // customizable options for TinyMCE
                    toolbar1: 'formatselect | bold italic | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link',
                            plugins: 'link,lists,textcolor,colorpicker',
                            menubar: false,
                            statusbar: false,
                },
                quicktags: true,
                mediaButtons: false,
            });
        });
    </script>
    <?php
}

add_action('init','disable_kses');

function disable_kses() {
    remove_filter('pre_term_description', 'wp_filter_kses');
}

Within the jQuery function, wp.editor.initialize('description', {...}) is called to initialize the TinyMCE editor on the element with the ID description, which is typically the textarea for the term description. This is the core of the solution.

Disabling the wp_filter_kses function is a crucial step in this solution, as it typically filters out all HTML tags except for a limited set, such as bold and italic text, from the term descriptions for security reasons. By removing this filter, we enable the TinyMCE editor to fully utilize its rich text capabilities, allowing for a wider range of formatting options such as line breaks, multiple paragraphs, colors, and text alignment. Without this adjustment, many of the advanced formatting features provided by the TinyMCE editor would be stripped out upon saving, significantly limiting its utility.

However, it's important to note that disabling wp_filter_kses could potentially introduce security risks if users with the capability to edit term descriptions insert malicious code. It's recommended to consider user roles and capabilities or implement additional sanitization measures to mitigate such risks.

0

Yes, Installing Yoast SEO plugin will resolve the issue. It is working perfectly with All the famous page builders as well.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.