Add a button to change font color in WYSIWYG

Learn how to safely add font color in WordPress using Gutenberg, the Classic Editor with a plugin, or custom CSS — no core file edits required. This tutorial covers all three methods.

How to Add Font Color in WordPress

1. Gutenberg Editor (Default WordPress Editor)

WordPress 5.0+ uses the Gutenberg block editor. Each block (paragraph, heading, list) can have its own text and background color.

1. Select the block you want to style (e.g., a paragraph or heading).
2. On the right sidebar, under Color Settings, click Text Color or Background Color.
3. Pick a color from the palette or enter a custom hex code.
4. The block will instantly show the selected color.

2. Classic Editor (TinyMCE) Using a Plugin

If you still use the Classic Editor, you can safely add a font color button using a plugin instead of editing core files.

1. Install the plugin Advanced Editor Tools (formerly TinyMCE Advanced) from the WordPress plugin repository.
2. Activate the plugin and go to Settings → Advanced Editor Tools.
3. Drag the Text Color button to your toolbar.
4. Save changes. The text color button will now appear in the Classic Editor.
5. Select text in your post and use the color picker to change the font color.

3. Using Custom CSS Classes

For site-wide or reusable text colors, CSS classes are a clean solution.

1. Go to Appearance → Customize → Additional CSS.
2. Add custom classes like the following:

.text-red { color: #ff0000; }
.text-blue { color: #0073aa; }

3. In Gutenberg or Classic Editor, assign the CSS class to a block or paragraph.
4. Your text will display in the selected color.

FAQ: Font Color in WordPress

Summary

Adding font color in WordPress today is much easier and safer than editing core TinyMCE files. Use Gutenberg’s built-in block color settings, the Classic Editor with WYSIYG Advanced Editor Tools, or custom CSS for consistent, reusable styling. This ensures your changes remain compatible with future WordPress updates.