Introduction
Would you like to customize the Rich Text field icons that are shown to your visitors? By default, the Rich Text field has two separate toolbars that you see when viewing the field but you can easily customize both of these toolbars by adding a snippet to your site for one or both toolbars.
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.
Adding the snippet
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.
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.