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 #3
WordPress does a pretty good job of knowing
how to clean up our authors’ messes, but we
know our authors even better.


Hypothesis #4
Sometimes we need more ways to style content
than we currently have.

How do I apply a
“specifications” style??


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


Hypothesis #6
“Shortcodes” alone are not intuitive solutions
for special features, and are not discoverable.
Does this guy
expect me to
remember
this?


Solution #1: Style Your Editor



( functions.php )

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

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

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



( 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



( functions.php )

add_action( 'init', 'eve_modify_allowed_post_tags' );

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


Don’t forget!
( functions.php )

Users with unfiltered_html capabilities
add_action( 'init', 'eve_modify_allowed_post_tags' );
(editors & admins) are not filtered by this. If
function 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.


Solution #4: Remove editor buttons


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


Solution #4b: Manage full screen
buttons

Introduced in WordPress 3.2


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


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



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


Solution #6: Add another editor

Newly easy in
WordPress 3.3!


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


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

( 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 here
'textarea_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 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()

( wp-includes/class-wp-editor.php )

Solution #7: A button for your
shortcode

My button!


shortcode

Step 1: Make your TinyMCE plug-in


shortcode

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


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


shortcode


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


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


by Jake Goldman
@jakemgold

slides & code will be available at
get10up.com


Editing the Visual Editor (WordPress)

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (19)

Similar a Editing the Visual Editor (WordPress)

Similar a Editing the Visual Editor (WordPress) (20)

Último

Último (20)

Editing the Visual Editor (WordPress)