How to Add Custom Styles to the WordPress Visual Editor
Now that you have new styles you can highlight content in your editor and apply the styles. Notice, how the “Theme Button” format has a selector parameter? This means that the style can only be applied to that specific selector (in this case the “a” or “link” tag). The second format we added “Highlight” does not have a selector parameter but rather an “inline” parameter which tells it to apply the style to whatever text you have highlighted in your editor and wrap it in a span with your unique classname. You can see an example from our Total WordPress theme on how we’ve used formats so users can easily apply a checklist look to any bullets in the editor.
Want to ditch the TinyMCE editor altogether? Many developers nowadays are equipping their themes with front-end builders. In other words, you can look at your actual website and make changes directly on the page; there’s no longer a need to duck into the backend, edit your content in the editor interface, and then preview your changes to make sure they look okay. If your theme does not come with this functionality, you can use this plugin to enable front-end editing.
How to Add Custom WordPress Editor Styles (add_editor_style)
The 9.0 – Text Editor section is there to change the appearance of the “Text” mode in the WordPress editor (as opposed to the Visual mode). When looking at the raw code, I prefer to use a dark background with light text, and a larger font size. The CSS classes I’ve used here should target just the Text editor, and not the Visual styles.