WordPress.org

Ready to get started?Download WordPress

Forums

How do I add custom stylesheets to TinyMCE? (28 posts)

  1. Llasse
    Member
    Posted 4 years ago #

    I have searched on numerous websites for a solution, but the method seems to change every WP release, and I couldn't find one that works on the newest 2.8.4 release..

    I already added the styleselect-dropdown menu to the TinyMCE editor by adding it to $mce_buttons_2 in wp-admin/includes/post.php however, I don't know how to edit and add the styles that it offers me, which are:
    alignleft
    aligncenter
    alignright
    wp-caption
    wp-caption-dd
    wpgallery

    How can I edit this list to add my own class to be applied (and delete wp-caption etc.)?

  2. Llasse
    Member
    Posted 4 years ago #

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

  3. hedgehogsbottom
    Member
    Posted 4 years ago #

    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.

  4. wicky
    Member
    Posted 4 years ago #

    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.

  5. hedgehogsbottom
    Member
    Posted 4 years ago #

    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.

  6. farrelley
    Member
    Posted 4 years ago #

    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' );
  7. Matt Hill
    Member
    Posted 4 years ago #

    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!

  8. lollypopstar
    Member
    Posted 4 years ago #

    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!)

  9. boborg
    Member
    Posted 4 years ago #

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

  10. bmo455
    Member
    Posted 4 years ago #

    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!

  11. molligirl
    Member
    Posted 4 years ago #

    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.

  12. w1cky
    Member
    Posted 4 years ago #

    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.

  13. Kevin Leary
    Member
    Posted 4 years ago #

    This recently released plugin should help you out:

    http://wordpress.org/extend/plugins/insert-link-class/

  14. Kevin Leary
    Member
    Posted 4 years ago #

    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

  15. daveevolve
    Member
    Posted 4 years ago #

    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?

  16. rhankins
    Member
    Posted 4 years ago #

    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.

  17. miniCarl
    Member
    Posted 4 years ago #

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

  18. ramedia
    Member
    Posted 3 years ago #

    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...?

  19. grostoryeu
    Member
    Posted 3 years ago #

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

  20. senica@gmail.com
    Member
    Posted 3 years ago #

    Has anyone figured this out in 3.0?

  21. boborg
    Member
    Posted 3 years ago #

    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?

  22. Alkorr
    Member
    Posted 3 years ago #

    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.

  23. zotsf
    Member
    Posted 3 years ago #

    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
  24. zotsf
    Member
    Posted 3 years ago #

    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 :)

  25. zotsf
    Member
    Posted 3 years ago #

    Here is a great resource for information on Tiny MCE:

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

    ...from the horses mouth...

  26. Roscius
    Member
    Posted 3 years ago #

    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'] =>
    'http://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.

  27. Alkorr
    Member
    Posted 3 years ago #

    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!

  28. MAzCastro
    Member
    Posted 3 years ago #

    Hi

    Try this tutorial: http://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 :)

Topic Closed

This topic has been closed to new replies.

About this Topic