by Tim Reeves 3.9 (15 reviews)

TinyMCE Custom Styles

Name: TinyMCE Custom Styles
Rating: 3.9 (15 reviews)
Author: Tim Reeves

Enhance TinyMCE visual editor with a dedicated stylesheet, a stylesheet shared with the frontend, and custom styles in the Formats dropdown.

TinyMCE Custom Styles ranks #2,550 among WordPress.org plugins with 7,000+ active installations, is #99 of 1,107 in the Editor & Writing category, a 3.9/5 rating from 15 reviews, and was last updated Jun 29, 2024. Data from WordPress.org, refreshed twice daily — see methodology.

Tested up to WP 6.5 (Current: 7.0.2)

vtrunk Current Version vtrunk

Updated 2 years ago Last Update on 29 Jun, 2024

Refreshed 6 hours ago Last Refreshed on

#99 of 1,107 in Editor & Writing Top 5% by installs Downloads -19.8% this week No update in over a year

View on WordPress.org

Rank

#2,550

-1 this week

Active Installs

7K+

— No change

KW Avg Position

2 worse

Downloads

120.8K

+19 today

Support Resolved

— No change

Rating

78%

Review 3.9 out of 5

3.9 (15 reviews)

Next Milestone 8K

Total Progress 90.4%

7K+ 8K+

Ranks to Climb

Growth Needed

8,000,000

Active Installs

Pro

Unlock Exact Install Count

See the precise estimated active installs for this plugin, calculated from real-time ranking data.

Exact install estimates within tiers
Track install growth over time
Milestone progress predictions

Upgrade to Pro

Need 96 more installs to reach 8K+

Rank Changes

Current #2,550

Change

Best #

Upgrade to Pro

Unlock 30-day and 90-day rank history charts with a Pro subscription.

Upgrade Now

Active Installs Growth

Upgrade to Pro

Active Installs 0,000,000+

Growth +0.0%

Peak 0,000,000

Downloads Growth

Downloads

Growth

Peak

Upgrade to Pro

Unlock 30-day, 90-day, and yearly download history charts with a Pro subscription.

Upgrade Now

Reviews & Ratings

3.9

15 reviews

Overall 78%

11 (73%)

0 (0%)

4 (27%)

Tracked Keywords

Showing 1 of 1

Keyword	Position	Change	Type	Updated
tinyMCE	68	—	Tag	8 hours ago

Unlock Keyword Analytics

Track keyword rankings, search positions, and discover new ranking opportunities with a Pro subscription.

Full keyword position tracking
Historical ranking data
Competitor keyword analysis

Upgrade to Pro

Upgrade Plan

Security History

Source: WPVulnerability

3 known vulnerabilities on record · 0 in the last 24 months · checked 1 day ago

Jun 19, 2023

TinyMCE Custom Styles [tinymce-custom-styles] < 1.1.4

CVE-2023-2967 · Fixed in v1.1.4
Feb 15, 2023

TinyMCE Custom Styles [tinymce-custom-styles] < 1.1.3

CVE-2023-23995 · Fixed in v1.1.3
Jan 27, 2023

TinyMCE Custom Styles [tinymce-custom-styles] < 1.1.3

Fixed in v1.1.3

Track This Plugin

Get detailed analytics, keyword tracking, and position alerts delivered to your inbox.

Start Tracking Free

Plugin Details

Version: trunk
Last Updated: Jun 29, 2024
Requires WP: 5.0+
Tested Up To: 6.5
PHP Version: 5.6 or higher
Author: Tim Reeves

Support & Rating

Rating: ★ ★ ★ ★ ☆ 3.9
Reviews: 15
Support Threads: 0
Resolved: 0%

Keywords

editor format style tinyMCE visual

Upgrade to Pro

Unlock keyword rankings, search positions, and detailed analytics with a Pro subscription.

Upgrade Now

Similar Plugins

Adminify – White Label, Admin Menu Editor, Login Customizer

7K+ installs

#2,721

Master Addons for Elementor – Elementor Addons, Widgets, Mega Menu Builder, Popup Builder, Widget Builder & Template Kits

30K+ installs

#991

Elementor Website Builder - more than just a page builder

Advanced Editor Tools

Spectra Legacy – Gutenberg Blocks

View all Editor-and-writing plugins

TL;DR

AI summary of the plugin's readme

This plugin is for WordPress site owners and theme developers who want the TinyMCE visual editor to match their site's frontend styling. It adds dedicated CSS stylesheets to both the editor and frontend, and lets users populate TinyMCE's Formats dropdown with custom named styles without editing source code.

Dedicated editor-style.css stylesheet
Shared frontend/editor stylesheet
Backend GUI for custom Formats styles
Add block and inline elements
Works with Gutenberg classic block
WordPress MultiSite compatible
CSS Classes and Inline-Styles support
Registers Formats dropdown to toolbar

Frequently Asked Questions

Common questions about TinyMCE Custom Styles

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.

You should empty the cache of your Web Browser, this is often the reason for the styles being applied with some delay. Check this with simple styles like body { background-color:black; } to see if it basically works. 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.

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

You have to be careful when creating custom styles 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.

In general, no, because the shortcode is only expanded to HTML in the frontend - in the backend (editor) the shortcode is normally displayed as a shortcode, to allow it to be seen and edited (e.g. change shortcode parameters, position on the page etc.). Styles in editor-style-shared.css which match the HTML generated by the shortcode will of course work - in the frontend. There is no point putting such styles in editor-style-shared.css, so if you prefer, put them in the themes custom CSS (if provided, but not WordPress customizer, as that inserts the CSS inline on every page).

An image for example, when inserted via the media library, will show as the [caption] shortcode in the "Text" tab of the editor. To allow the page to be viewed visually, an exception is made and on the visual tab the image and caption are displayed, as TinyMCE itself replaces the shortcode with HTML. The HTML generated by TinyMCE (div dl dt a img br dd) is very different to that generated by WordPress at the frontend (div a img p). So in general, I recommend to use the text tab to fix image styles / encapsulation - my experience is that it's a real hit and miss affair with styles in the 'Formats' dropdown (more miss than hit).