Your SlideShare is downloading. ×
WordPress Admin UI - Future Proofing Your Admin Pages
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

WordPress Admin UI - Future Proofing Your Admin Pages

6,823
views

Published on


0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,823
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
43
Comments
0
Likes
11
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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