editing the visual editor (wordpress)

Editing the Visual Editor

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 at least somewhat match the styling of content on

your page.

!=

Editing the Visual Editor

Hypothesis #2

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

!=

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.

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

Does this guy expect me to

remember this?

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

Editing the Visual Editor

Solution #1: Style Your Editor

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 )

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.

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

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

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 )

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.

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.

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!

Editing the Visual Editor

Solution #3: Modify Allowed Post Tags

Save

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 )

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.

Editing the Visual Editor

Solution #4: Remove editor buttons

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 )

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

add_filter( 'wp_fullscreen_buttons', 'eve_fullscreen_buttons' );

function eve_fullscreen_buttons( $buttons ) {if ( isset( $buttons['blockquote'] ) )

unset( $buttons['blockquote'] );

return $buttons;}

( functions.php )

Editing the Visual Editor

Solution #5: Add a style drop down

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 )

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 )

Editing the Visual Editor

Solution #6: Add another editor

Newly easy in WordPress 3.3!

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 )

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 )

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

Editing the Visual Editor

Solution #7: A button for your shortcode

My button!

Editing the Visual Editor

Step 1: Make your TinyMCE plug-in

Solution #7: A button for your shortcode

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);})();

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/

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 )

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 )

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

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

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 )

Editing the Visual Editor

Editing the Visual Editor

by Jake Goldman

@jakemgold

slides & code will be available at get10up.com