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