Do you wish to tailor the icons displayed in the Rich Text field for your visitors? By default, the Rich Text field comes with two distinct toolbars visible to users. However, you have the flexibility to personalize these toolbars by incorporating a code snippet into your website, modifying one or both to suit your preferences.
The default fields for the top toolbar are:
- Text Format to mark text as headings or paragraph text
- Bold
- Italic
- Bulleted List
- Numbered List
- Blockquote
- Align Left
- Align Center
- Align Right
- Insert/Edit Link
- Insert Read More Tag
- Toggle Toolbar (this turns the bottom toolbar on and off)
The default fields for the bottom toolbar are:
- Strikethrough
- Horizontal Line
- Text Color
- Paste as Text
- Clear Formatting
- Special Character
- Decrease Indent
- Increase Indent
- Undo
- Redo
- Keyboard Shortcuts List (a modal window will appear with these shortcuts)
In this tutorial, we’ll show you how to use PHP to customize the icons that will display to your visitors.
Creating the form
To begin, we’ll create a guest post submission form and add a Rich Text field to the form for the content of the post. If you need assistance creating your form, please review this documentation.
Customizing the icons
Now it’s time to add the snippet to your site. For this tutorial, we’re going to add some new icons but also shuffle some of the other icons around between the top and bottom toolbars.
For assistance in how and where to add snippets to your site, please check out this tutorial.
For any changes to either toolbar, you’ll need to remember to include the default ones you want to show as well. Customizations are taken literally so if you only include three icons on the top toolbar, only those three would show.
/**
* Customize Rich Text Field TinyMCE buttons for top toolbar.
*
* @link https://wpforms.com/developers/how-to-customize-the-rich-text-field-tinymce-icons/
*/
// Function to change the top toolbar
function wpf_dev_customize_tinymce_buttons_toolbar1( $toolbar, $field_id, $field_data ) {
$toolbar = [
'fontselect',
'fontsizeselect',
'forecolor',
'indent',
'outdent',
'italic',
'styleselect',
'strikethrough',
'subscript',
'superscript',
'underline',
'charmap',
'hr',
'link',
'wp_more',
'wp_adv',
];
return $toolbar;
}
add_filter( 'wpforms_richtext_get_toolbar1', 'wpf_dev_customize_tinymce_buttons_toolbar1', 10, 3 );
/**
* Customize Rich Text Field TinyMCE buttons for bottom toolbar.
*
* @link https://wpforms.com/developers/how-to-customize-the-rich-text-field-tinymce-icons/
*/
// Function to change the top toolbar
function wpf_dev_customize_tinymce_buttons_toolbar2( $toolbar, $field_id, $field_data ) {
$toolbar = [
'wp_help',
'aligncenter',
'alignjustify',
'alignleft',
'alignnone',
'alignright',
'blockquote',
'backcolor',
'bold',
'copy',
'cut',
'paste',
'bullist',
'numlist',
'undo',
'redo',
'remove',
'removeformat',
'selectall',
];
return $toolbar;
}
add_filter( 'wpforms_richtext_get_toolbar2', 'wpf_dev_customize_tinymce_buttons_toolbar2', 10, 3 );
Now when your form displays, you’ll see the top and bottom toolbars have changed from the default icons to the icons you add through this custom snippet.
Removing the icons
If you would like to remove the icons altogether, you could use custom CSS to achieve. If you’re not sure where or how to add custom CSS, please review this tutorial.
For all forms
To remove the icons and the Visual and Text tabs for all forms, use this CSS.
.wpforms-field .wp-editor-tabs, .wpforms-field .quicktags-toolbar {
display: none !important;
}
For specific forms
To remove these icons and the Visual and Text tabs for a specific form, please use this CSS.
div#qt_wpforms-1481-field_3_toolbar, #wp-wpforms-1481-field_3-editor-tools .wp-editor-tabs {
display: none;
}
Please remember to update the form and field ID in the above CSS snippet. For this example, our form ID is 1481 and the field ID for our Rich Text field is 3. You’ll need to update these to match your own form and field IDs. If you’re not sure where to find these IDs, please review this guide.
And that’s all you need to customize the Rich Text form field! Would you like to customize the icons when using the Rating form field? Check out our guide on How to Customize the Look of the Rating Icons.