Skip to content

Instantly share code, notes, and snippets.

@mrwweb
Last active September 1, 2022 19:11
Show Gist options
  • Save mrwweb/9937127 to your computer and use it in GitHub Desktop.
Save mrwweb/9937127 to your computer and use it in GitHub Desktop.
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/
@mrwweb
Copy link
Author

mrwweb 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
Copy link
Author

mrwweb 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
Copy link
Author

mrwweb 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