Empowering users: modifying the admin experience

EMPOWERING USERS:
MODIFYING THE ADMIN
EXPERIENCE
WORDCAMP NEW YORK 2015
|
|
Beth Soderberg @bethsoderberg
CHIEF @AgencyChief

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.

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.

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]

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

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.

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 */

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)

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

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

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

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/

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

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

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/

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

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/

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

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

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

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

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/

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

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/

MAKE MENU LINKS
APPEAR...OR NOT
show_ui
show_in_nav_menus
show_in_menu
show_in_admin_bar

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."

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',
Dashicons: https://developer.wordpress.org/resource/dashicons/

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

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

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/

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/

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/

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

Empowering users: modifying the admin experience

More Related Content

What's hot

Viewers also liked

Similar to Empowering users: modifying the admin experience

Recently uploaded

Empowering users: modifying the admin experience