Mastering the TinyMCE Styles Dropdown in the WordPress Visual Editor

TinyMCE Styles dropdown menuI’ll just come out and say it: I write my blog posts in the visual editor. Yes, it may be blasphemy for a developer to do that, but I just don’t care. I like seeing the post I’m writing come to life as I’m writing it. Since I’m such a fan of the visual editor, I’m always looking for new ways to stretch its capabilities without adding a truckload of extra markup to my post. You want to learn about the styles dropdown in the visual editor? Here we go!

Most people know about the “Kitchen Sink” button in the WordPress visual editor—the one that toggles the second row of buttons. On that second row, there’s the familiar Format dropdown menu. Well, there’s another dropdown menu available that isn’t on the toolbar by default: the Styles dropdown. This makes it easy to add custom classes to the visual editor in WordPress (which is particularly great for client websites, when clients need a foolproof way to add HTML to the post).

TinyMCE editor screenshot

The power of the TinyMCE Styles dropdown menu.

Method 1: Comma-separated string of styles

I learned about the Styles dropdown a couple of years ago, and through a few Google searches I found out how to make it show up and list my custom classes. This is what I learned then, and it’s still prevalent in Google search results:

add_filter( 'tiny_mce_before_init', 'my_custom_tinymce' );

function my_custom_tinymce( $init ) {
	$init['theme_advanced_buttons2_add_before'] = 'styleselect';
	$init['theme_advanced_styles'] = 'Button=button,Callout Box=callout';
	return $init;
}

(That code would go in your theme’s functions.php file.)

This is pretty straightforward. We’re adding the Styles dropdown ('styleselect') to the second row of buttons (theme_advanced_buttons2_add) at the beginning of the row (_before). Then we’re adding our own styles to the list.

In the list of styles, the title comes before the equals sign and the CSS class comes afterward. Separate multiple styles with a comma. Violà!

So what’s wrong with that?

This method is 100% okay to use. It’s short and sweet, requires very little code, and gets the job done. However, it’s a little restricting. This will take whatever text is highlighted in the editor and wrap a <span> element around it, applying the CSS class to the span. Here’s what it won’t do:

  • Apply a class to an existing block element
  • Limit a style to a specific HTML tag
  • Wrap multiple block elements in another block element with a custom class
  • Apply inline styles to an element

I definitely want to be able to do all of those things. Don’t you? (Well, maybe not inline styles, but the point is that you can.)

Method 2: Arrays using TinyMCE parameters

Step 1: Add the Styles dropdown to the toolbar

Add this code to functions.php:

add_filter( 'mce_buttons_2', 'my_mce_buttons_2' );

function my_mce_buttons_2( $buttons ) {
    array_unshift( $buttons, 'styleselect' );
    return $buttons;
}

A slightly different way of adding the dropdown. This filter applies only to the buttons, so it feels a little more right.

Step 2: Add KICK-ASS custom styles

After that, add this code:

add_filter( 'tiny_mce_before_init', 'my_mce_before_init' );

function my_mce_before_init( $settings ) {

    $style_formats = array(
    	array(
    		'title' => 'Button',
    		'selector' => 'a',
    		'classes' => 'button'
    	),
        array(
        	'title' => 'Callout Box',
        	'block' => 'div',
        	'classes' => 'callout',
        	'wrapper' => true
        ),
        array(
        	'title' => 'Bold Red Text',
        	'inline' => 'span',
        	'styles' => array(
        		'color' => '#f00',
        		'fontWeight' => 'bold'
        	)
        )
    );

    $settings['style_formats'] = json_encode( $style_formats );

    return $settings;

}

This is also fairly simple once you know the syntax. All we’re doing is defining the formats, then encoding them as JSON so they’re TinyMCE-friendly, then assigning them to the TinyMCE settings.

Let’s break apart the array and look at the different options.

title [required] label for this dropdown item
selector | block | inline [required]
  • selector limits the style to a specific HTML tag, and will apply the style to an existing tag instead of creating one
  • block creates a new block-level element with the style applied, and will replace the existing block element around the cursor
  • inline creates a new inline element with the style applied, and will wrap whatever is selected in the editor, not replacing any tags
classes [optional] space-separated list of classes to apply to the element
styles [optional] array of inline styles to apply to the element (two-word attributes, like font-weight, are written in Javascript-friendly camel case: fontWeight)
attributes [optional] assigns attributes to the element (same syntax as styles)
wrapper [optional, default = false] if set to true, creates a new block-level element around any selected block-level elements
exact [optional, default = false] disables the “merge similar styles” feature, needed for some CSS inheritance issues

Note that while classes and styles are both optional, one of the two should be present in each array. (Otherwise, why are you adding this to the dropdown anyway?)

Step 3: Add your stylesheet to the visual editor

WordPress made this one easy in version 3.1. Just add this to functions.php:

add_action( 'admin_init', 'add_my_editor_style' );

function add_my_editor_style() {
	add_editor_style();
}

Then put a file in your theme folder named editor-style.css. Any styles in there are applied to the visual editor.

Download the Custom Editor Styles plugin (updated July 30, 2012)

To use it, just unzip the download and put the PHP file in your wp-content/plugins folder, then activate it!

That’s it! For more TinyMCE parameter examples, check out this post at WordPress Answers and this documentation for TinyMCE.

View this post online: http://alisothegeek.com/2011/05/tinymce-styles-dropdown-wordpress-visual-editor/

Leave a Reply

104 thoughts on “Mastering the TinyMCE Styles Dropdown in the WordPress Visual Editor

  1. Jeff says:

    I read Justin’s post too and tend to agree with him. Looks like you came up with a nice compromise…will give it a try on my next theme.

    Are you going to release a stable version of Bolts?

    Good luck with the launch!

    • Alison Barrett says:

      Yes, I plan on releasing a stable version of Bolts as soon as Themejack launches, which should be tomorrow night or Monday morning. It will still be free and open-source.

      Thanks!

  2. Anonymous says:

    Thank you for sharing this. I looked into this a few months ago, but since then I’ve had a peak in clients and put it in the back of my mind (a good place to get lost). I’ve been reading up on WP Post Types and somehow found this. It’s just what I needed…..
    Great find and thanks again.

  3. Thank you Alison for your article! I only knew about method 1 before, but this opens up new horizons. You saved my day actually :)

  4. Larry says:

    Warning: newbie posting. New to WordPress. Not a coder but comfortable with HTML and CSS.
    Alison, this seems to be exactly what I am looking for. But is this the sort of customization that prevents one from applying WP and theme updates without first saving the customized files and reapplying them after an update (assuming their still compatible with the update). My apologies if this is a dumb question.

    • Not a dumb question! You’re absolutely right—the custom code would have to be reapplied after updating the theme (updating WP would be fine, though).

      I’ve updated the post with a downloadable plugin version of the code, so any customizations you make will be preserved through updates. Enjoy!

      • Larry says:

        Woops. I saw that WP has an option to upload a plugin that is in zip format and will install it. I did that and activated your plug in and am now getting “Fatal error: Call to undefined function is_rtl() in
        /home/content/70/5439370/html/wp-includes/theme.php on line 1714″.

        • Try uploading the plugin manually into your wp-content/plugins folder and then activating it. I’m not using the is_rtl() function anywhere. Which version of WordPress are you running?

          • Larry says:

            WordPress 3.1.2
            Ok, I copied “atg-styles-dropdown.php_” to wp-content/plugins manually via FTP and then activated the plugin. And got the same error.

          • Larry says:

            Did I do something wrong?

          • I’m not sure what to tell you—I’m not using is_rtl() anywhere, so I don’t know how it can be my plugin causing it. Maybe it’s some conflict between another plugin and your theme? Try using TwentyTen and see if the error is still there.

          • Toddwas says:

            Darren’s reccomendation to remove “add_editor_style();” from line 10 worked on my theme also. Thank you to both Alison & Darren!

          • Toddwas says:

            Darren’s reccomendation to remove “add_editor_style();” from line 10 worked on my theme also. Thank you to both Alison & Darren!

          • Darren says:

            Larry… I’m having the same issue and I’m working on it. If I find a solution, I’ll make sure to post it.

          • If you do find a solution, I’ll be sure to edit the post to make whatever fixes necessary to the code. Thank you for working on it!

          • Darren says:

            Hi Alison and Larry… I got it figured out.  The theme Larry and I are using is probably already using “add_editor_style();”…Simply remove that from line 10 and you should be good to go.

          • Larry says:

            Hi Darren, I was very excited to see your message. Unfortunately I am not finding that string, but I didn’t set up my theme and am just learning about all of this. I’m assuming that the file you are referencing will be found in  /wp-content/themes/magazine/. And the likely candidates seem to be home.php or functions.php, but I’m not finding that string in these files (or others that I’m perusing around in. I see that I also have a /wp-content/themes/magazine_10 folder that appears to have the fav icon and images that are custom to my site; i.e., not where they should be to allow me to update the theme without messing up these customizations. I probably need to hire someone to fix this since the coder I originally used is unavailable now.

          • Darren says:

            You’ll find it in Alison’s plugin ‘atg-styles-dropdown.php’ file… Using your favorite FTP program,  look inside your wp-content/plugin/ folder in WP and you should see it. Download it to your desktop, open it with Notepad, remove the line I talked about above then re-upload… Should work for ya :)

          • Larry says:

            Found that file, removed
            add_editor_style();and I can now activate the plugin without getting the error. But I also still do not have a new styles menu. The line { add_editor_style(); } does not appear in the /wp-content/themes/magazine/functions.php file either. I can add the line to this file (does it matter where in the file?) but I still do not get a styles menu. I’ve never coded in PHP…I must be missing something very fundamental.

            Oh, when I used notepad to edit the ‘atg-styles-dropdown.php’ file, I had to first rename the file to .txt, edit and rename it back. Notepad inserted special characters at the beginning of the file that caused an error when I activated the plug-in. I used the CuteFTP editor instead and it saved the file correctly, but then the issues noted above.

          • Darren says:

            The only other thing I can think of would be that you’re using the plugin “TinyMCE Advanced”

            If so, you need to go to the settings area of that plugin and drag the “style” dropdown to one of the top 2 lines of the editor.

        • Sunny Morgan says:

          The error is with the add_editor_style() function. I am getting the error as well. If I remove this function then the styles do not show up while editing. Now if I move the code from the plugin file into the function.php file then everything work as expected without an error even with add_editor_style() present. Maybe there is a way to call 
          add_editor_style() a moment later.

  5. James Dickie says:

    Hi there,

    A really fantastic tutorial, well done! Off to play with this now.

  6. James Dickie says:

    ah my intention was to also add – is there a method of removing the class assigned to an element in this manner?

  7. Ken Brucker says:

    I’ve been playing with this area of WP myself and one concern I have is that this method does not readily extended across plugins.  If multiple plugins attempt to manipulate styles, the coding method used above will allow only the last one to set style_formats to stick.  A quick mod:  when presented with a non-empty style_formats value, convert from JSON format, apply updates and then convert back to JSON.

  8. Armand Morin says:

    Great post, I’ve been trying to figure this out especially using the “wrapper” aspect. You explained it perfectly. 

    A question though, on your buttons. When you do as you listed here on the buttons, does only the text become linked and not the whole button? I’m trying to make the whole text area clickable and it’s driving me crazy. Any ideas?

  9. Trisha Cupra says:

    Can’t wait to try this! I stumbled upon this post just now, after wondering about this ever since Jason Tadlock wrote the post you referred to.

  10. Betriebswirtblog.de says:

    In my blog the plugin didnt worked with wp 3.21. I got error message and had to remove it manually via ssh.

  11. knottulf says:

    Doesnt work with 3.2.1. Activation leaves the screen totally blank.

  12. Rein says:

    Perfect solution. Thanks for your clean explanation! Without plugins like TinyMCE Advanced, great post!

  13. Kera McHugh says:

    thank you, thank you, thank you! I have been searching everywhere for an easy way to do this… adding the editor-style.css function worked like a charm! no more client-manually-formatted (and thus likely mis-formatted) posts that clients need me to fix!

  14. Simon Farla says:

    Holy crap you are full of WIN! This is the best way to add different types of buttons to the MCE that I’ve found yet (I’ve tried at least 6 other ways). Thank you for the thorough explanation of the available options.

  15. Mike says:

    Lots of great stuff there and lots to learn. Before the fact, how would I go about reducing the size of the text area (or expanding it in editor-style.css? I can make a conditional if is my template theme use the editor-style-css but what parameters do I put in that stylesheet to make, say, the text area only 1 row high (or 20px) or 150 rows high, etc.?
    Thanks, Mike

  16. This is an absolute must for using WordPress as a CMS. Adding the Styles drop-down to tinyMCE makes my client’s lives so much easier. Adding buttons etc – amazing. Thanks so much.

  17. DAWSOG says:

    I tried this but it does not work

  18. scdesigns says:

    This doesn’t seem to work at all. I get the blank screen too. Been trying to solve this exact problem for hours. I must be missing something easy. UGH!

  19. Cesar says:

    Thank you very much for this information. Adding the Styles drop-down to tinyMCE have save me a lot of time, and made my client happy.

  20. Mr.DoT says:

    Thanks aliso!
    It works perfectly on my WordPress 3 (I followed the 2nd method, because the plugin causes crash to the admin area). 

  21. PTcampbell says:

    Thanks for this article, you saved me. Much prefer to use these custom functions than a dodgy plugin. 

  22. X3msnake says:

    Thanks for the research and collage :)

    Much helpfull.

  23. Alison, this is absolutely perfect. THANK YOU for writing up your findings and sharing them. I can see how, down the road, someone might expand this into a working plugin, but for the moment, just being able to target a *few* key styles, and APPLY THEM TO BLOCK ELEMENTS … well, what more could I want? You made my morning.

  24. I wanted to add in the ID attribute. Took me a minute to realize that it needed to be in an array, e.g.:


        $style_formats = array(
             array(
                'title' => 'Respond Block',
                'block' => 'div',
                'attributes' => array(
                    'id' => 'respond'
                ),
                'wrapper' => true
            )
        );

    Hope this helps someone else.

  25. Ron says:

    If you guys are worried about your theme being updated then create a child theme for whatever theme you are using. Then add the code into your child theme’s functions file. That’s what child themes are for.

    Alison a quick question.
    I want to add this functionality in my plugin. If whatever theme my customer is using already has the Style Dropdown will this overright, error or add to it?
    Some may be using the Advanced tinymce plugin as well.

    I’m thinking I would need to do an if function exists, but and then what?
    how would I append my codes to the existing styles.

    Great post. I’ve been looking for how to do this.

  26. Darfuria says:

    I have added the code to my functions file, but the styles don’t seem to be applied to the text in the editor / the code doesn’t change. Any suggestions?

    • Cristian Giordano says:

      You will need to create a stylesheet in your theme called editor-style.css then put all of your custom styles in there. if you want to use another named style sheet you can simply call it via the method i.e. add_editor_style( ‘custom-editor-style.css’ );

      or if you want to place it in a sub folder : add_editor_style( ‘lib/css/editor-style.css’ );

      Always read the docs: http://codex.wordpress.org/Function_Reference/add_editor_style

      Hope that helps!

  27. Aesthetic says:

    Just installed your plugin and the demo arrays included work just fine. I’m trying to create a new style rule and I’ve tried several options and can’t seem to find the right combination. What I want is for the client to be able to select some text, pick the Principal style from the pull down and have the selected text wrapped with

            array(        ‘title’ => ‘Principal’,        ‘selector’ => ‘h3′,        ‘classes’ => ‘principal’,        ‘wrapper’ => true        ),

    I’ve tried it also with block or inline but nothing works. I don’t want them to have to make it an H3 and then style it. Is it possible to do what I’m trying?

  28. Lemmonaid says:

    Man, you rules! I was looking for this for a long time!

  29. Any one else tackled the problem of clearing styles? It seems if the user switches between different styles, the plugin will just keep wrapping more and more elements around it, no?

  30. Brett H says:

    I’m trying to do column’s with this, but the merge similar styles thing is just lumping them into one . Even when i set ‘exact’ to true. Any ideas? 

    • George says:

      I am having the same issue. I need to format a large amount of text into a series of divs with the same class. When the divs are applied next to one another, they merge. I also have ‘exact’ set to true.

  31. Ks Zaman says:

    Good helpful example.  http://www.shortcodepress.com here I have implemented a tinumce buttonon editor for wordpress shortcode plugin

  32. Jason says:

     Thank you for putting so much time into this! It is truly appreciated :)

  33. Jilly says:

    Wow. That’s what I was desperately looking for. Works perfect on WP 3.3.1. Thank you man.

  34. Emerson says:

    I’m running 3.3.2 and it doesn’t work. Crashes on activation and has to be manually deleted.

  35. Angela says:

    Amazing! I’ve been looking for this solutions everywhere. thank you.

  36. Is there a way to add a divider line to the styles dropdown?  Extreme case, but say you had 10 color styles followed by 10 size styles, it’d be great to have a visual demarcation between the two.  

  37. is there a way to add a divider between a long list of styles?  stay you had 10 color styles followed by 10 size styles, it’d be nice to have a visual demarcation between the two.  

  38. Also, there should be a way to remove style class you’ve added without remove all formatting.  Do you know if this is possible?

  39. Donald says:

    The Download for the Custom Styles Dropdown didn’t work for my site. In fact, it brought my blog down. I had to delete the plugin manually via FTP in order to get my site back up. Guess it doesnt work with the most recent version of WordPress. Beware.

  40. nobody says:

    So does this not work now? If not you should probably say something at the top of this page so people don’t waste their time …

  41. I’ve updated the plugin. It works with the most recent version of WordPress.

  42. Tom says:

    Alison!

    You freaking rock. I was in my last desperate breathe when I stumbled upon your solution. Here is the last post I placed in wordpress forun: http://wordpress.org/support/topic/themetwenty-eleven-adding-custom-styles-to-tinymce?replies=3#post-3079689

    Question:

    1 – This works great – but can I continue to add styles to the array? (I’m not a programmer)

    2 – Can I rearrange the order of the styles visible – so I can have my custom style come first? Right now it’s “Button”, “Call Out Box”, “Food Title” – which is your third style that I manipulated by changing custom_editor_styles.php.

    Thanks!

    • Yes to both questions!

      Add as many styles as you want and put them in any order desired.

      Thanks!

      • Tom says:

        A few more questions – I appreciate the quick response.

        Tried to add another style to the array – basically copying the Bold Red Text span style and renaming it. Giving me 4 styles in “custom-editor-styles.php”.

        1 – However – the 4th does not show up in the pull down. Here is the code I used (if it copies okay in here):

        public function tiny_mce_before_init( $settings ) {
        $style_formats = array(
        array(
        ‘title’ => ‘Button’,
        ‘selector’ => ‘a’,
        ‘classes’ => ‘button’
        ),
        array(
        ‘title’ => ‘Callout Box’,
        ‘block’ => ‘div’,
        ‘classes’ => ‘callout’,
        ‘wrapper’ => true
        ),
        array(
        ‘title’ => ‘Food Title’,
        ‘inline’ => ‘span’,
        ‘styles’ => array(
        ‘color’ => ‘#f00′,
        ‘fontWeight’ => ‘bold’
        ),
        array(
        ‘title’ => ‘Food Category Title’,
        ‘inline’ => ‘span’,
        ‘styles’ => array(
        ‘color’ => ‘#ff9900′,
        ‘fontSize’ => ’18′
        ),
        ),
        ),
        );

        2 – What is the page “custom-styles.css” used for? I am not understanding it.

        3 – If you update your plugin – My styles are lost again if I am adding them to directly to: “custom-editor-styles.php” – - – is there any way around this?

        Again – I apologize for not being more code adept. I can look and copy and finagle. But if it doesn’t work – I’m a bit lost.

        Thanks!

  43. Olly says:

    Thankyou! I needed to add a custom bullet point class for my client and this was perfect!

    Saved the day!

  44. Niko says:

    Is there a way to leave a blocklevel element to create a new element after it?
    Like the P-Tag handling in WP ….hard return makes a new block soft retun stays in block?

  45. Mart says:

    Sir, you are the man!

  46. anderskitson says:

    I have the following code
    array(
    ‘title’ => ‘header one’,
    ‘block’ => ‘h1′,
    ‘classes’ => ‘superHead’,
    ‘wrapper’ => true
    ),
    However it is not applying a h1 block element to the selected text, do you have any idea why that might be?

  47. Martha S. says:

    Thank you so much for that plug-in. Just what I was looking for — great!

  48. mgason says:

    I am coding in my functions file not using a plugin
    can you specify multiple selectors when using the code
    array(
    ‘title’ => ‘sectionH’,
    ‘selector’ => ‘h1′,
    ‘classes’ => ‘sectionH’
    )
    I want to have a class that can be applied to only headings but all h1 to h6.
    If I have just 1 selector as above it works. I tried writing it a couple of ways, guessing, but i did not work.
    Do I need a separate code block for every one?

  49. meyerbytes says:

    Hi Alison – below is a block of code I’m using on a theme. How would I make it possible to apply that to both ‘p’ and ‘ul’ selectors? Thanks!!

    array(
    ‘title’ => ‘Testimonial’,
    ‘selector’ => ‘p’,
    ‘classes’ => ‘testimonial’,
    ),

  50. econemesis says:

    I created 2 styles, details1 with classes ‘detailsSerif’ and details2 with classes ‘detailsSansSerif’. Both have selector p.
    When I highlight some text and select one of the styles (say details1) it works OK. However if I keep the same text selected and choose the other style details2, the text takes 2 classes instead and in the TinyMCE status bar I see p.detailsSerif detailsSansSerif.

    Is there a way to avoid it and if I choose a style I force it to clear out the other style or class?

  51. Ilya says:

    Thank you very much for your plugin!

  52. Andres Bott says:

    Hi
    this is all i wanted for adding custom format clases to my theme, but every time my theme formats overwite the defaults.
    is there a way to merging both, mine and the default ones?
    thanks a lot fot this great tut.

    • I believe there is a new style_formats_merge option in the TinyMCE editor (as of January 2014) which does this. If you put it before the json_encode line it should add your new styles to the existing:
      $settings['style_formats_merge'] = true; // add to existing formats
      $settings['style_formats'] = json_encode( $style_formats );

      I have used this successfully on a site. Setting it to “false” reverts to the default behaviour, so not much use, but it might make sense to use it as a reminder that merging can be done?

      It is not the only significant change in early 2014 to how this all works, see my other reply below.

  53. Joakim says:

    I’m having problem when I try to wrap these line of codes:
    title

    The result is

    title

    even though I selected the whole text and instructed the style to be a wrapper. I wanted the whole block to be wrapped with the div-tag.
    Any thoughts? It would be greatly appreciated.

  54. John says:

    Thanks for great a tutorial clearly written.

  55. jake_b says:

    I have this KINDA working… the styles are not being applied in the editor itself. I can’t tell for sure from this tutorial whether or not that’s supposed to happen. I added the class to the editor-style.css file, but it still doesn’t change the appearance of the text in the editor – shows up fine on the frontend though.

    • davehouse says:

      I’m wondering the same thing. I’m customising a theme for a client and it would be useful for them to be able to see the styles they’re applying within the visual editor.

    • mgason says:

      They should appear in the editor that is sort of the point of doing it. Are they appearing on the front end?

      • davehouse says:

        Yes, the front end is fine. I’ve hacked my template (twentlyeleven) a lot so maybe I’ve broken its ability to show styles in the visual editor…

  56. Very useful. I’d been using the first method to customise the editor, but this is much better for my clients. However, I found that the custom editor styles were being applied to the public site too. I got round this by making the CSS selectors more specific. As long as a selector starts with ‘body#tinymce’ it will only apply to the visual editor.

  57. Yehuda says:

    Hi,
    This is a much needed script. The only issue I see here is that the custom-styles.css file is loaded even if not in admin mode.
    I’ve changed the code in custom-editor-styles.php line 127 to:
    (Added the if statement to wrap the code)
    public function enqueue_custom_styles() {
    if(is_admin()) {
    wp_enqueue_style(
    ‘custom-editor-styles’,
    $this->plugin_url . ‘/custom-styles.css’,
    array(),
    ’1.1′,
    ‘all’
    );}
    }
    so it is loaded only in none admin mode.
    I am not a php/wordpress programer so I am not sure if that a correct way to do it (though it works and the file is not loaded in none admin mode).
    Can you refer to this issue?
    Thanks for the good plugin,
    Yehuda

  58. Binu says:

    Its great……..

    I have implemented this plugin, it is working nice. But i have one issue.

    array(
    ‘title’ => ‘Warning Box’,
    ‘block’ => ‘div’,
    ‘classes’ => ‘warning box’,
    ‘wrapper’ => true
    ),

    Above code is not inserting a div block in wordpress editor. But if we try to add a ‘span’, it will work. Any idea/solutions ?

  59. Mike says:

    Thank you Alison! I implemented this successfully and referenced the codex on wordpress.org but I have one question, is there a way to adjust the code so when a user chooses a style, then decides to implement another style, it removes the first style. Currently it adds the class to the span tag instead of replacing it. I understand why (so if you want to bold and underline) but I’d like to only use one class instead of multiple. Thanks for any insight!

  60. Steve says:

    Thanks for the great plugin!!

    I’ve hit a small issue which I guess is more tinymce misbehaving – perhaps someone else has solved this?

    I’ve added the code below to wrap a div around FAQ Questions/Answers. It works perfectly on all of them except those that have multiple paragraphs within the answer. Actually they are not “real” paragraphs in the html sense but in the when viewed in the text editor it has a line break between bits of text. So it really wants to wrap a div around each of these fake paragraphs. When I edit the html so the div extends around both, then it respects that in the visual mode but I don’t want my user to have to do that if possible.

    Thanks!


    array(
    ‘title’ => ‘FAQ QA Block’,
    ‘block’ => ‘div’,
    ‘classes’ => ‘faq’
    ),

  61. stefano says:

    Thanks for the plugin! Eorks perfectly. just a question:
    this plugin add new classes to the menu, but how can I remove or hide WP default classes (wp-caption, wp-gallery, alignone, etc…) from the dropdown menu?

    Thanks a lot!!!

  62. Matt says:

    This is great. Though I would prefer a single dropdown solution, this is a wonderful function and works quite well. Thanks for sharing!

  63. Michael says:

    Hello Alison, it’s 2014 and your post still rocks, thanks a lot for it. :)

    I got a little question, is it possible (with hacks or not) to get multiple dropdowns? Would be so awesome to get 3 dropdowns.

    Fontsize | Lineheight | Fontweight.

    At the moment i have all of the three in the style_format dropdown but thats not an optimal solution.

    Would be great if you know a workaround or some tweaks. :)

    greetings

  64. nanja says:

    Hi Alison. I love where this is going but I gotta say, it seems quite buggy in the editor and I don’t understand why.

    Let’s say I start with this:
    array(
    ‘title’ => ‘Column, 1 of 2′,
    ‘block’ => ‘div’,
    ‘classes’ => ‘column_one_of_two’,
    ‘wrap’ => true,
    ‘exact’ => true,
    ),
    and the css would be something like: width:48%; border:1px solid red;

    1. When you use the dropdown in the editor, it creates the red-bordered box as expected and you can type in it. But when you hit ENTER it keeps you in the box forever. No way to exit the box you’ve created unless you deleted it and create a newline first. That’s weird and it causes new problems:

    2. You can’t create another of these boxes inside another one because hitting the toggle twice makes it disappear.

    3. When you create a newline first, create the first box then the second in the newline.. If it doesn’t automatically blend the two boxes into one, which is a horrible bug in itself, then it won’t allow those two boxes to exist without a linefeed or no-breaking space between then. You always have to go to the code section to fix things up.

    How do you deal with the bugginess?

  65. xanaxilovsky says:

    I used ‘inline’ => ‘a’ instead of ‘selector’ => ‘a’ with Button to get it work.

  66. Matt Bryant says:

    This is great, but doing this overrides the default drop downs in TinyMCE. How can I add them back? I tried adding more arrays for paragraphs, and headings, but it doesn’t work if there isn’t a class associated to the element, and I don’t want to add useless classes to my code.

  67. Todd Temple says:

    Finally! I have read at least a dozen articles on how to add this stinking style drop down menu and yours is the first one to actually work. It worked!!!! Even with version 3.9 of WordPress. Thank you so, so much for sharing this info!

  68. lowgenius says:

    It would be super-cool if you could add this to the WP plugin library. I run multiple sites with about 30 plugins, and this is the only one I can’t tag as a “favorite” so I can make sure to include it in new site installs or subsites. Please consider, and thanks for a great little tool and tutorial.

  69. Thanks for the tip! Just saved me so much time!

  70. Great stuff! wery helpful, thank you!

Link Love

  1. How to Add Buttons and CSS Classes to TinyMCE : WP Mayor
  2. Mastering the TinyMCE Styles Dropdown in the WordPress Visual Editor | WpMash - WordPress News
  3. What to do about shortcodes? | unhack WP
  4. Some ways to customise the WordPress Visual Editor and HTML Editor | things with bits - frances d'ath
  5. Warren Held.com » Add Custom CSS Styles to WordPress Editor
  6. Wordpress: utilizziamo stili personalizzati con l’editor visuale predefinito « Il blog di MrDot
  7. WPSmith | How to Add Genesis Custom Columns to the Editor (to Appear in Visual Mode)
  8. TinyMCE Styles Dropdown | Nick Hamze
  9. What to do about shortcodes? | Nick Hamze
  10. Post editor – TinyMCE | WordPress
  11. Updated/Fixed: TinyMCE Custom Styles Dropdown Plugin | Aliso the Geek
  12. Using the WordPress Settings (Theme Options) API - Jean Galea | Web Designer and Developer in Malta | WordPress Consultant
  13. Useful Wordpress Snippets for Functions file | FLDtrace
  14. Add the Styles dropdown to the toolbar | question code
  15. Eigene CSS-Klassen im TinyMCE von WordPress | automatix' blog
  16. WordPress Custom Styling via the TinyMCE Editor | WNT Library
  17. n2_add_styles_to_tinymce – ThemeAvenue Support
  18. » Adding Custom Styles via the Wordpress Visual Editor Sameer Siruguri's Blog
  19. Add A Style Sheet Drop Down Menu to WordPress TinyMCE Editor | Queen of WordPress
  20. Adding custom classes to WordPress | uNeedStuff
  21. WordPress – Styles für den Editor hinzufügen | Moku.NET
  22. Adding Custom Styles to the MCE dropdown toolbar - WordPress BuddyPress Tweaks
  23. WordPress links | My Blog
  24. Adding Custom Styles to the MCE dropdown toolbar - HelpDesk