Customizing the WordPress WYSIWYG TinyMCE visual editor

Adding addtional buttons or tools to WordPress WYSIWYG TinyMCE visual editor: Like most people, you probably enjoy using the built in TinyMCE visual editor that is included with WordPress. However, by default the included WYSIWYG editor lacks some essential tools like font color, font size, font family and more. The good news is that most of these tools are already included in WordPress but are simply not active. The following tutorial shows you how to add additional buttons to include these tools to your WordPress visual editor.

Add more buttons to WordPress visual editor:

  1. FTP to your server and download the tiny_mce_confg.php file from your wp-includes/js/tinymce/ directory
  2. Open the tiny_mce_confg.php file with a text editor
  3. From within the tiny_mce_config.php file, find the line that starts like the following:

    $mce_buttons = apply_filters('mce_buttons', array('bold', 'italic', 'strikethrough', 'separator',

  4. To add additional tools to the visual editor menu, simply add any of the button codes listed at the bottom of this page to the line using the proper format: 'button-code',
  5. Save your changes and upload the new tiny_mce_config.php file to your wp-includes/js/tinymce/ directory, replacing or overwriting the old file.

Available WYSWYG button codes:

bold
italic
underline
strikethrough
justifyleft
justifycenter
justifyright
justifyfull
bullist
numlist
outdent
indent
cut
copy
paste
undo
redo
link
unlink
image
cleanup
help
code
hr
removeformat
formatselect
fontselect
fontsizeselect
styleselect
sub
sup
forecolor
backcolor
charmap
visualaid
anchor
newdocument
separator