Editing the Visual Editor                     Editing the Visual Editor
About Me: Jake Goldman• President (& chief engineer!) @ 10up LLC, a  WordPress development & strategy agency• Author of ov...
About You: Why You’re Here                     Editing the Visual Editor
Hypothesis #1 The styling of content in your editor should atleast somewhat match the styling of content on               ...
Hypothesis #2Different kinds of content (post types) often            have different styling.                    !=       ...
Hypothesis #3WordPress does a pretty good job of knowinghow to clean up our authors’ messes, but we       know our authors...
Hypothesis #4Sometimes we need more ways to style content          than we currently have.                             How...
Hypothesis #5Sometimes we need to put editor-like content         in more than one place.                                 ...
Hypothesis #6“Shortcodes” alone are not intuitive solutionsfor special features, and are not discoverable.Does this guyexp...
Solution #1: Style Your Editor                        Editing the Visual Editor
Solution #1: Style Your Editor                                                          ( functions.php )add_action( ‘afte...
Solution #1: Style Your Editor                                                          ( functions.php )add_action( ‘afte...
Solution #1: Style Your Editorhtml .mceContentBody { max-width:550px; }body.mceContentBody {    font-family: lucida grande...
Solution #1: Style Your Editor  Tip: matching the editor body width to the  content width on the front end makes a big    ...
Solution #2: Style Based on Post Type                                                           ( functions.php )add_actio...
Solution #2: Style Based on Post Type                                                           ( functions.php )add_actio...
Solution #2: Style Based on Post Type                                                           ( functions.php )add_actio...
Solution #2: Style Based on Post Type                                                           ( functions.php )add_actio...
Solution #3: Modify Allowed Post Tags                 Save                            Editing the Visual Editor
Solution #3: Modify Allowed Post Tags                                                          ( functions.php )add_action...
Solution #3: Modify Allowed Post Tags                         Don’t forget!                                               ...
Solution #4: Remove editor buttons                          Editing the Visual Editor
Solution #4: Remove editor buttons                                                          ( functions.php )add_filter( m...
Solution #4b: Manage full screen            buttons      Introduced in WordPress 3.2                                    Ed...
Solution #4b: Manage full screen                 buttons                                                          ( functi...
Solution #5: Add a style drop down                         Editing the Visual Editor
Solution #5: Add a style drop down   Step 1: Add style dropdown control                       ( functions.php )add_filter(...
Solution #5: Add a style drop downStep 2: Specify style names and classes                   ( functions.php )add_filter( t...
Solution #6: Add another editor  Newly easy in  WordPress 3.3!                        Editing the Visual Editor
( functions.php )add_action( do_meta_boxes, eve_setup_editor_meta_box );function eve_setup_editor_meta_box() {   add_meta_...
Power of wp_editor()wpautop => true, // use wpautop?media_buttons => true, // show insert/upload button(s)textarea_name =>...
Power of wp_editor()wpautop => true, // use wpautop?media_buttons => true, // show insert/upload button(s)textarea_name =>...
Solution #7: A button for your          shortcode                   My button!                          Editing the Visual...
Solution #7: A button for your           shortcodeStep 1: Make your TinyMCE plug-in                                    Edi...
(function() {    tinymce.create(tinymce.plugins.eve_mail, {        init : function(ed, url) {            ed.addButton(eve_...
(function() {    tinymce.create(tinymce.plugins.eve_mail, {        init : function(ed, url) {            ed.addButton(eve_...
Solution #7: A button for your                 shortcodeStep 2: Register your plug-in with TinyMCE                ( functi...
Solution #7: A button for your                 shortcode   Step 3: Add your button to the editor                  ( functi...
Solution #7: A button for your          shortcode                        Editing the Visual Editor
Power Tip: Style the fullscreen editor                            Editing the Visual Editor
Power Tip: Style the fullscreen editor                                                          ( functions.php )add_actio...
Bonus Tip: Default Content   Remember: can be post type specific!                   ( functions.php )add_filter( default_c...
Editing the Visual Editor          by Jake Goldman            @jakemgold  slides & code will be available at            ge...
Upcoming SlideShare
Loading in...5
×

Editing the Visual Editor (WordPress)

10,256

Published on

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.

Published in: Technology, Business
1 Comment
6 Likes
Statistics
Notes
  • What if a styleselect is added in a theme, but a plugin also attempts to add a styleselect? From what I see, the visual editor breaks.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
10,256
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
44
Comments
1
Likes
6
Embeds 0
No embeds

No notes for slide

Editing the Visual Editor (WordPress)

  1. 1. Editing the Visual Editor Editing the Visual Editor
  2. 2. 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 Editing the Visual Editor
  3. 3. About You: Why You’re Here Editing the Visual Editor
  4. 4. Hypothesis #1 The styling of content in your editor should atleast somewhat match the styling of content on your page. != Editing the Visual Editor
  5. 5. Hypothesis #2Different kinds of content (post types) often have different styling. != Editing the Visual Editor
  6. 6. Hypothesis #3WordPress does a pretty good job of knowinghow to clean up our authors’ messes, but we know our authors even better. Editing the Visual Editor
  7. 7. Hypothesis #4Sometimes we need more ways to style content than we currently have. How do I apply a “specifications” style?? Editing the Visual Editor
  8. 8. Hypothesis #5Sometimes we need to put editor-like content in more than one place. Editing the Visual Editor
  9. 9. Hypothesis #6“Shortcodes” alone are not intuitive solutionsfor special features, and are not discoverable.Does this guyexpect me to remember this? Editing the Visual Editor
  10. 10. Solution #1: Style Your Editor Editing the Visual Editor
  11. 11. Solution #1: Style Your Editor ( functions.php )add_action( ‘after_theme_setup’, ‘eve_theme_setup’ );function eve_theme_setup() { add_editor_style();} Editing the Visual Editor
  12. 12. Solution #1: Style Your Editor ( functions.php )add_action( ‘after_theme_setup’, ‘eve_theme_setup’ );function eve_theme_setup() { add_editor_style();} Hook is non-essential, but good form. Editing the Visual Editor
  13. 13. Solution #1: Style Your Editorhtml .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;}... Editing the Visual Editor
  14. 14. Solution #1: Style Your Editor Tip: matching the editor body width to the content width on the front end makes a big difference in designing content!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;}... Editing the Visual Editor
  15. 15. Solution #2: Style Based on Post Type ( functions.php )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‘);} Editing the Visual Editor
  16. 16. Solution #2: Style Based on Post Type ( functions.php )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 ); } Note #1: We don’t have remove_action(do_meta_boxes,eve_setup_other_stylesheets‘);} to use this hook. But it’s pretty convenient. Editing the Visual Editor
  17. 17. Solution #2: Style Based on Post Type ( functions.php )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‘);}Note #2: We don’t have to remove styles. We can add multiple editor styles. Editing the Visual Editor
  18. 18. Solution #2: Style Based on Post Type ( functions.php )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 ); } Note #3: This concept applies to all our remove_action(do_meta_boxes,eve_setup_other_stylesheets‘);} TinyMCE / editor tips! Editing the Visual Editor
  19. 19. Solution #3: Modify Allowed Post Tags Save Editing the Visual Editor
  20. 20. Solution #3: Modify Allowed Post Tags ( functions.php )add_action( init, eve_modify_allowed_post_tags );function eve_modify_allowed_post_tags() { global $allowedposttags; unset( $allowedposttags[blockquote] );} Editing the Visual Editor
  21. 21. Solution #3: Modify Allowed Post Tags Don’t forget! ( functions.php ) Users with unfiltered_html capabilitiesadd_action( init, eve_modify_allowed_post_tags ); (editors & admins) are not filtered by this. Iffunction eve_modify_allowed_post_tags() { global $allowedposttags; rid all users of this element, you really want to unset( $allowedposttags[blockquote] );} you’ll need to remove that capability from the role or filter content elsewhere. Editing the Visual Editor
  22. 22. Solution #4: Remove editor buttons Editing the Visual Editor
  23. 23. Solution #4: Remove editor buttons ( functions.php )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;} Editing the Visual Editor
  24. 24. Solution #4b: Manage full screen buttons Introduced in WordPress 3.2 Editing the Visual Editor
  25. 25. Solution #4b: Manage full screen buttons ( functions.php )add_filter( wp_fullscreen_buttons, eve_fullscreen_buttons );function eve_fullscreen_buttons( $buttons ) { if ( isset( $buttons[blockquote] ) ) unset( $buttons[blockquote] ); return $buttons;} Editing the Visual Editor
  26. 26. Solution #5: Add a style drop down Editing the Visual Editor
  27. 27. Solution #5: Add a style drop down Step 1: Add style dropdown control ( functions.php )add_filter( mce_buttons_2, eve_mce_buttons_style_drop );function eve_mce_buttons_style_drop( $buttons ) { array_unshift( $buttons, styleselect ); return $buttons;} Editing the Visual Editor
  28. 28. Solution #5: Add a style drop downStep 2: Specify style names and classes ( functions.php )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;} Editing the Visual Editor
  29. 29. Solution #6: Add another editor Newly easy in WordPress 3.3! Editing the Visual Editor
  30. 30. ( functions.php )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] ) );} Editing the Visual Editor
  31. 31. Power of wp_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 heretextarea_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 textareateeny => false, // output the minimal editor config used in Press Thisdfw => 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() Editing the Visual Editor ( wp-includes/class-wp-editor.php )
  32. 32. Power of wp_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 heretextarea_rows => get_option(default_post_edit_rows, 10), // rows="..."tabindex => ,editor_css => , // intended for extra styles for both visual Whoa and HTML editors buttons, needs to include the <style> tags, can use "scoped".editor_class => , // add extra class(es) to the editor textareateeny => false, // output the minimal editor config used in Press Thisdfw => 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() Editing the Visual Editor ( wp-includes/class-wp-editor.php )
  33. 33. Solution #7: A button for your shortcode My button! Editing the Visual Editor
  34. 34. Solution #7: A button for your shortcodeStep 1: Make your TinyMCE plug-in Editing the Visual Editor
  35. 35. (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);})(); Editing the Visual Editor
  36. 36. (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] ); Learn more about making TinyMCE plug-ins / } }); }, buttons: createControl : function(n, cm) { return null; }, http://tinymce.moxiecode.com/tryit/listbox_splitbutton.php getInfo : function() { return { longname : "Safe Email Address Link", http://www.ilovecolors.com.ar/tinymce-plugin-wordpress/ 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);})(); Editing the Visual Editor
  37. 37. Solution #7: A button for your shortcodeStep 2: Register your plug-in with TinyMCE ( functions.php )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;} Editing the Visual Editor
  38. 38. Solution #7: A button for your shortcode Step 3: Add your button to the editor ( functions.php )add_filter( mce_buttons, even_add_mail_shortcode_button);function even_add_mail_shortcode_button( $buttons ) { array_push( $buttons, "|", "eve_mail" ); return $buttons;} Editing the Visual Editor
  39. 39. Solution #7: A button for your shortcode Editing the Visual Editor
  40. 40. Power Tip: Style the fullscreen editor Editing the Visual Editor
  41. 41. Power Tip: Style the fullscreen editor ( functions.php )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 } Editing the Visual Editor
  42. 42. Bonus Tip: Default Content Remember: can be post type specific! ( functions.php )add_filter( default_content, ‘eve_editor_content );function my_editor_content( $content ) { $content = “<h2>Subtitle</h2>nnStart writing!"; return $content;} Editing the Visual Editor
  43. 43. Editing the Visual Editor by Jake Goldman @jakemgold slides & code will be available at get10up.com Editing the Visual Editor
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×