TinyMCE Custom Styles
Enhance TinyMCE visual editor with a dedicated stylesheet, a stylesheet shared with the frontend, and custom styles in the Formats dropdown.
The facts
- Rating
- 3.9★ from 15
- Active installs
- 7k+
- Price
- Free
- Last updated
- 29 Jun 2024
- Added
- Jun 2016
- Requires WP
- 5.0
- Tested up to
- WP 6.5.10
- Requires PHP
- 5.6
- Downloads
- 123,039
Our analysis
AI-assistedTinyMCE Custom Styles is a WordPress plugin designed to enhance the editing experience in the TinyMCE visual editor, including the Gutenberg Classic block. It allows you to add custom CSS styles to the editor and the frontend, enabling you to populate the 'Formats' dropdown with your own styles. Users need to write their own CSS code into the provided stylesheet files to define these styles.
The plugin installs two CSS files: one for the TinyMCE editor and another for shared styles that apply to both the frontend and the editor. It offers a backend interface for dynamically creating, modifying, and deleting styles without needing to edit source code, although some understanding of CSS is required. This plugin is suitable for users who want to tailor the TinyMCE editor to their specific styling needs.
Best for: This plugin suits WordPress users who want to customise their TinyMCE editor styles.
What it does well
- ✓Enhances TinyMCE editor with custom styles
- ✓Allows dynamic creation of styles via a backend GUI
- ✓Supports both frontend and editor styling with shared CSS
- ✓Works with Gutenberg Classic block
- ✓Compatible with WordPress MultiSite
Where it falls short
- •Requires knowledge of CSS to define styles
- •May be affected by caching plugins
- •Limited support as the author seeks a maintainer
Verdict
TinyMCE Custom Styles offers useful functionality for customising the editor but may require some technical knowledge and has limited ongoing support.
From the developer
Tim Reeves's own description of TinyMCE Custom Styles, lightly tidied.
Please someone take over maintaining this plugin, or it will get abandoned – with over 9.000 active installations.
I’m now 69 and although retired, all my time is taken up with other projects, while I still have the energy for them. Why you might want to take it over? It’s really useful:
Make your editing experience as simple and good as possible by improving the way you work with the TinyMCE visual editor (including Gutenberg Classic block). This plugin adds custom CSS file(s) to the frontend and to the TinyMCE editor; and it allows you to populate TinyMCE’s ‘Formats’ dropdown with your own styles. The features in more detail:
1. Installs two CSS stylesheet files into your chosen location (so you can still do updates of the active theme and this plugin and even switch to another theme). In general you will need to fetch the auto-created stub files via FTP, edit them locally and upload them, overwriting the previous versions.
- editor-style.css is used for styling your TinyMCE Editor
- editor-style-shared.css is used for styles to be used by the frontend AND in your TinyMCE editor (so you do not have to copy)
To use this feature, you have to write your own CSS code into these files.
2. The main feature of this Plugin is to offer a Backend-GUI to create custom styles for TinyMCE (‘Formats’ dropdown) dynamically.
- Easy to add, change and delete styles
- No editing of source code required (excepting the CSS stylesheets)
- Allows you to add block- and inline elements which are not provided by TinyMCE, e.g. , <cite>, <q> etc.
- The plugin’s backend page contains a lot of description and some links to help you define your styles correctly
- 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 do not define styles for HTML elements without a limiting class name unless you want them to apply to all elements of that tag type (including in header, footer, sidebar…).
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 , 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
As of version 1.1.1 this plugin works for the Gutenberg classic block.
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 (Tim Reeves)