empowering users: modifying the admin experience
TRANSCRIPT
EMPOWERING USERS:MODIFYING THE ADMINEXPERIENCEWORDCAMP NEW YORK 2015
| |
Beth Soderberg @bethsoderbergCHIEF @AgencyChief
OUR GOALS:
HAPPY & EMPOWEREDCLIENTSThis 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.
OUR GOALS:
CLIENT-FIRST DEVELOPMENTA 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.
HELPING USERS:
CHANGE THE DEFAULT LOGINURLAdd this rewrite rule to the .htaccess file at the root of your site:
RewriteRule ̂login$ http://demo:9010/wp-login.php [NC,L]
HELPING USERS:
MAKING CHANGES BASED ONCAPABILITY
Sometimes a $capability parameter is availableIf 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
PREVENTING TRAGEDY:
DISABLE THEME/PLUGINEDITING IN THE ADMINAdd 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 theURL /wp-admin/theme-editor.php.
PREVENTING TRAGEDY:
PLUGINS FOR NON-THEMEFUNCTIONS
1. Make a directory for your plugin in /wp-content/plugins.2. Make a .php file 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 */
PREVENTING TRAGEDY:
DISABLE DEACTIVATION OFVITAL PLUGINSadd_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)
PREVENTING TRAGEDY:
DISABLE DEACTIVATION OFVITAL PLUGINSConsider disabling:
Advanced Custom FieldsSite specific pluginsAnything else that will cause the structure of the site to break ifdisabled
SIMPLIFYING THE DASHBOARD:
REMOVING DASHBOARDWIDGETSfunction 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
SIMPLIFYING THE DASHBOARD:
ADDING DASHBOARD WIDGETSfunction 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
SIMPLIFYING THE MENU:
REMOVING TOP LEVEL MENUITEMSfunction 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/
SIMPLIFYING THE MENU:
REMOVING SECOND LEVELMENU ITEMSfunction 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
SIMPLIFYING THE MENU:
ADDING MENU ITEMSfunction 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
STREAMLINE EDITING:
REMOVE THE THINGS THATWILL NEVER BE USEDfunction 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/
STREAMLINE EDITING:
REMOVE CONTEXTUAL HELPTABUse 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
STREAMLINE EDITING:
EXPLAIN THE FEATUREDIMAGE METABOXadd_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/
STREAMLINE EDITING:
REMOVE UNNEEDED EDITOROPTIONSfunction 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
STREAMLINE EDITING:
ADD NEW EDITOR STYLESReveal 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
STREAMLINE EDITING:
ADD NEW EDITOR STYLESAdd 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
STREAMLINE EDITING:
ADD NEW QUICK TAGS TO THETEXT EDITORfunction 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
MAKE EDITING THE HOMEPAGE EASY:
ADVANCED CUSTOM FIELDSPhilosophy 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.php templatefile.Add an edit screen shortcut to the admin sidebar menu.
Advanced Custom Fields
Advanced Custom Fields: http://www.advancedcustomfields.com/
MAKE CUSTOM POST TYPES HAPPY:
SET CUSTOM POST TYPELABELS$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
MAKE CUSTOM POST TYPES HAPPY:
REPLACE TITLE PLACEHOLDERTEXTfunction 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/
MAKE CUSTOM POST TYPES HAPPY:
MAKE MENU LINKSAPPEAR...OR NOTshow_uishow_in_nav_menusshow_in_menushow_in_admin_bar
Function Reference: https://codex.wordpress.org/Function_Reference/register_post_type
MAKE CUSTOM POST TYPES HAPPY:
MAKE MENU LINKS APPEAR INTHE RIGHT ORDERSet menu_position to an integer. Standard menu item defaults are:
2 - Dashboard4 - Separator5 - Posts10 - Media15 - Links20 - Pages25 - Comments
59 - Separator60 - Appearance65 - Plugins70 - Users75 - Tools80 - Settings99 - Separator
* The default menu placement for custom post types is after "comments."
Function Reference: https://codex.wordpress.org/Function_Reference/register_post_type
MAKE CUSTOM POST TYPES HAPPY:
ADD A LOGICAL DASHICONUSE 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/
MAKE EVERYTHING ON BRAND:
CREATE AN ADMIN THEME1. Make a directory for the admin theme in wp-content/plugins2. 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
MAKE EVERYTHING ON BRAND:
MODIFY LOGIN PAGE STYLESUse the admin theme stylesheet to override this code block (andanything 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
MAKE EVERYTHING ON BRAND:
USE JAVASCRIPT... ONLY IFYOU 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/
MAKE EVERYTHING ON BRAND:
MODIFY FOOTER BRANDINGReplace "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/
MAKE EVERYTHING ON BRAND:
REMOVE WORDPRESS LOGOFROM HEADERfunction 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/
THANK YOU!BETH
twitter.com/bethsoderbergslideshare.net/bethsoderbergbethsoderberg.comresponsivegeometry.com
CHIEFtwitter.com/agencychiefagencychief.com
THIS PRESENTATIONSlides:
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