wordpress admin ui - future proofing your admin pages
DESCRIPTION
TRANSCRIPT
WORDPRESS ADMIN UIFUTURE PROOFING YOUR ADMIN PAGES
http://bdove.me/wcsd2013
BRANDON DOVE
CUSTOM THEME & PLUGINSCOMMERCIAL PLUGIN DEVELOPER
WORDCAMP OC ORGANIZERWORDPRESS CORE CONTRIBUTOR
http://link.to/src
WHY OH WHY?!
http://wordpress.org/extend/plugins/mp6/
PREPARING FOR THE INEVITABLE
MP6IS COMING
PHPCSSHT
ML
http://codex.wordpress.org/Administration_Menus
CREATING AN ADMIN PAGE// Hook to create the menuadd_action(
'admin_menu',
'wcsd2013_admin_menu'
);
WORDPRESS CORE HOOK FOR CREATING MENUSOUR CALLBACK FUNCTION TO CREATE OUR MENU
http://codex.wordpress.org/Administration_Menus
CREATING AN ADMIN PAGE// Create top-level menu itemfunction wcsd2013_admin_menu() { add_menu_page(
'WordCamp San Diego 2013',
'WCSD 2013',
'update_core',
'wcsd2013',
'wcsd2013_page'
);}
TEXT SHOWS IN THE BROWSER TITLE BARTEXT SHOWS IN THE MENU
MINIMUM CAPABILITIES REQUIRED FOR ACCESSPAGE SLUG
CALLBACK FUNCTION FOR PAGE OUTPUT
http://codex.wordpress.org/Administration_Menus
CREATING AN ADMIN PAGE// Page outputfunction wcsd2013_page() {
if ( ! current_user_can( 'update_core' ) ) wp_die( __( 'Access Denied.' ) );
require_once( plugin_dir_path( __FILE__ ).'page.php' );
}
SECURITY TIP: DOUBLE CHECK THAT THE USER HAS ACCESS TO VIEW YOUR PAGE
SANITY TIP: KEEP PAGE STRUCTURE IN A SEPARATE FILE SO IT’S EASIER TO MAINTAIN
HTMLMARKUP
BASIC HTML OUTPUT
BASIC HTML STRUCTURE<div class="wrap"> <?php screen_icon(); ?> <h2><?php _e( 'Hello WordCamp San Diego 2013' ); ?></h2></div>
div.wrapSETS UP MARGINS AROUND OUR PAGE CONTENT
http://codex.wordpress.org/Function_Reference/screen_icon
BASIC HTML STRUCTURE<div class="wrap"> <?php screen_icon(); ?> <h2><?php _e( 'Hello WordCamp San Diego 2013' ); ?></h2></div>
screen_icon()CREATES THE HTML STRUCTURE TO HOLD OUR CUSTOM PAGE ICON
BASIC HTML STRUCTURE<div class="wrap"> <?php screen_icon(); ?> <h2><?php _e( 'Hello WordCamp San Diego 2013' ); ?></h2></div>
<h2>THE PAGE TITLE
FORM ELEME
NTS
HTML FORMS
http://dotorgstyleguide.wordpress.com/outline/forms/
HTML FORMS<h3><?php _e( 'Section Name' ) ?></h3><p><?php _e( 'Describe the section so users know what to do.' ) ?></p>
<form method="post"> <table class="form-table"> <tr valign="top"> <th scope="row"><label for="field"><?php _e( 'Field' ) ?></label></th> <td> <input name="field" type="text" id="field" class="regular-text"> <p class="description"><?php _e( 'Some instructions.' ) ?></p> </td> </tr> </table> <?php submit_button(); ?></form>
http://kovshenin.com/2012/the-wordpress-settings-api/
BONUS ROUND: SETTINGS API<div class="wrap"> <?php screen_icon(); ?> <h2><?php _e( 'Hello WordCamp San Diego 2013' ); ?></h2> <form action="options.php" method="POST">
<?php settings_fields( 'wcsd2013-settings-group' ); ?>
<?php do_settings_sections( 'wcsd2013-plugin' ); ?>
<?php submit_button(); ?>
</form></div>
http://kovshenin.com/2012/the-wordpress-settings-api/
BONUS ROUND: SETTINGS APIadd_action( 'admin_init', 'wcsd2013_admin_init' );function wcsd2013_admin_init() { register_setting(
'wcsd2013-settings-group',
'wcsd2013-setting'
);}
http://kovshenin.com/2012/the-wordpress-settings-api/
BONUS ROUND: SETTINGS APIadd_action( 'admin_init', 'wcsd2013_admin_init' );function wcsd2013_admin_init() { add_settings_section(
'section-name',
'Section Name',
'wcsd2013_section_name_callback',
'wcsd2013-plugin'
);}
http://kovshenin.com/2012/the-wordpress-settings-api/
BONUS ROUND: SETTINGS APIfunction wcsd2013_section_name_callback() { _e( 'Describe this section a bit so people know what to do.' );}
http://kovshenin.com/2012/the-wordpress-settings-api/
BONUS ROUND: SETTINGS APIadd_action( 'admin_init', 'wcsd2013_admin_init' );function wcsd2013_admin_init() { add_settings_field(
'field-name',
'Field Name',
'wcsd2013_field_name_callback',
'wcsd2013-plugin',
'section-name'
);}
http://kovshenin.com/2012/the-wordpress-settings-api/
BONUS ROUND: SETTINGS APIfunction wcsd2013_field_name_callback() { $setting = get_option( 'wcsd2013-setting' ); sprintf( __( '<input type="text" name="wcsd2013-setting" value="%s" />' ), esc_attr( $setting ); );}
DATATABL
E
LIST TABLES
http://dotorgstyleguide.wordpress.com/outline/layout/data-tables/
LIST TABLES<h3><?php _e('Some Tabulated Data') ?></h3><table class="wp-list-table widefat fixed"><thead> <tr><th><?php _e( 'ID' ) ?></th><th><?php _e( 'Title' ) ?></th></tr></thead><tbody> <tr><td>1</td><td>A Title Was Born</td></tr> <tr><td>2</td><td>Can Kitteh Has A Turn?</td></tr></tbody><tfoot> <tr><th><?php _e( 'ID' ) ?></th><th><?php _e( 'Title' ) ?></th></tr></tfoot></table></div>
http://wordpress.org/extend/plugins/custom-list-table-example/
BONUS ROUND: WP LIST TABLE
CODE
ADDING ACUSTOM ICON
http://link.to/src
NO MENU ICON FAIL
Fugue Icons: http://p.yusukekamiyamane.com/ | PSD: http://bdove.me/wcsd2013-psd.zip
ADDING A CUSTOM BADASS ICON
NORMALICON: 16x16FILE: 56x28
HIDPIICON: 32x32FILE: 112x56
NORMALICON: 32x32FILE: 32x32
HIDPIICON: 64x64FILE: 64x64
MENU ICON PAGE ICON
http://codex.wordpress.org/Plugin_API/Action_Reference/admin_enqueue_scripts
ADDING A CUSTOM BADASS ICON// Hook to load the cssadd_action(
'admin_enqueue_scripts',
'wcsd2013_scripts'
);
WORDPRESS CORE HOOK FOR LOADING CSSOUR CALLBACK FUNCTION TO ENQUEUE OUR CSS
http://codex.wordpress.org/Plugin_API/Action_Reference/admin_enqueue_scripts
ADDING A CUSTOM BADASS ICON// Enqueue the stylesfunction wcsd2013_scripts() {
wp_enqueue_style(
'wcsd-admin',
plugin_dir_url( __FILE__ ).'admin.css'
);}
STYLESHEET IDENTIFIERPATH TO OUR CSS FILE
ADDING A CUSTOM BADASS ICON#adminmenu li#toplevel_page_wcsd2013 .wp-menu-image{ background: transparent url(images/menu-icon.png) no-repeat 0 0; overflow: hidden;}
#adminmenu li#toplevel_page_wcsd2013:hover .wp-menu-image,#adminmenu li#toplevel_page_wcsd2013.current .wp-menu-image,#adminmenu li#toplevel_page_wcsd2013.wp-has-current-submenu .wp-menu-image { background-position: -28px 0;}
#icon-wcsd2013 { background-image: url(images/page-icon.png); background-repeat: no-repeat;}
ADDING A CUSTOM BADASS ICON@media print,
(-o-min-device-pixel-ratio: 5/4),(-webkit-min-device-pixel-ratio: 1.25),(min-resolution: 120dpi) {
#icon-wcsd2013 { background-image: url(images/[email protected]); background-size: 32px 32px; }
#adminmenu li#toplevel_page_wcsd2013 .wp-menu-image { background-image: url(images/[email protected]); background-size: 56px 28px; }}
SLIDES
twitter web
bdove.me/wcsd2013