How do I add custom stylesheets to TinyMCE?

I think I am looking for the equivilant of tiny_mce_config.php or something like that?

I’d be interested to learn this too.

The web’s advice on customizing TinyMCE seems not to make much sense with the WP version of TinyMCE (eg references to modifying tinyMCE.init() are a bit confusing when looking at wp-tinymce.js)

I’d like to tell TinyMCE where my custom stylesheets are, and have TinyMCE add the styles to the drop down style box.

Yes, me too.

I like the very simple implementation of TinyMCE, however, when building sites for clients (who have very little technical knowledge), it would be extremely useful to add custom styles, avoiding the need for manually adding classes.

OK – here’s a quick and dirty solution, that will likely be overwritten if you upgrade/re-install TinyMCE Advanced.

Edit the file tinymce-advanced.php, found in plugins/tinymce-advanced/

Around Line 63, in the code “function tdav_css($wp)”

add code like this:-

$wp .= “,” . “/wp-content/themes/MyBespokeFolder/MyAdditionalStyles.css”;

Reloading the editor causes the additional styles to appear in the Style dropdown.

Hope this helps.

To add your stylesheet to the TinyMCE editor just add this as a filter. you can do this in your functions.php file.

/*
 *
 *  Adds a filter to append the default stylesheet to the tinymce editor.
 *
 */
if ( ! function_exists('tdav_css') ) {
	function tdav_css($wp) {
		$wp .= ',' . get_bloginfo('stylesheet_url');
	return $wp;
	}
}
add_filter( 'mce_css', 'tdav_css' );

I have the same issue and have been trying to fix this for a couple of weeks.

I tried the code supplied by farrelley which seems to work randomly. Sometimes my styles will appear in the dropdown, sometimes not.

Is there a definitive way of doing this in WordPress 2.8+? It seems that all documentation on tinyMCE on the web is now redundant for new versions of WordPress, as the method for calling and configuring it has changed. I thought about hacking the wp_tinymce.js directly but I opened that file and nearly had a heart attack!

Has anyone found the solution to this yet? I have a site in WordPress 2.9 and my clients now want a raft of different styles they can apply to a post.
(I’m thinking of teaching them HTML!)

Would like to know this as well. Had no luck in WP 2.9.1

Hey guys I just happened to run across this post while I was researching the same topic. I use the TinyMCE Advanced Plugin and with a few edits to the plugin CSS and my theme CSS I was able to add the class to TinyMCE and have it work in conjunction with my site styles.

Hope it helps, check out the Plugin FAQs on specifics on implementing, oh and don’t forget to clear your cache.

Hope it helps!

I succeeded in adding styles to the tadv-css file and they show up in the editor dropdown. BUT…the styles don’t display on the actual site. Can anyone help with this? Thanks.

I’d like to know this too.

The TinyMCE Advanced Plugin is the opposite of what I want.

I want to add certain pre-designed styles in a drop down menu, so my clients can easily add just the styles that I have made available, WITHOUT having access to all the styles in the main stylesheet & WITHOUT being able to mess around adding other random styles of their choice.

Ideally, I’d like to remove the ability to embold & colour text too.

This recently released plugin should help you out:

https://www.ads-software.com/extend/plugins/insert-link-class/

For my pursposes I wanted a lightweight way to do this, so I built on top of farrelley’s approach, using an separate stylesheet to add the CSS classes into the tinymce dropdown selector.

// Add custom CTA styles to TinyMCE editor
if ( ! function_exists('tdav_css') ) {
	function tdav_css($wp) {
		$wp .= ',' . get_bloginfo('stylesheet_directory') . '/css/tinymce.css';
		return $wp;
	}
}
add_filter( 'mce_css', 'tdav_css' );

My /css/tinymce.css file is inside my theme directory, and contains:

/* TinyMCE Styles (show up for links) */
a.call-to-action {}
a.call-to-action:hover {}
a.right-arrow {}
a.right-arrow:hover {}

Then I define the front end styles for these buttons in my style.css file. This ensure that they look standard in the WYSIWYG and styled on the front of the site.

If you want your links to look different inside TinyMCE you could flag them in tinymce.css somehow.

I hope this helps

I’ve tried the solutions posted here and am able to add styles to the drop down list, but the major issue is removing the default styles that Llasse listed to start this post. Has anyone had luck in removing the wp-caption and alignLeft classes?

I have the same question as daveevolve — how do you remove the default classes (i.e. wp-caption, alignLeft, alignCenter, etc)? I just want a drop down with my custom defined classes… Not these default ones.