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.

Empowering users: modifying the admin experience

1,049 views

Published on

One of our goals as WordPress developers should be to build user friendly websites and admin interfaces. In many cases once we’ve added custom post types, taxonomies, plugins, and other features required by a site’s design and structure, the WordPress admin panel can become unwieldy and may be confusing to site managers. In this session we’ll explore a number of strategies and techniques that will help make site administration an empowering experience for your clients. We’ll discuss modification of the admin panel, strategic use of custom fields, managing permissions, use of labels and help text, and more, all with the goal of making hand offs to non-technical website managers stress free.

Published in: Software
  • Be the first to comment

Empowering users: modifying the admin experience

  1. 1. EMPOWERING USERS: MODIFYING THE ADMIN EXPERIENCE WORDCAMP NEW YORK 2015 | | Beth Soderberg @bethsoderberg CHIEF @AgencyChief
  2. 2. OUR GOALS: HAPPY & EMPOWERED CLIENTS This is a client who: knows how to add content they need to add. knows how to edit existing content. never sees code they don't understand. has full admin access if they ever need it. can't inadvertantly break the website.
  3. 3. OUR GOALS: CLIENT-FIRST DEVELOPMENT A development philosophy that incorporates content administration: automates anything that is automateable. minimizes use of things that confuse clients (e.g. widgets, shortcodes). includes non-theme related functions in plugins, not in theme files. provides inline documentation whenever possible. removes unnecessary admin elements. adds necessary admin elements.
  4. 4. HELPING USERS: CHANGE THE DEFAULT LOGIN URL Add this rewrite rule to the .htaccess file at the root of your site: RewriteRule ^login$ http://demo:9010/wp-login.php [NC,L]
  5. 5. HELPING USERS: MAKING CHANGES BASED ON CAPABILITY Sometimes a $capabilityparameter is available If not, use current_user_can function kitten_capabilities(){ if ( ! current_user_can( 'edit_users' ) ) { // Conditional based on user role // Your code here } } Roles and Capabilities: https://codex.wordpress.org/Roles_and_Capabilities Function Reference: https://codex.wordpress.org/Function_Reference/current_user_can
  6. 6. PREVENTING TRAGEDY: DISABLE THEME/PLUGIN EDITING IN THE ADMIN Add to your site's wp-config.php file: define('DISALLOW_FILE_EDIT', true); * This snippet will remove the edit options link from the admin menu AND disables editing even if the user goes to the URL /wp-admin/theme-editor.php.
  7. 7. PREVENTING TRAGEDY: PLUGINS FOR NON-THEME FUNCTIONS 1. Make a directory for your plugin in /wp-content/plugins. 2. Make a .phpfile in your new directory. 3. Add the below code to initialize your plugin. 4. Add non-theme functions to your new plugin. /* Plugin Name: Plugin for All Cats Are Awesome Plugin URI: http://www.slideshare.net/bethsoderberg Description: This plugin handles non-theme related custom functionality. Author: Beth Soderberg, CHIEF Author URI: http://agencychief.com Version: 1.0 */
  8. 8. PREVENTING TRAGEDY: DISABLE DEACTIVATION OF VITAL PLUGINS add_filter( 'plugin_action_links', 'kitten_disable_plugin_actions', 10, 4 ); function kitten_disable_plugin_actions( $actions, $plugin_file, $plugin_data, $context ) { // removes edit link for all plugins if ( array_key_exists( 'edit', $actions ) ) unset( $actions['edit'] ); // removes deactivate link for selected plugins $plugins = array( 'advanced-custom-fields/acf.php' ); if ( array_key_exists( 'deactivate', $actions ) && in_array( $plugin_file, $plugins )) unset( $actions['deactivate'] ); return $actions; } Filter Reference: https://codex.wordpress.org/Plugin_API/Filter_Reference/plugin_action_links_(plugin_file_name)
  9. 9. PREVENTING TRAGEDY: DISABLE DEACTIVATION OF VITAL PLUGINS Consider disabling: Advanced Custom Fields Site specific plugins Anything else that will cause the structure of the site to break if disabled
  10. 10. SIMPLIFYING THE DASHBOARD: REMOVING DASHBOARD WIDGETS function kitten_dashboard_widgets() { remove_meta_box( 'dashboard_quick_press', // ID of element to remove 'dashboard', // type of screen 'side' // context ); } add_action( 'wp_dashboard_setup', 'kitten_dashboard_widgets' ); * Use the screen options to disable these widgets instead of removing them if they might ever be needed. Function Reference: https://codex.wordpress.org/Function_Reference/remove_meta_box
  11. 11. SIMPLIFYING THE DASHBOARD: ADDING DASHBOARD WIDGETS function kitten_db_widget_content( $post, $callback_args ) { echo "I'm a dashboard widget!"; // widget content } function kitten_add_db_widgets() { wp_add_dashboard_widget( 'dashboard_widget', // ID of element 'Our Shiny Dashboard Widget', // widget name 'kitten_db_widget_content' // callback to function that displays content ); } add_action('wp_dashboard_setup', 'kitten_add_db_widgets' ); Function Reference: https://codex.wordpress.org/Function_Reference/wp_add_dashboard_widget Action Reference: https://codex.wordpress.org/Plugin_API/Action_Reference/wp_dashboard_setup
  12. 12. SIMPLIFYING THE MENU: REMOVING TOP LEVEL MENU ITEMS function kitten_remove_menus(){ remove_menu_page( 'edit.php' ); // Posts remove_menu_page( 'edit-comments.php' ); // Comments remove_menu_page( 'themes.php' ); // Appearance remove_menu_page( 'plugins.php' ); // Plugins remove_menu_page( 'users.php' ); // Users remove_menu_page( 'tools.php' ); // Tools remove_menu_page( 'options-general.php' ); // Settings } add_action( 'admin_menu', 'kitten_remove_menus' ); Function Reference: https://codex.wordpress.org/Function_Reference/remove_menu_page Action Reference: https://codex.wordpress.org/Plugin_API/Action_Reference/admin_menu Remove ACF Menu Link: http://www.advancedcustomfields.com/resources/how-to-hide-acf-menu-from-clients/
  13. 13. SIMPLIFYING THE MENU: REMOVING SECOND LEVEL MENU ITEMS function kitten_remove_submenus() { remove_submenu_page( 'index.php', // menu slug 'index.php' // submenu slug ); remove_submenu_page( 'index.php', 'update-core.php' ); } add_action( 'admin_menu', 'kitten_remove_submenus', 999 ); Function Reference: https://codex.wordpress.org/remove_submenu_page Action Reference: https://codex.wordpress.org/Plugin_API/Action_Reference/admin_menu
  14. 14. SIMPLIFYING THE MENU: ADDING MENU ITEMS function kitten_add_home_to_menu() { $homepage_id = get_option( 'page_on_front' ); add_menu_page( 'Homepage', // page title 'Homepage', // menu title 'edit_pages', // user capability 'post.php?post=' . $homepage_id . '&action=edit', // menu slug false, // don't need a callback function since the page already exists 'dashicons-admin-home', // menu icon 4 // menu position - right below dashboard ); } add_action( 'admin_menu', 'kitten_add_home_to_menu' ); Function Reference: https://codex.wordpress.org/Function_Reference/add_menu_page
  15. 15. STREAMLINE EDITING: REMOVE THE THINGS THAT WILL NEVER BE USED function kitten_remove_extras() { remove_post_type_support( 'page', // post type 'comments' // feature being removed ); } add_action( 'init', 'kitten_remove_extras' ); * You should really do this through screen options in case the user ever DOES need these things Function Reference: https://developer.wordpress.org/reference/functions/remove_post_type_support/
  16. 16. STREAMLINE EDITING: REMOVE CONTEXTUAL HELP TAB Use inline help or metaboxes instead. function kitten_remove_contextual_help() { $screen = get_current_screen(); $screen->remove_help_tabs(); } add_action( 'admin_head', 'kitten_remove_contextual_help' ); https://developer.wordpress.org/reference/classes/wp_screen/remove_help_tabs/ https://codex.wordpress.org/Plugin_API/Action_Reference/admin_head
  17. 17. STREAMLINE EDITING: EXPLAIN THE FEATURED IMAGE METABOX add_filter( 'admin_post_thumbnail_html', 'kitten_explain_featured_image'); function kitten_explain_featured_image( $content ) { return $content .= '<p>The Featured Image will be associated with this content throughout the website. Click the link above to add or change the image for this post. </p>'; } Code Reference: https://developer.wordpress.org/reference/hooks/admin_post_thumbnail_html/
  18. 18. STREAMLINE EDITING: REMOVE UNNEEDED EDITOR OPTIONS function kitten_remove_color_button($buttons) { $remove = 'forecolor'; //Remove text color selector if ( ( $key = array_search($remove,$buttons) ) !== false ) unset($buttons[$key]); //Find the array key and then unset return $buttons; } add_filter('mce_buttons_2','kitten_remove_color_button'); Filter Reference: https://codex.wordpress.org/Plugin_API/Filter_Reference/mce_buttons,_mce_buttons_2,_mce_buttons_3,_mce_buttons_4
  19. 19. STREAMLINE EDITING: ADD NEW EDITOR STYLES Reveal the hidden style button: function kitten_add_style_button($buttons) { array_unshift($buttons, 'styleselect'); //Add style selector to the toolbar return $buttons; } add_filter('mce_buttons_2','kitten_add_style_button'); Filter Reference: https://codex.wordpress.org/Plugin_API/Filter_Reference/mce_buttons,_mce_buttons_2,_mce_buttons_3,_mce_buttons_4
  20. 20. STREAMLINE EDITING: ADD NEW EDITOR STYLES Add new styles: function kitten_insert_style_formats( $init_array ) { $style_formats = array( array( 'title' => 'Intro', // label 'block' => 'span', // HTML wrapper 'classes' => 'intro', // class 'wrapper' => true, // does it have a wrapper? ), // Each array child has it's own settings ); $init_array['style_formats'] = json_encode( $style_formats ); // Insert array into 'style_formats' return $init_array; } add_filter( 'tiny_mce_before_init', 'kitten_insert_style_formats' ); Filter Reference: https://codex.wordpress.org/Plugin_API/Filter_Reference/tiny_mce_before_init
  21. 21. STREAMLINE EDITING: ADD NEW QUICK TAGS TO THE TEXT EDITOR function kitten_add_quicktags() { if (wp_script_is('quicktags')){ ?> <script type="text/javascript"> QTags.addButton( 'eg_paragraph', 'p', '<p>', '</p>', 'p', 'Paragraph tag', 1 ); QTags.addButton( 'eg_hr', 'hr', '<hr />', '', 'h', 'Horizontal rule line', 201 ); QTags.addButton( 'eg_pre', 'pre', '<pre lang="php">', '</pre>', 'q', 'Preformatted text tag', 111 ); </script> <?php } } add_action( 'admin_print_footer_scripts', 'kitten_add_quicktags' ); Code Reference: https://codex.wordpress.org/Quicktags_API
  22. 22. MAKE EDITING THE HOMEPAGE EASY: ADVANCED CUSTOM FIELDS Philosophy for the homepage (and other super special pages): Use a standard page. Use (ACF) to set up editable content. Use ACF tabs to organize fields. Avoid widgets. Pull any dynamic content through the front-page.phptemplate file. Add an edit screen shortcut to the admin sidebar menu. Advanced Custom Fields Advanced Custom Fields: http://www.advancedcustomfields.com/
  23. 23. MAKE CUSTOM POST TYPES HAPPY: SET CUSTOM POST TYPE LABELS $labels = array( 'name' => __( 'Cats', 'post type general name' ), 'singular_name' => __( 'Cat', 'post type singular name' ), 'menu_name' => __( 'Cats', 'admin menu' ), 'name_admin_bar' => __( 'Cat', 'add new on admin bar' ), 'add_new' => __( 'Add New', 'cat' ), 'add_new_item' => __( 'Add New Cat' ), 'new_item' => __( 'New Cat' ), 'edit_item' => __( 'Edit Cat' ), 'view_item' => __( 'View Cat' ), 'all_items' => __( 'All Cats' ), 'search_items' => __( 'Search Cats' ), 'parent_item_colon' => __( 'Parent Cats:' ), 'not_found' => __( 'No cats found.' ), 'not_found_in_trash' => __( 'No cats found in Trash.' ) ); Function Reference: https://codex.wordpress.org/Function_Reference/register_post_type
  24. 24. MAKE CUSTOM POST TYPES HAPPY: REPLACE TITLE PLACEHOLDER TEXT function kitten_title_text_input ( $title ) { if ( get_post_type() == 'cats' ) { $title = __( 'Enter cat name here' ); } return $title; } add_filter( 'enter_title_here', 'kitten_title_text_input' ); Code Reference: https://developer.wordpress.org/reference/hooks/enter_title_here/
  25. 25. MAKE CUSTOM POST TYPES HAPPY: MAKE MENU LINKS APPEAR...OR NOT show_ui show_in_nav_menus show_in_menu show_in_admin_bar Function Reference: https://codex.wordpress.org/Function_Reference/register_post_type
  26. 26. MAKE CUSTOM POST TYPES HAPPY: MAKE MENU LINKS APPEAR IN THE RIGHT ORDER Set menu_positionto an integer. Standard menu item defaults are: 2 - Dashboard 4 - Separator 5 - Posts 10 - Media 15 - Links 20 - Pages 25 - Comments 59 - Separator 60 - Appearance 65 - Plugins 70 - Users 75 - Tools 80 - Settings 99 - Separator * The default menu placement for custom post types is after "comments." Function Reference: https://codex.wordpress.org/Function_Reference/register_post_type
  27. 27. MAKE CUSTOM POST TYPES HAPPY: ADD A LOGICAL DASHICON USE A DASHICON 1. Choose a 2. Use the CSS class to set the menu_icon. Dashicon 'menu_icon' => 'dashicons-heart', USE A CUSTOM IMAGE 'menu_icon' => 'http://www.allcatsareawesome.com/wp-content/uploads/2015/10/cat-icon.png', Function Reference: https://codex.wordpress.org/Function_Reference/register_post_type Dashicons: https://developer.wordpress.org/resource/dashicons/
  28. 28. MAKE EVERYTHING ON BRAND: CREATE AN ADMIN THEME 1. Make a directory for the admin theme in wp-content/plugins 2. Add a PHP file that initializes the plugin and enqueues scripts. 3. Add a CSS file for customizations. /* Plugin Name: Admin Theme for All Cats Are Awesome Plugin URI: http://www.slideshare.net/bethsoderberg Description: This plugin styles the admin panel. Author: Beth Soderberg, CHIEF Author URI: http://agencychief.com Version: 1.0*/ function my_admin_theme_style() { wp_enqueue_style('my-admin-theme', plugins_url('admin-styles.css', __FILE__)); } add_action('admin_enqueue_scripts', 'my_admin_theme_style'); add_action('login_enqueue_scripts', 'my_admin_theme_style'); Code Reference: https://codex.wordpress.org/Creating_Admin_Themes
  29. 29. MAKE EVERYTHING ON BRAND: MODIFY LOGIN PAGE STYLES Use the admin theme stylesheet to override this code block (and anything else!): .login h1 a { background-image: none, url("../images/wordpress-logo.svg?ver=20131107"); background-position: center top; background-repeat: no-repeat; background-size: 84px auto; display: block; font-size: 20px; height: 84px; line-height: 1.3em; margin: 0 auto 25px; outline: 0 none; padding: 0; text-indent: -9999px; width: 84px; } Code Reference: https://codex.wordpress.org/Creating_Admin_Themes
  30. 30. MAKE EVERYTHING ON BRAND: USE JAVASCRIPT... ONLY IF YOU NEED TO. function my_admin_theme_style() { wp_enqueue_style('my-admin-theme', plugins_url('admin-styles.css', __FILE__)); wp_enqueue_script('custom-js', plugins_url('admin-scripts.js', (__FILE__) ) ); } add_action('admin_enqueue_scripts', 'my_admin_theme_style'); add_action('login_enqueue_scripts', 'my_admin_theme_style'); On Loading Scripts Correctly: https://pippinsplugins.com/loading-scripts-correctly-in-the-wordpress-admin/
  31. 31. MAKE EVERYTHING ON BRAND: MODIFY FOOTER BRANDING Replace "Thank you for creating with WordPress": function kitten_footer_admin () { echo 'Made for you by <a href="http://agencychief.com">CHIEF</a>'; } add_filter('admin_footer_text', 'kitten_footer_admin'); Remove version number: function kitten_footer_admin_right() { remove_filter( 'update_footer', 'core_update_footer' ); } add_action( 'admin_menu', 'kitten_footer_admin_right' ); Hook Reference: https://developer.wordpress.org/reference/hooks/admin_footer_text/ Hook Reference: https://developer.wordpress.org/reference/hooks/update_footer/
  32. 32. MAKE EVERYTHING ON BRAND: REMOVE WORDPRESS LOGO FROM HEADER function kitten_remove_admin_logo( $wp_admin_bar ) { $wp_admin_bar->remove_node( 'wp-logo' ); } add_action( 'admin_bar_menu', 'kitten_remove_admin_logo', 11 ); Hook Reference: https://developer.wordpress.org/reference/hooks/admin_bar_menu/
  33. 33. THANK YOU! BETH twitter.com/bethsoderberg slideshare.net/bethsoderberg bethsoderberg.com responsivegeometry.com CHIEF twitter.com/agencychief agencychief.com THIS PRESENTATION Slides: Code Samples: http://www.slideshare.net/bethsoderberg/empowering-users- modifying-the-admin-experience https://github.com/bethsoderberg/wordcamp-nyc- 2015/tree/master/sample-wp-plugins

×