Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A plugin to modify the TinyMCE editor in WordPress 3.9+. Now available on WP.org! https://wordpress.org/plugins/mrw-web-design-simple-tinymce/
<?php
/**
* Example filter to add text style to TinyMCE filter with Mark's "MRW TinyMCE Mods" plugin
*
* Adds a "Text Styles" submenu to the "Formats" dropdown
*
* This would go in a functions.php file or mu-plugin so you don't have to modify the original plugin.
*
* $styles array Contains arrays of style_format arguments to define styles.
* Note: Should be an "array of arrays"
*
* see tinymce.com/wiki.php/Configuration:style_formats
* see also tinymce.com/wiki.php/Configuration:formats
* see also also wordpress.stackexchange.com/a/128950/9844
*/
add_filter( 'mrw_mce_text_style', 'mrw_add_text_styles_example' );
function mrw_add_text_styles_example( $styles ) {
$new_styles = array(
/* Inline style that only applies to links */
array(
'title' => "Link Button", /* Label in "Formats" menu */
'selector' => 'a', /* this style can ONLY be applied to existing <a> elements in the selection! */
'classes' => 'button' /* class to add, could be multiple, space-separated */
),
/* Inline style applied with a <span> */
array(
'title' => "Callout Text",
'inline' => 'span',
'classes' => 'callout'
),
/* Block style applied to paragraph. Each paragraph in selection gets the classes. */
array(
'title' => "Warning Message",
'block' => 'p',
'classes' => 'message warning'
),
/* Block style capable of containing other block-level elemeents */
array(
'title' => "Feature Box",
'block' => 'section',
'classes' => 'feature-box',
'wrapper' => true
)
);
return array_merge( $styles, $new_styles );
}
Now available in the WordPress.org Plugin Repository: https://wordpress.org/plugins/mrw-web-design-simple-tinymce/
@charles-e-i

This comment has been minimized.

Copy link

commented May 7, 2014

Thanks a million! I've been driving myself crazy for the last 2 days trying to figure this out. Not much info on version 4 out there. Question: Any idea how to get colours to work in the formats dropdown? This doesn't work anymore either:

'color' => '#5a6c00'

Charles

@mrwweb

This comment has been minimized.

Copy link
Owner Author

commented May 9, 2014

(You'd think github would notify me of comments on my own gists... just seeing this now.)

Check out the links in the comments of the plugin file. In particular, I wonder if you can use the "style" attribute mentioned TinyMCE formats documentation page. I'm not quite sure how it works even, but seems like it wants something likes this

array(
  //other $atts
  'style' => array(
    'color' => '#5a6c00'
  )
)
@charles-e-i

This comment has been minimized.

Copy link

commented May 14, 2014

Can't seem to get anything in 'style' to work. None of this does anything.

''style' => array (
'lineHeight' => '1.3em',
'color' => 'red',
'fontWeight' => 'bold'
)'`

It's strange because here he shows a screen shot of the color working, but it doesn't work for me;
http://wordpress.stackexchange.com/questions/128931/tinymce-adding-css-to-format-dropdown/128950#128950

The other odd thing is that his definition says that 'inline' adds the tags but 'inline' => 'h1' does nothing, whereas the way you have it 'format' => 'h1' does for h1 - but 'format' => 'p' doesn't add p tags for me. Doesn't work with 'inline' => 'p' either.

@mrwweb

This comment has been minimized.

Copy link
Owner Author

commented May 14, 2014

I updated the example filter a bit. I hope that helps clarify things a bit.

@mrwweb

This comment has been minimized.

Copy link
Owner Author

commented May 15, 2014

Also, since p is a block element element, make sure you're doing 'block' => 'p' for the text styles filter.

@cbournak

This comment has been minimized.

Copy link

commented Jul 14, 2014

Can the table button controls be added? I tried adding 'tablecontrols' and/or 'table' to 'mce_buttons' or 'mce_buttons_2' but it didn't seem to work.

@bryanwillis

This comment has been minimized.

Copy link

commented Jul 28, 2014

This example causes duplicate styles dropdowns if other plugins add stuff ( like enlighter plugin )
You guys should try using https://wordpress.org/plugins/advanced-tinymce-configuration/

@ryanderson

This comment has been minimized.

Copy link

commented Jul 31, 2014

I've been using this for months now and it's worked perfectly...but now I need the Anchor button so I added 'anchor' to the $buttons array...but it does not display? Is there something special about the Anchor button that needs to be different? Also, is this the full list of buttons that can be added?: http://www.tinymce.com/wiki.php/Controls

@mrwweb

This comment has been minimized.

Copy link
Owner Author

commented Aug 20, 2014

@cbournak Check out @ryanderson's (I think that's whose it is) question on WPSE. I believe the table buttons suffer from the same issue in that WordPress doesn't include that TinyMCE plugin by default. You'll probably need a plugin like MCE Table Buttons to get it working. (And for the record, I much prefer using TablePress as it discourages users from getting all layout-happy with their tables.)

@mrwweb

This comment has been minimized.

Copy link
Owner Author

commented Aug 20, 2014

@bryanwillis You're right that that's a limitation of this plugin which I mostly made for personal use. I prefer the styleselect for it's custom text styles functions that aren't available in the Formatselect.

@mrwweb

This comment has been minimized.

Copy link
Owner Author

commented Mar 13, 2015

For anyone who missed it above, this is now a plugin: https://wordpress.org/plugins/mrw-web-design-simple-tinymce/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.