Editing the Visual Editor (WordPress)

Editing the Visual Editor 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 Editing the Visual Editor

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 your page. != Editing the Visual Editor

Hypothesis #2Different kinds of content (post types) often have different styling. != Editing the Visual Editor

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

Hypothesis #4Sometimes we need more ways to style content than we currently have. How do I apply a “specifications” style?? Editing the Visual Editor

Hypothesis #5Sometimes we need to put editor-like content in more than one place. Editing the Visual Editor

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

Solution #1: Style Your Editor Editing the Visual Editor

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

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

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

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

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

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

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

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

Solution #3: Modify Allowed Post Tags Save Editing the Visual Editor

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

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

Solution #4: Remove editor buttons Editing the Visual Editor

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

Solution #4b: Manage full screen buttons Introduced in WordPress 3.2 Editing the Visual Editor

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

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( 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

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

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_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

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 )

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 )

Solution #7: A button for your shortcode My button! Editing the Visual Editor

Solution #7: A button for your shortcodeStep 1: Make your TinyMCE plug-in Editing the Visual Editor

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

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

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_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

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

Editing the Visual Editor by Jake Goldman @jakemgold slides & code will be available at get10up.com Editing the Visual Editor

http://www.get10up.com	993
http://10up.com	714
http://www.bram.us	485
http://www.linkedin.com	11
http://translate.googleusercontent.com	2
http://207.46.192.232	2
http://us-w1.rockmelt.com	1

Editing the Visual Editor (WordPress)

by Jake Goldman on Dec 20, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

7 Embeds 2,208

Statistics

Editing the Visual Editor (WordPress) — Presentation Transcript