Successfully reported this slideshow.
Your SlideShare is downloading. ×

WordPress Admin UI - Future Proofing Your Admin Pages

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
2012.sandiego.wordcamp
2012.sandiego.wordcamp
Loading in …3
×

Check these out next

1 of 34 Ad
Advertisement

More Related Content

Slideshows for you (20)

Similar to WordPress Admin UI - Future Proofing Your Admin Pages (20)

Advertisement

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 ORGANIZER COMMERCIAL 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. PHP HTML CSS
  6. CREATING AN ADMIN PAGE // Hook to create the menu add_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 item function 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 output function 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. HTML MARKUP
  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. FORM ELEMENTS
  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 API add_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 API add_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 API function 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 API add_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 API function 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. TABLE DATA
  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 A CUSTOM 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: 64x64 Fugue Icons: http://p.yusukekamiyamane.com/ | PSD: http://bdove.me/wcsd2013-psd.zip
  30. ADDING A CUSTOM BADASS ICON // Hook to load the css add_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 styles function 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 EMAIL brandondove@pixeljar.net twitter web

×