Bài viết này thực hiện (hoặc lụm bài về đăng câu like từ các trang khác) bởi Việt Lâm Coder một YOUTUBER có tâm và đẹp trai siêu cấp vô địch zũ trụ. Các bạn đi ngang nếu được cho Lâm 1 like và 1 đăng ký kênh Youtube nhé !!
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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.
|
1 2 3 4 |
// 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
|
1 2 3 4 |
// remove the html filtering remove_filter( 'pre_term_description', 'wp_filter_kses' ); remove_filter( 'term_description', 'wp_kses_data' ); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
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 } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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 } } |
Bài viết này thực hiện (hoặc lụm bài về đăng câu like từ các trang khác) bởi Việt Lâm Coder một YOUTUBER có tâm và đẹp trai siêu cấp vô địch zũ trụ. Các bạn đi ngang nếu được cho Lâm 1 like và 1 đăng ký kênh Youtube nhé !!
