Download as PDF, PPTX
Uploaded byBrandon Dove
WordPress Admin UI - Future Proofing Your Admin Pages
The document provides instructions for future-proofing WordPress admin pages by following best practices for creating, styling, and extending them. It demonstrates how to create an admin menu item and page callback function, add basic HTML markup and form elements, display tabular data using list tables, and customize the page icon. The document recommends using the Settings API to build settings pages and enqueueing custom styles to add styling and high-DPI icons.
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 THEINEVITABLE MP6 IS COMING http://wordpress.org/extend/plugins/mp6/
- 5. PHP HTML CSS
- 6. CREATING AN ADMINPAGE // 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 ADMINPAGE // 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 ADMINPAGE // 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.
- 10.
- 11. BASIC HTML STRUCTURE <divclass="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 <divclass="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 <divclass="wrap"> <?php screen_icon(); ?> <h2><?php _e( 'Hello WordCamp San Diego 2013' ); ?></h2> </div> <h2> THE PAGE TITLE
- 14.
- 15.
- 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: SETTINGSAPI <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: SETTINGSAPI 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: SETTINGSAPI 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: SETTINGSAPI 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: SETTINGSAPI 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: SETTINGSAPI 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.
- 24.
- 25. LIST TABLES <h3><?php _e('SomeTabulated 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: WPLIST TABLE CODE http://wordpress.org/extend/plugins/custom-list-table-example/
- 27.
- 28. NO MENU ICONFAIL http://link.to/src
- 29. ADDING A CUSTOMBADASS 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 CUSTOMBADASS 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 CUSTOMBADASS 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 CUSTOMBADASS 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 CUSTOMBADASS 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