Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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,905 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

×