TinyMCE Custom Styles


Clients and colleagues tend to get crazy if they have to edit HTML code on their own or if little things are not working as expected. Make your editing experience as simple and good as possible!

This Plugin does two things for the TinyMCE classic editor (it does not work fully with Gutenberg):

A. Installs two files – editor-style.css and editor-style-shared.css – into your chosen location (so you can still do updates of the Plugin), which can be edited in the backend of your site.

  • editor-style.css is used for styling your TinyMCE Editor
  • editor-style-shared.css is used for styles to be used in your theme AND in your TinyMCE editor (so you do not have to copy)

Note: To use this feature, you have to write your own CSS code into these files, which is the only professional way to do it.

B. The main feature of this Plugin is to offer a GUI to create custom style formats for TinyMCE dynamically.

  • Easy to add, change and delete
  • No editing of source code required
  • Note that each style can have both CSS Classes and/or CSS Inline-Styles. The latter (excepting color) will even be applied to the Formats dropdown menu items. However, I do not recommend inline styles as they are inserted into the text of the post/page and remain unchanged if you later alter the style in the plugin settings – so in general stick to Classes!

How the two stylesheets are applied

The shared style sheet file is enqueued to be included on frontend pages (via the usual <link> tag in the <head> area) using the standard WordPress function wp_enqueue_style.

So, as with most other stylesheets, the statements in it will automatically apply to the whole HTML page. So define class names which will not collide with any already in use by the theme – and never define styles for html elements without a limiting class name which would apply to all elements of that tag type.

Bad: li { font-size: 2em; }
Good: li.myownlarge { font-size: 2em; }

Both stylesheets are passed to tinyMCE by calling: add_filter(‘mce_css’, …)

What this causes to happen is that they are linked in to the HTML document which is the source for an <iframe>, which is the editing area of tinyMCE. So they should definitely only apply to HTML in the iframe – although I have heard that some situations, e.g. a cache plugin, may break this mechanism.

Gutenberg classic blocks

Any custom styles defined in this plugin will be shown in the ‘Formats’ dropdown, and their styles will be applied (in the HTML) as usual. But the two stylesheet files are NOT loaded with this instance of TinyMCE so the visual effect is missing while editing. Sorry, but I don’t have the time right now.

WordPress MultiSite

Although it does not check for MultiSite, the plugin works in the MultiSite environment, since WordPress uses a separate Options table for each MultiSite. You can reuse the same CSS files (by supplying the same custom directory in each Site), or add separate ones for each Site.

Current Languages

  • en_US
  • de_DE (David Stöckl and Tim Reeves)

Compatibility with other tinyMCE plugins

This plugin is compatible with a number of others which also enhance TinyMCE in different ways, in particular:

  • Advanced Editor Tools (previously TinyMCE Advanced)
  • WP Edit (by Josh Lobe, now abandoned)
  • WP Editor (enhances the «Text» tab, supported but no active development)
  • Preserved HTML Editor Markup Plus (possibly abandoned)
  • Visual Editor Custom Buttons (probably abandoned)
  • tinyWYM Editor (now abandoned)

Here is a detailed description of how to put all these plugins together (in german).


This plugin is a fork of TinyMCE Advanced Professsional Formats and Styles which has been abandoned by the original author. Initially I just fixed a JavaScript bug so that it worked again, and cleaned up the code and messages a bit. In versions 1.0.2 and 1.0.3 I did a lot more work on the settings page, see the changelog. 1.0.4 preserves standard styles and those of other plugins, and adds an option to add a submenu for its styles. If anyone wants to help me keep this great plugin alive and further improve it, please do! Especially translations are very welcome.


  1. Upload the Plugin to your wp-content/plugins/ folder
  2. Activate the Plugin
  3. Go to Settings -> TinyMCE Custom Styles
  4. Follow the instructions on the screen – write your CSS and create your custom formats

Important: Some Settings of TinyMCE or certain TinyMCE Plugins require you to do some manual settings for the Plugin to work. The Plugin WILL work, if you configure it correctly – check the FAQ for help.


I cannot edit editor-style.css and editor-style-shared.css. What is wrong?

The Plugin was probably not able to create the files, due to problems with your server filesystem settings. Please create these files in the selected directory manually, and make sure the directory read/write access is set to 777.

I have edited the files editor-style.css and editor-style-shared.css, but my visual editor is not styled. What is the problem?

  1. You should empty the cache of your Web Browser, this is often the reason for the styles being applied with some delay.
  2. Check this with simple styles like body { background-color:black; } to see if it basically works.
  3. Maybe there are some functions inside of your Theme / other Plugin, which overwrite the settings of this Plugin. Please check this out as it seems to work in most cases.

The file editor-style.css is not working in the frontend of my website, but it is applied to the backend editor. Why?

Make sure that your Theme calls the function wp_head(); inside the header of your template.

I have created some custom formats/styles, I can see the dropdown, but the formats/styles which I have created on the settings Page just do not work. What is wrong?

You have to be careful when creating custom styles/formats if you are doing it for the first time. If you make a row with an HTML blockquote element and you choose «Inline» from the radio buttons, this style will NOT work, as blockquote is not an HTML inline element.

Try something easy like:
– Name: My red text
– Type: inline
– Type value: span
– CSS style: color / #f00

Check if this style works. If so, proceed to other styles. They will only work if you use correct semantics.


4 de enero de 2021
It was not playing nice with another plugin, but after a few tweaks I found the conflict and this is very nice coding. Thank you!
14 de abril de 2020
The amount of hours I've wasted trying to apply styling to the editor is sickening. This plugin provides a very clean and convenient way to tackle this. THANK YOU! DEVELOPER: PLEASE DON'T GIVE UP ON THIS PROJECT! As it hasn't been updated for a very long time, I really hope it doesn't lose support. We all really appreciate the work you code wizards do!
Leer todas las 11 reseñas

Colaboradores y desarrolladores

«TinyMCE Custom Styles» es un software de código abierto. Las siguientes personas han colaborado con este plugin.


Traduce «TinyMCE Custom Styles» a tu idioma.

¿Interesado en el desarrollo?

Revisa el código , echa un vistazo al repositorio SVN o suscríbete al registro de desarrollo por RSS.

Registro de cambios


  • HELP HELP: Get more translations / update outdated es_ES + sr_RS
  • Support TinyMCE in Gutenberg classic block context
  • Warn admin user when leaving changed settings page
  • Add a JS function to insert a row after another row
  • OR better: Make style rows sortable by drag and drop
  • Nice to have: Rewrite the code from procedural to OOP


  • Fixed a typo which prevented custom style deletion
  • Documented that Gutenberg classic blocks not supported


  • Typo-correction in plugin description


  • Improved plugin description


  • Learned more on SVN and really deleted/added language files


  • Removed unneccesary and outdated translation files


  • Small formal improvements re translation
  • Added .pot string translation file


  • Standard entries and any other previous entries (from other plugins) in TinyMCE’s Formats dropdown are now preserved
  • Added a checkbox option to allow inserting the custom styles in a submenu «Custom Styles» in the Formats dropdown
  • Added a checkbox option to govern whether to preserve the standard Formats entries or remove them. This option gets overwritten (to ‘preserve’) by the ‘WP Edit’ plugin with option ‘Add Pre-defined Styles’ checked.
  • Minor updates to german translation
  • Outdated spanish and serbien translations removed
  • Tested and described on WordPress MultiSite
  • Various other improvements in the description


  • Updated german translation
  • Made some table header names translatable
  • Shortened some table input fields for better layout


  • This update improves the settings page as follows
  • Added second save button
  • Complete rework of admin notices
  • Many minor layout and message improvements
  • Corrected several loop counter irritations
  • Improved how missing style files are tested
  • Improved logic and messages around custom directory
  • Added more explanation and sample content in auto-created editor-style-shared.css
  • Reduced PHP Warnings and Notices to zero


  • Initial release as fork.