Download - Editing the Visual Editor (WordPress)

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


About You: Why You’re Here


Hypothesis #1

The styling of content in your editor should at least somewhat match the styling of content on

your page.

!=


Hypothesis #2

Different kinds of content (post types) often have different styling.

!=


Hypothesis #3WordPress does a pretty good job of knowing how to clean up our authors’ messes, but we

know our authors even better.


Hypothesis #4Sometimes we need more ways to style content

than we currently have.

How do I apply a “specifications” style??


Hypothesis #5Sometimes we need to put editor-like content in

more than one place.


Does this guy expect me to

remember this?

Hypothesis #6“Shortcodes” alone are not intuitive solutions for special features, and are not discoverable.


Solution #1: Style Your Editor



add_action( ‘after_theme_setup’, ‘eve_theme_setup’ );

function eve_theme_setup() { add_editor_style();}

( functions.php )



add_action( ‘after_theme_setup’, ‘eve_theme_setup’ );

function eve_theme_setup() { add_editor_style();}

( functions.php )

Hook is non-essential, but good form.



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; }...


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; }...


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 )






}


( functions.php )

Note #1: We don’t have to use this hook. But it’s

pretty convenient.






}


( functions.php )

Note #2: We don’t have to remove styles. We can add multiple editor styles.






}


( functions.php )

Note #3: This concept applies to all our

TinyMCE / editor tips!


Solution #3: Modify Allowed Post Tags

Save



add_action( 'init', 'eve_modify_allowed_post_tags' );

function eve_modify_allowed_post_tags() {global $allowedposttags;unset( $allowedposttags['blockquote'] );

}

( functions.php )



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.


Solution #4: Remove editor buttons


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 )


Solution #4b: Manage full screen buttons

Introduced in WordPress 3.2


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 )


Solution #5: Add a style drop down


Step 1: Add style dropdown control


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 )


Step 2: Specify style names and classes


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 )


Solution #6: Add another editor

Newly easy in WordPress 3.3!


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 )


'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 )


'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


Solution #7: A button for your shortcode

My button!


Step 1: Make your TinyMCE plug-in



Step 2: Register your plug-in with TinyMCE


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 )


Step 3: Add your button to the editor


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 )


Power Tip: Style the fullscreen 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


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 )



by Jake Goldman

@jakemgold

slides & code will be available at get10up.com

Download - Editing the Visual Editor (WordPress)

Top Related