WORDPRESS ADMIN UI FUTURE PROOFING YOUR ADMIN PAGES        http://bdove.me/wcsd2013
BRANDON DOVE    CUSTOM THEME & PLUGINS    WORDCAMP OC ORGANIZERCOMMERCIAL PLUGIN DEVELOPER   WORDPRESS CORE CONTRIBUTOR
WHY OH WHY?!   http://link.to/src
PREPARING FOR THE INEVITABLE      MP6       IS COMING       http://wordpress.org/extend/plugins/mp6/
PHPHTML   CSS
CREATING AN ADMIN PAGE// Hook to create the menuadd_action(     admin_menu,                               WORDPRESS CORE H...
CREATING AN ADMIN PAGE// Create top-level menu itemfunction wcsd2013_admin_menu() {    add_menu_page(         WordCamp San...
CREATING AN ADMIN PAGE// Page outputfunction wcsd2013_page() {    if ( ! current_user_can( update_core ) )        wp_die( ...
HTMLMARKUP
BASIC HTML OUTPUT
BASIC HTML STRUCTURE<div class="wrap">    <?php screen_icon(); ?>    <h2><?php _e( Hello WordCamp San Diego 2013 ); ?></h2...
BASIC HTML STRUCTURE<div class="wrap">    <?php screen_icon(); ?>    <h2><?php _e( Hello WordCamp San Diego 2013 ); ?></h2...
BASIC HTML STRUCTURE<div class="wrap">    <?php screen_icon(); ?>    <h2><?php _e( Hello WordCamp San Diego 2013 ); ?></h2...
FORMELEMENTS
HTML FORMS
HTML FORMS<h3><?php _e( Section Name ) ?></h3><p><?php _e( Describe the section so users know what to do. ) ?></p><form me...
BONUS ROUND: SETTINGS API<div class="wrap">    <?php screen_icon(); ?>    <h2><?php _e( Hello WordCamp San Diego 2013 ); ?...
BONUS ROUND: SETTINGS APIadd_action( admin_init, wcsd2013_admin_init );function wcsd2013_admin_init() {    register_settin...
BONUS ROUND: SETTINGS APIadd_action( admin_init, wcsd2013_admin_init );function wcsd2013_admin_init() {    add_settings_se...
BONUS ROUND: SETTINGS APIfunction wcsd2013_section_name_callback() {    _e( Describe this section a bit so people know wha...
BONUS ROUND: SETTINGS APIadd_action( admin_init, wcsd2013_admin_init );function wcsd2013_admin_init() {    add_settings_fi...
BONUS ROUND: SETTINGS APIfunction wcsd2013_field_name_callback() {    $setting = get_option( wcsd2013-setting );    sprint...
TABLEDATA
LIST TABLES
LIST TABLES<h3><?php _e(Some Tabulated Data) ?></h3><table class="wp-list-table widefat fixed"><thead>    <tr><th><?php _e...
BONUS ROUND: WP LIST TABLE     CODE  http://wordpress.org/extend/plugins/custom-list-table-example/
ADDING ACUSTOM ICON
NO MENU ICON FAIL     http://link.to/src
ADDING A CUSTOM BADASS ICON  MENU ICON                                               PAGE ICON         NORMAL             ...
ADDING A CUSTOM BADASS ICON// Hook to load the cssadd_action(     admin_enqueue_scripts,                        WORDPRESS ...
ADDING A CUSTOM BADASS ICON// Enqueue the stylesfunction wcsd2013_scripts() {   wp_enqueue_style(         wcsd-admin,     ...
ADDING A CUSTOM BADASS ICON#adminmenu li#toplevel_page_wcsd2013 .wp-menu-image{    background: transparent url(images/menu...
ADDING A CUSTOM BADASS ICON@media print,   (-o-min-device-pixel-ratio: 5/4),   (-webkit-min-device-pixel-ratio: 1.25),   (...
SLIDES  bdove.me/wcsd2013            EMAILbrandondove@pixeljar.net  twitter           web
Upcoming SlideShare
Loading in …5
×

WordPress Admin UI - Future Proofing Your Admin Pages

9,566 views

Published on

WordPress Admin UI - Future Proofing Your Admin Pages

  1. WORDPRESS ADMIN UI FUTURE PROOFING YOUR ADMIN PAGES http://bdove.me/wcsd2013
  2. BRANDON DOVE CUSTOM THEME & PLUGINS WORDCAMP OC ORGANIZERCOMMERCIAL PLUGIN DEVELOPER WORDPRESS CORE CONTRIBUTOR
  3. WHY OH WHY?! http://link.to/src
  4. PREPARING FOR THE INEVITABLE MP6 IS COMING http://wordpress.org/extend/plugins/mp6/
  5. PHPHTML CSS
  6. CREATING AN ADMIN PAGE// Hook to create the menuadd_action( admin_menu, WORDPRESS CORE HOOK FOR CREATING MENUS wcsd2013_admin_menu OUR CALLBACK FUNCTION TO CREATE OUR MENU); http://codex.wordpress.org/Administration_Menus
  7. CREATING AN ADMIN PAGE// Create top-level menu itemfunction wcsd2013_admin_menu() { add_menu_page( WordCamp San Diego 2013, TEXT SHOWS IN THE BROWSER TITLE BAR WCSD 2013, TEXT SHOWS IN THE MENU update_core, MINIMUM CAPABILITIES REQUIRED FOR ACCESS wcsd2013, PAGE SLUG wcsd2013_page CALLBACK FUNCTION FOR PAGE OUTPUT );} http://codex.wordpress.org/Administration_Menus
  8. 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 http://codex.wordpress.org/Administration_Menus
  9. HTMLMARKUP
  10. BASIC HTML OUTPUT
  11. BASIC HTML STRUCTURE<div class="wrap"> <?php screen_icon(); ?> <h2><?php _e( Hello WordCamp San Diego 2013 ); ?></h2></div> div.wrap SETS UP MARGINS AROUND OUR PAGE CONTENT
  12. 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 http://codex.wordpress.org/Function_Reference/screen_icon
  13. BASIC HTML STRUCTURE<div class="wrap"> <?php screen_icon(); ?> <h2><?php _e( Hello WordCamp San Diego 2013 ); ?></h2></div> <h2> THE PAGE TITLE
  14. FORMELEMENTS
  15. HTML FORMS
  16. 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://dotorgstyleguide.wordpress.com/outline/forms/
  17. 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/
  18. 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/
  19. 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/
  20. 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/
  21. 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/
  22. 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 ); );} http://kovshenin.com/2012/the-wordpress-settings-api/
  23. TABLEDATA
  24. LIST TABLES
  25. 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://dotorgstyleguide.wordpress.com/outline/layout/data-tables/
  26. BONUS ROUND: WP LIST TABLE CODE http://wordpress.org/extend/plugins/custom-list-table-example/
  27. ADDING ACUSTOM ICON
  28. NO MENU ICON FAIL http://link.to/src
  29. ADDING A CUSTOM BADASS ICON MENU ICON PAGE ICON NORMAL NORMAL ICON: 16x16 ICON: 32x32 FILE: 56x28 FILE: 32x32 HIDPI HIDPI ICON: 32x32 ICON: 64x64 FILE: 112x56 FILE: 64x64Fugue Icons: http://p.yusukekamiyamane.com/ | PSD: http://bdove.me/wcsd2013-psd.zip
  30. ADDING A CUSTOM BADASS ICON// Hook to load the cssadd_action( admin_enqueue_scripts, WORDPRESS CORE HOOK FOR LOADING CSS wcsd2013_scripts OUR CALLBACK FUNCTION TO ENQUEUE OUR CSS); http://codex.wordpress.org/Plugin_API/Action_Reference/admin_enqueue_scripts
  31. ADDING A CUSTOM BADASS ICON// Enqueue the stylesfunction wcsd2013_scripts() { wp_enqueue_style( wcsd-admin, STYLESHEET IDENTIFIER plugin_dir_url( __FILE__ ).admin.css PATH TO OUR CSS FILE );} http://codex.wordpress.org/Plugin_API/Action_Reference/admin_enqueue_scripts
  32. 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;}
  33. 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/page-icon@2x.png); background-size: 32px 32px; } #adminmenu li#toplevel_page_wcsd2013 .wp-menu-image { background-image: url(images/menu-icon@2x.png); background-size: 56px 28px; } }
  34. SLIDES bdove.me/wcsd2013 EMAILbrandondove@pixeljar.net twitter web

×