Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
20 ways to improve the experience
of content editing in WordPress
#wcmcr
@jasoncsking
These code snippets can
go in your theme's
functions.php file
IMPROVING THE POST EDITOR
1. Remove H1, H5, H6
http://www.jowaltham.com/
modify-tinymce-editor/
2. Excerpt length counter
http://premium.wpmudev.org/blog/
character-counter-excerpt-box/
3. Make it easy to apply styles
https://codex.wordpress.org/
TinyMCE_Custom_Styles
array(
'title' => 'Lead paragraph',
'selector' => 'p',
'classes' => 'lead',
'wrapper' => true,
),
array(
'title' => 'Norma...
4. Remove buttons from the toolbar
www.kevinleary.net/customizing-
tinymce-wysiwyg-editor-wordpress/
5. Or add extra buttons
premium.wpmudev.org/blog/display-
the-full-tinymce-editor-in-wordpress/
6. WYSIWIG post editor
codex.wordpress.org/
Function_Reference/add_editor_style
7. Add more filters to Media Library
http://bit.ly/1hgqI3M
8. Create useful shortcodes
// [phone] = telephone icon
function scaffold_shortcode_phone_icon() {
$phone_icon = "<i class...
IMPROVING THE DASHBOARD
9. Hide Appearance > Editor
define( 'DISALLOW_FILE_EDIT', true );
10. Remove default widgets
paulund.co.uk/how-to-remove-default-
wordpress-widgets
11. Add custom post types
to At a Glance
http://bit.ly/1JKH0sn
12. Custom dashboard widgets
wpbeginner.com/wp-themes/how-to-add-
custom-dashboard-widgets-in-wordpress/
13. Remove dashboard widgets
http://bit.ly/1LoBbIt
14. Add CSS to the dashboard
css-tricks.com/snippets/wordpress/apply-
custom-css-to-admin-area/
add_action('admin_head', '...
15. Make Screen Options stand out
#screen-meta-links .show-settings {
background-color: red;
color: #fff;
font-weight: bol...
PLUGINS
16. Put these code snippets
in your own plugin
https://codex.wordpress.org/
Writing_a_Plugin
17. Or find existing plugins
18. Highlight code syntax
wordpress.org/plugins/
html-editor-syntax-highlighter/
19. Theme Customiser
Watch Dave Green's talk at #wcmcr
20. Slide not found
404
Upcoming SlideShare
Loading in …5
×

20 ways to improve the experience of content editing in WordPress - WordCamp Manchester 2015

1,328 views

Published on

How can you improve on the default WordPress dashboard; and make the post editing toolbar less cluttered, more intuitive and relevant for your users? All it takes is a bit of forethought and a sprinking of code in functions.php. Why do this? To make life easier for content editors, help them avoid some common mistakes, and put some useful new options on the editing toolbar.

Published in: Technology
  • Be the first to comment

20 ways to improve the experience of content editing in WordPress - WordCamp Manchester 2015

  1. 1. 20 ways to improve the experience of content editing in WordPress #wcmcr @jasoncsking
  2. 2. These code snippets can go in your theme's functions.php file
  3. 3. IMPROVING THE POST EDITOR
  4. 4. 1. Remove H1, H5, H6 http://www.jowaltham.com/ modify-tinymce-editor/
  5. 5. 2. Excerpt length counter http://premium.wpmudev.org/blog/ character-counter-excerpt-box/
  6. 6. 3. Make it easy to apply styles https://codex.wordpress.org/ TinyMCE_Custom_Styles
  7. 7. array( 'title' => 'Lead paragraph', 'selector' => 'p', 'classes' => 'lead', 'wrapper' => true, ), array( 'title' => 'Normal Button', 'selector' => 'p > a', 'classes' => 'btn btn- primary', 'wrapper' => false,
  8. 8. 4. Remove buttons from the toolbar www.kevinleary.net/customizing- tinymce-wysiwyg-editor-wordpress/
  9. 9. 5. Or add extra buttons premium.wpmudev.org/blog/display- the-full-tinymce-editor-in-wordpress/
  10. 10. 6. WYSIWIG post editor codex.wordpress.org/ Function_Reference/add_editor_style
  11. 11. 7. Add more filters to Media Library http://bit.ly/1hgqI3M
  12. 12. 8. Create useful shortcodes // [phone] = telephone icon function scaffold_shortcode_phone_icon() { $phone_icon = "<i class='fa fa-phone-square fa-lg shortcode-icon'></i> "; return $phone_icon; } add_shortcode( 'phone', 'scaffold_shortcode_phone_icon' ); https://generatewp.com/shortcodes/
  13. 13. IMPROVING THE DASHBOARD
  14. 14. 9. Hide Appearance > Editor define( 'DISALLOW_FILE_EDIT', true );
  15. 15. 10. Remove default widgets paulund.co.uk/how-to-remove-default- wordpress-widgets
  16. 16. 11. Add custom post types to At a Glance http://bit.ly/1JKH0sn
  17. 17. 12. Custom dashboard widgets wpbeginner.com/wp-themes/how-to-add- custom-dashboard-widgets-in-wordpress/
  18. 18. 13. Remove dashboard widgets http://bit.ly/1LoBbIt
  19. 19. 14. Add CSS to the dashboard css-tricks.com/snippets/wordpress/apply- custom-css-to-admin-area/ add_action('admin_head', 'my_custom_fonts'); function my_custom_fonts() { echo '<style> body, td, textarea, input, select { color: pink; } </style>'; }
  20. 20. 15. Make Screen Options stand out #screen-meta-links .show-settings { background-color: red; color: #fff; font-weight: bold; }
  21. 21. PLUGINS
  22. 22. 16. Put these code snippets in your own plugin https://codex.wordpress.org/ Writing_a_Plugin
  23. 23. 17. Or find existing plugins
  24. 24. 18. Highlight code syntax wordpress.org/plugins/ html-editor-syntax-highlighter/
  25. 25. 19. Theme Customiser Watch Dave Green's talk at #wcmcr
  26. 26. 20. Slide not found 404

×