How do I add custom stylesheets to TinyMCE?

Still no luck? I got the same problem as rhankins…

I have an issue that goes with this thread. My site classes are not reflected in the wysiwyg editor’s input field. I have extra style sheets in my theme that I call from the header. I notice the admin doesn’t seem to call any of my theme stylesheets, so how is the edit input window (visual mode) supposed to reflect my basic styles like H1 etc…?

daveevolve, rhankins :
Comment the classes you don’t need in this file : wp-includes/js/tinymce/themes/advanced/skins/wp-theme/content.css

Has anyone figured this out in 3.0?

I can get the custom styles in the dropdown but only the initial load of the editor. If I refresh or add a new post the custom styles are gone. Happens both with TinyMCE Advanced Plugin and wp-super-edit.

Any ideas?

Hi everyone, I have the same problem here, I can’t remove the default classes and can’t add mine…

How comes nobody has come with a solution since this problem more than 9 months old? Are we the only ones wanting to customize Style dropdown menu in TinyMCE? No way! ??

Any help is welcome.

Here’s an answer for WP 3.0. I do not have a tiny_mce plugin installed. I’m just using what comes with WP3.

I’ve got this in my functions.php file:

if ( ! function_exists( 'my_formatTinyMCE' ) ) :
function my_formatTinyMCE($init) {
  $init['theme_advanced_buttons2_add'] = 'styleselect';
  $init['theme_advanced_styles'] = 'Home-header=highlight-header';

  return $init;
}
endif;

add_filter('tiny_mce_before_init', 'my_formatTinyMCE' );

To explain:

• [‘theme_advanced_buttons2_add’] – add the ‘styles’ drop down to one of your button bars (I chose #2)
• [‘theme_advanced_styles’] – add a style

FYI,

I broke the visual editor by applying this filter to tiny_mce_before_init in my functions.php file as seen above.

…aka adjusting the buttons and styles that showed up on the wysiwyg editor.

It was simply a matter of bad coding that broke it, so it was an easy fix.

Just a word of caution on that, it’s easy to break ??

Here is a great resource for information on Tiny MCE:

https://wiki.moxiecode.com/index.php/TinyMCE:Index

…from the horses mouth…

Out of interest, here are the default TinyMCE init values in my current install of WordPress 3.0 (not certain if any are set via options page)

array(
['mode'] =>
'specific_textareas'
...
['editor_selector'] =>
'theEditor'
...
['width'] =>
'100%'
...
['theme'] =>
'advanced'
...
['skin'] =>
'wp_theme'
...
['theme_advanced_buttons1'] =>
'bold,italic,strikethrough,|,bullist,numlist,blockquote,|,justifyleft,justifycenter,justifyright,|,link,unlink,wp_more,|,spellchecker,fullscreen,wp_adv'
...
['theme_advanced_buttons2'] =>
'formatselect,underline,justifyfull,forecolor,|,pastetext,pasteword,removeformat,|,media,charmap,|,outdent,indent,|,undo,redo,wp_help'
...
['theme_advanced_buttons3'] =>
...
['theme_advanced_buttons4'] =>
...
['language'] =>
'en'
...
['spellchecker_languages'] =>
'+English=en,Danish=da,Dutch=nl,Finnish=fi,French=fr,German=de,Italian=it,Polish=pl,Portuguese=pt,Spanish=es,Swedish=sv'
...
['theme_advanced_toolbar_location'] =>
'top'
...
['theme_advanced_toolbar_align'] =>
'left'
...
['theme_advanced_statusbar_location'] =>
'bottom'
...
['theme_advanced_resizing'] =>
TRUE
...
['theme_advanced_resize_horizontal'] =>
FALSE
...
['dialog_type'] =>
'modal'
...
['relative_urls'] =>
FALSE
...
['remove_script_host'] =>
FALSE
...
['convert_urls'] =>
FALSE
...
['apply_source_formatting'] =>
FALSE
...
['remove_linebreaks'] =>
TRUE
...
['gecko_spellcheck'] =>
TRUE
...
['entities'] =>
'38,amp,60,lt,62,gt'
...
['accessibility_focus'] =>
TRUE
...
['tabfocus_elements'] =>
'major-publishing-actions'
...
['media_strict'] =>
FALSE
...
['paste_remove_styles'] =>
TRUE
...
['paste_remove_spans'] =>
TRUE
...
['paste_strip_class_attributes'] =>
'all'
...
['wpeditimage_disable_captions'] =>
FALSE
...
['plugins'] =>
'safari,inlinepopups,spellchecker,paste,wordpress,media,fullscreen,wpeditimage,wpgallery,tabfocus'
...
['content_css'] =>
'https://www.example.com/wp-content/themes/example/editor-style.css'
...
)

You should be able to override any of them (at your own risk!!!) via zotsf’s function above.

Hi zotsf, thanks but you do not have a tiny_mce plugin installed, you’re just using what comes with WP3. So maybe it works for you but I do have a tiny_mce plugin installed (Advanced)…

So what can I do to first add new styles and then remove the useless default styles from the style drop down menu?

Thanks for your help!

Hi

Try this tutorial: https://www.wdmac.com/how-to-use-custom-styles-in-the-word-press-post-editor

You’ll be taught how to add your custom styles to the native post editor, as well as how to remove the default available styles.

Hope This Helps!

MAC ??