editing the visual editor (wordpress)
DESCRIPTION
WordPress’s visual content editor (TinyMCE) is one of many elements that contribute to the power of its content management capabilities. You can tailor this tool to be even more powerful both in its capabilities as they relate to your content. This presentation will cover adding custom stylesheets based on post type to the editor, modifying and removing buttons from the editor, and even creating your own custom buttons for the TinyMCE toolbar. It even covers brand new WordPress 3.3 techniques introduced with the new wp_editor function. Intended for developers, this introduces new ideas and techniques to even the most experienced programmers, while also providing newer developers a good sense of how to use WordPress hooks in creative and powerful ways. This was presented to developers at several WordCamps (WordPress conferences) around the country, notably the 2011 WordCamps for Chicago, Philly, and Orlando.TRANSCRIPT
![Page 1: Editing the Visual Editor (WordPress)](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5558c668d8b42a995d8b4762/html5/thumbnails/1.jpg)
Editing the Visual Editor
Editing the Visual Editor
![Page 2: Editing the Visual Editor (WordPress)](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5558c668d8b42a995d8b4762/html5/thumbnails/2.jpg)
Editing the Visual Editor
About Me: Jake Goldman
• President (& chief engineer!) @ 10up LLC, a WordPress development & strategy agency
• Author of over a dozen WordPress plug-ins• Dozens of clients, from university like Bates
College to WP.com VIP clients like TechCrunch• Writer/expert reviewer @ Smashing Magazine• @jakemgold
![Page 3: Editing the Visual Editor (WordPress)](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5558c668d8b42a995d8b4762/html5/thumbnails/3.jpg)
Editing the Visual Editor
About You: Why You’re Here
![Page 4: Editing the Visual Editor (WordPress)](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5558c668d8b42a995d8b4762/html5/thumbnails/4.jpg)
Editing the Visual Editor
Hypothesis #1
The styling of content in your editor should at least somewhat match the styling of content on
your page.
!=
![Page 5: Editing the Visual Editor (WordPress)](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5558c668d8b42a995d8b4762/html5/thumbnails/5.jpg)
Editing the Visual Editor
Hypothesis #2
Different kinds of content (post types) often have different styling.
!=
![Page 6: Editing the Visual Editor (WordPress)](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5558c668d8b42a995d8b4762/html5/thumbnails/6.jpg)
Editing the Visual Editor
Hypothesis #3WordPress does a pretty good job of knowing how to clean up our authors’ messes, but we
know our authors even better.
![Page 7: Editing the Visual Editor (WordPress)](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5558c668d8b42a995d8b4762/html5/thumbnails/7.jpg)
Editing the Visual Editor
Hypothesis #4Sometimes we need more ways to style content
than we currently have.
How do I apply a “specifications” style??
![Page 8: Editing the Visual Editor (WordPress)](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5558c668d8b42a995d8b4762/html5/thumbnails/8.jpg)
Editing the Visual Editor
Hypothesis #5Sometimes we need to put editor-like content in
more than one place.
![Page 9: Editing the Visual Editor (WordPress)](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5558c668d8b42a995d8b4762/html5/thumbnails/9.jpg)
Editing the Visual Editor
Does this guy expect me to
remember this?
Hypothesis #6“Shortcodes” alone are not intuitive solutions for special features, and are not discoverable.
![Page 10: Editing the Visual Editor (WordPress)](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5558c668d8b42a995d8b4762/html5/thumbnails/10.jpg)
Editing the Visual Editor
Solution #1: Style Your Editor
![Page 11: Editing the Visual Editor (WordPress)](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5558c668d8b42a995d8b4762/html5/thumbnails/11.jpg)
Editing the Visual Editor
Solution #1: Style Your Editor
add_action( ‘after_theme_setup’, ‘eve_theme_setup’ );
function eve_theme_setup() { add_editor_style();}
( functions.php )
![Page 12: Editing the Visual Editor (WordPress)](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5558c668d8b42a995d8b4762/html5/thumbnails/12.jpg)
Editing the Visual Editor
Solution #1: Style Your Editor
add_action( ‘after_theme_setup’, ‘eve_theme_setup’ );
function eve_theme_setup() { add_editor_style();}
( functions.php )
Hook is non-essential, but good form.
![Page 13: Editing the Visual Editor (WordPress)](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5558c668d8b42a995d8b4762/html5/thumbnails/13.jpg)
Editing the Visual Editor
Solution #1: Style Your Editor
html .mceContentBody { max-width:550px; }body.mceContentBody { font-family: 'lucida grande',sans-serif; color: #555; }p,ul,ol,h4,h5,h6 { line-height:20px; margin: 0 0 20px 0; font-size:13px; }...
![Page 14: Editing the Visual Editor (WordPress)](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5558c668d8b42a995d8b4762/html5/thumbnails/14.jpg)
Editing the Visual Editor
Tip: matching the editor body width to the content width on the front end makes a big
difference in designing content!
Solution #1: Style Your Editor
html .mceContentBody { max-width:550px; }body.mceContentBody { font-family: 'lucida grande',sans-serif; color: #555; }p,ul,ol,h4,h5,h6 { line-height:20px; margin: 0 0 20px 0; font-size:13px; }...
![Page 15: Editing the Visual Editor (WordPress)](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5558c668d8b42a995d8b4762/html5/thumbnails/15.jpg)
Editing the Visual Editor
Solution #2: Style Based on Post Type
add_action( 'do_meta_boxes', 'eve_setup_other_stylesheets' );
function eve_setup_other_stylesheets( $post_type ) {if ( $post_type == 'page' ) {
remove_editor_styles();add_editor_style( 'editor-style-page.css' );
}
remove_action('do_meta_boxes','eve_setup_other_stylesheets‘);}
( functions.php )
![Page 16: Editing the Visual Editor (WordPress)](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5558c668d8b42a995d8b4762/html5/thumbnails/16.jpg)
Editing the Visual Editor
Solution #2: Style Based on Post Type
add_action( 'do_meta_boxes', 'eve_setup_other_stylesheets' );
function eve_setup_other_stylesheets( $post_type ) {if ( $post_type == 'page' ) {
remove_editor_styles();add_editor_style( 'editor-style-page.css' );
}
remove_action('do_meta_boxes','eve_setup_other_stylesheets‘);}
( functions.php )
Note #1: We don’t have to use this hook. But it’s
pretty convenient.
![Page 17: Editing the Visual Editor (WordPress)](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5558c668d8b42a995d8b4762/html5/thumbnails/17.jpg)
Editing the Visual Editor
Solution #2: Style Based on Post Type
add_action( 'do_meta_boxes', 'eve_setup_other_stylesheets' );
function eve_setup_other_stylesheets( $post_type ) {if ( $post_type == 'page' ) {
remove_editor_styles();add_editor_style( 'editor-style-page.css' );
}
remove_action('do_meta_boxes','eve_setup_other_stylesheets‘);}
( functions.php )
Note #2: We don’t have to remove styles. We can add multiple editor styles.
![Page 18: Editing the Visual Editor (WordPress)](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5558c668d8b42a995d8b4762/html5/thumbnails/18.jpg)
Editing the Visual Editor
Solution #2: Style Based on Post Type
add_action( 'do_meta_boxes', 'eve_setup_other_stylesheets' );
function eve_setup_other_stylesheets( $post_type ) {if ( $post_type == 'page' ) {
remove_editor_styles();add_editor_style( 'editor-style-page.css' );
}
remove_action('do_meta_boxes','eve_setup_other_stylesheets‘);}
( functions.php )
Note #3: This concept applies to all our
TinyMCE / editor tips!
![Page 19: Editing the Visual Editor (WordPress)](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5558c668d8b42a995d8b4762/html5/thumbnails/19.jpg)
Editing the Visual Editor
Solution #3: Modify Allowed Post Tags
Save
![Page 20: Editing the Visual Editor (WordPress)](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5558c668d8b42a995d8b4762/html5/thumbnails/20.jpg)
Editing the Visual Editor
Solution #3: Modify Allowed Post Tags
add_action( 'init', 'eve_modify_allowed_post_tags' );
function eve_modify_allowed_post_tags() {global $allowedposttags;unset( $allowedposttags['blockquote'] );
}
( functions.php )
![Page 21: Editing the Visual Editor (WordPress)](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5558c668d8b42a995d8b4762/html5/thumbnails/21.jpg)
Editing the Visual Editor
Solution #3: Modify Allowed Post Tags
add_action( 'init', 'eve_modify_allowed_post_tags' );
function eve_modify_allowed_post_tags() {global $allowedposttags;unset( $allowedposttags['blockquote'] );
}
( functions.php )
Don’t forget!
Users with unfiltered_html capabilities (editors & admins) are not filtered by this. If
you really want to rid all users of this element, you’ll need to remove that capability from the
role or filter content elsewhere.
![Page 22: Editing the Visual Editor (WordPress)](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5558c668d8b42a995d8b4762/html5/thumbnails/22.jpg)
Editing the Visual Editor
Solution #4: Remove editor buttons
![Page 23: Editing the Visual Editor (WordPress)](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5558c668d8b42a995d8b4762/html5/thumbnails/23.jpg)
Editing the Visual Editor
Solution #4: Remove editor buttons
add_filter( 'mce_buttons', 'eve_mce_buttons' );
function eve_mce_buttons( $buttons ) {if ( $button_key = array_search( 'blockquote', $buttons ) )
unset( $buttons[$button_key] );
return $buttons;}
( functions.php )
![Page 24: Editing the Visual Editor (WordPress)](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5558c668d8b42a995d8b4762/html5/thumbnails/24.jpg)
Editing the Visual Editor
Solution #4b: Manage full screen buttons
Introduced in WordPress 3.2
![Page 25: Editing the Visual Editor (WordPress)](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5558c668d8b42a995d8b4762/html5/thumbnails/25.jpg)
Editing the Visual Editor
Solution #4b: Manage full screen buttons
add_filter( 'wp_fullscreen_buttons', 'eve_fullscreen_buttons' );
function eve_fullscreen_buttons( $buttons ) {if ( isset( $buttons['blockquote'] ) )
unset( $buttons['blockquote'] );
return $buttons;}
( functions.php )
![Page 26: Editing the Visual Editor (WordPress)](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5558c668d8b42a995d8b4762/html5/thumbnails/26.jpg)
Editing the Visual Editor
Solution #5: Add a style drop down
![Page 27: Editing the Visual Editor (WordPress)](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5558c668d8b42a995d8b4762/html5/thumbnails/27.jpg)
Editing the Visual Editor
Step 1: Add style dropdown control
Solution #5: Add a style drop down
add_filter( 'mce_buttons_2', 'eve_mce_buttons_style_drop' );
function eve_mce_buttons_style_drop( $buttons ) {array_unshift( $buttons, 'styleselect' );return $buttons;
}
( functions.php )
![Page 28: Editing the Visual Editor (WordPress)](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5558c668d8b42a995d8b4762/html5/thumbnails/28.jpg)
Editing the Visual Editor
Step 2: Specify style names and classes
Solution #5: Add a style drop down
add_filter( 'tiny_mce_before_init', 'eve_add_mce_styles‘ );
function eve_add_mce_styles( $init ) {$init['theme_advanced_styles'] = 'Specifications=specs,Big
Warning=warning,Special Feature=special';return $init;
}
( functions.php )
![Page 29: Editing the Visual Editor (WordPress)](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5558c668d8b42a995d8b4762/html5/thumbnails/29.jpg)
Editing the Visual Editor
Solution #6: Add another editor
Newly easy in WordPress 3.3!
![Page 30: Editing the Visual Editor (WordPress)](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5558c668d8b42a995d8b4762/html5/thumbnails/30.jpg)
Editing the Visual Editor
add_action( 'do_meta_boxes', 'eve_setup_editor_meta_box' );
function eve_setup_editor_meta_box() {add_meta_box( 'eve_second_editor', 'Sidebar', 'eve_editor_meta_box',
'page' );}
function eve_editor_meta_box( $post ) {$content = get_post_meta( $post->ID, '_eve_second_html', true );wp_nonce_field( 'eve_nonce_action', '_eve_nonce_name' );wp_editor( $content, 'eve_second_html', array(
'media_buttons' => false, ));
}
add_action( 'save_post', 'eve_save_second_editor' );
function eve_save_second_editor( $post_id ) {[ various checks for capability / nonce / etc ]$meta = empty( $_POST['eve_second_html'] ) ?
delete_post_meta( $post_id, '_eve_second_html' ) : update_post_meta( $post_id, '_eve_second_html',
wp_kses_post( $_POST['eve_second_html'] ) );}
( functions.php )
![Page 31: Editing the Visual Editor (WordPress)](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5558c668d8b42a995d8b4762/html5/thumbnails/31.jpg)
Editing the Visual Editor
'wpautop' => true, // use wpautop?'media_buttons' => true, // show insert/upload button(s)'textarea_name' => $editor_id, // set the textarea name to something different, square brackets [] can be used here'textarea_rows' => get_option('default_post_edit_rows', 10), // rows="..."'tabindex' => '','editor_css' => '', // intended for extra styles for both visual and HTML editors buttons, needs to include the <style> tags, can use "scoped".'editor_class' => '', // add extra class(es) to the editor textarea'teeny' => false, // output the minimal editor config used in Press
This'dfw' => false, // replace the default fullscreen with DFW (needs specific DOM elements and css)'tinymce' => true, // load TinyMCE, can be used to pass settings directly to TinyMCE using an array()'quicktags' => true // load Quicktags, can be used to pass settings
directly to Quicktags using an array()
Power of wp_editor()
( wp-includes/class-wp-editor.php )
![Page 32: Editing the Visual Editor (WordPress)](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5558c668d8b42a995d8b4762/html5/thumbnails/32.jpg)
Editing the Visual Editor
'wpautop' => true, // use wpautop?'media_buttons' => true, // show insert/upload button(s)'textarea_name' => $editor_id, // set the textarea name to something different, square brackets [] can be used here'textarea_rows' => get_option('default_post_edit_rows', 10), // rows="..."'tabindex' => '','editor_css' => '', // intended for extra styles for both visual and HTML editors buttons, needs to include the <style> tags, can use "scoped".'editor_class' => '', // add extra class(es) to the editor textarea'teeny' => false, // output the minimal editor config used in Press
This'dfw' => false, // replace the default fullscreen with DFW (needs specific DOM elements and css)'tinymce' => true, // load TinyMCE, can be used to pass settings directly to TinyMCE using an array()'quicktags' => true // load Quicktags, can be used to pass settings
directly to Quicktags using an array()
Power of wp_editor()
( wp-includes/class-wp-editor.php )
Whoa
![Page 33: Editing the Visual Editor (WordPress)](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5558c668d8b42a995d8b4762/html5/thumbnails/33.jpg)
Editing the Visual Editor
Solution #7: A button for your shortcode
My button!
![Page 34: Editing the Visual Editor (WordPress)](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5558c668d8b42a995d8b4762/html5/thumbnails/34.jpg)
Editing the Visual Editor
Step 1: Make your TinyMCE plug-in
Solution #7: A button for your shortcode
![Page 35: Editing the Visual Editor (WordPress)](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5558c668d8b42a995d8b4762/html5/thumbnails/35.jpg)
Editing the Visual Editor
(function() { tinymce.create('tinymce.plugins.eve_mail', { init : function(ed, url) { ed.addButton('eve_mail', { title : 'Add a protected email address', image : url+'/mail_icon.png', onclick : function() { var selected_mail = ed.selection.getContent(); if ( selected_mail == '' ) selected_mail = 'enter email'; ed.execCommand( 'mceInsertContent', false,
'[mailto]'+selected_mail+'[/mailto]' ); }
}); }, createControl : function(n, cm) { return null; }, getInfo : function() { return { longname : "Safe Email Address Link", author : 'Jake Goldman (10up)', authorurl : 'http://www.get10up.com/', infourl : 'http://www.get10up.com/', version : "1.0" }; } }); tinymce.PluginManager.add('eve_mail', tinymce.plugins.eve_mail);})();
![Page 36: Editing the Visual Editor (WordPress)](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5558c668d8b42a995d8b4762/html5/thumbnails/36.jpg)
Editing the Visual Editor
(function() { tinymce.create('tinymce.plugins.eve_mail', { init : function(ed, url) { ed.addButton('eve_mail', { title : 'Add a protected email address', image : url+'/mail_icon.png', onclick : function() { var selected_mail = ed.selection.getContent(); if ( selected_mail == '' ) selected_mail = 'enter email'; ed.execCommand( 'mceInsertContent', false,
'[mailto]'+selected_mail+'[/mailto]' ); }
}); }, createControl : function(n, cm) { return null; }, getInfo : function() { return { longname : "Safe Email Address Link", author : 'Jake Goldman (10up)', authorurl : 'http://www.get10up.com/', infourl : 'http://www.get10up.com/', version : "1.0" }; } }); tinymce.PluginManager.add('eve_mail', tinymce.plugins.eve_mail);})();
Learn more about making TinyMCE plug-ins / buttons:
http://tinymce.moxiecode.com/tryit/listbox_splitbutton.php
http://www.ilovecolors.com.ar/tinymce-plugin-wordpress/
![Page 37: Editing the Visual Editor (WordPress)](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5558c668d8b42a995d8b4762/html5/thumbnails/37.jpg)
Editing the Visual Editor
Step 2: Register your plug-in with TinyMCE
Solution #7: A button for your shortcode
add_filter('mce_external_plugins','eve_add_mail_shortcode_plugin');
function eve_add_mail_shortcode_plugin( $plugin_array ) {$plugin_array['eve_mail'] = get_stylesheet_directory_uri() .
'/editor_buttons/editor_plugin.js';return $plugin_array;
}
( functions.php )
![Page 38: Editing the Visual Editor (WordPress)](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5558c668d8b42a995d8b4762/html5/thumbnails/38.jpg)
Editing the Visual Editor
Step 3: Add your button to the editor
Solution #7: A button for your shortcode
add_filter( 'mce_buttons', 'even_add_mail_shortcode_button');
function even_add_mail_shortcode_button( $buttons ) {array_push( $buttons, "|", "eve_mail" );return $buttons;
}
( functions.php )
![Page 39: Editing the Visual Editor (WordPress)](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5558c668d8b42a995d8b4762/html5/thumbnails/39.jpg)
Editing the Visual Editor
Solution #7: A button for your shortcode
![Page 40: Editing the Visual Editor (WordPress)](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5558c668d8b42a995d8b4762/html5/thumbnails/40.jpg)
Editing the Visual Editor
Power Tip: Style the fullscreen editor
![Page 41: Editing the Visual Editor (WordPress)](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5558c668d8b42a995d8b4762/html5/thumbnails/41.jpg)
Editing the Visual Editor
add_action( 'admin_print_styles-post-new.php', 'eve_fullscreen_styles' );add_action('admin_print_styles-post.php','eve_fullscreen_styles');
function eve_fullscreen_styles() { ?><style type="text/css"> .fullscreen-active #wp-fullscreen-title { font-family: Georgia; font-size: 40px; }</style><?php }
( functions.php )
Power Tip: Style the fullscreen editor
![Page 42: Editing the Visual Editor (WordPress)](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5558c668d8b42a995d8b4762/html5/thumbnails/42.jpg)
Editing the Visual Editor
Remember: can be post type specific!
Bonus Tip: Default Content
add_filter( 'default_content', ‘eve_editor_content' );
function my_editor_content( $content ) {$content = “<h2>Subtitle</h2>\n\nStart writing!";return $content;
}
( functions.php )
![Page 43: Editing the Visual Editor (WordPress)](https://reader036.vdocuments.mx/reader036/viewer/2022062418/5558c668d8b42a995d8b4762/html5/thumbnails/43.jpg)
Editing the Visual Editor
Editing the Visual Editor
by Jake Goldman
@jakemgold
slides & code will be available at get10up.com