editing the visual editor (wordpress)

Download Editing the Visual Editor (WordPress)

Post on 17-May-2015

10.022 views

Category:

Technology

0 download

Embed Size (px)

DESCRIPTION

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.

TRANSCRIPT

  • 1. Editing the Visual Editor Editing the Visual Editor

2. About Me: Jake Goldman President (& chief engineer!) @ 10up LLC, aWordPress development & strategy agency Author of over a dozen WordPress plug-ins Dozens of clients, from university like BatesCollege to WP.com VIP clients like TechCrunch Writer/expert reviewer @ Smashing Magazine @jakemgold Editing the Visual Editor 3. About You: Why Youre Here Editing the Visual Editor 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. Hypothesis #2Different kinds of content (post types) oftenhave different styling.!= Editing the Visual Editor 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. Hypothesis #4Sometimes we need more ways to style contentthan we currently have. How do I apply aspecifications style??Editing the Visual Editor 8. Hypothesis #5Sometimes we need to put editor-like content in more than one place. Editing the Visual Editor 9. Hypothesis #6Shortcodes alone are not intuitive solutionsfor special features, and are not discoverable.Does this guyexpect me to remember this?Editing the Visual Editor 10. Solution #1: Style Your EditorEditing the Visual Editor 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. 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. 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. Solution #1: Style Your EditorTip: matching the editor body width to thecontent width on the front end makes a bigdifference 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. 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. 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 dont have remove_action(do_meta_boxes,eve_setup_other_stylesheets);}to use this hook. But its pretty convenient. Editing the Visual Editor 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 dont have to remove styles. We can add multiple editor styles. Editing the Visual Editor 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. Solution #3: Modify Allowed Post Tags SaveEditing the Visual Editor 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. Solution #3: Modify Allowed Post Tags Dont 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 tounset( $allowedposttags[blockquote] );}youll need to remove that capability from the role or filter content elsewhere.Editing the Visual Editor 22. Solution #4: Remove editor buttonsEditing the Visual Editor 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. Solution #4b: Manage full screenbuttonsIntroduced in WordPress 3.2Editing the Visual Editor 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. Solution #5: Add a style drop down Editing the Visual Editor 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. 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,BigWarning=warning,Special Feature=special;return $init;}Editing the Visual Editor 29. Solution #6: Add another editorNewly easy inWordPress 3.3!Editing the Visual Editor 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. Power of wp_editor()wpautop => true, // use wpautop?media_buttons => true, // show insert/upload button(s)textarea_name => $editor_id, // set the textarea name tosomething 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 visualand HTML editors buttons, needs to include the

Recommended

View more >