• Like
  • Save
WordPress Admin UI - Future Proofing Your Admin Pages
Upcoming SlideShare
Loading in...5
×
 

WordPress Admin UI - Future Proofing Your Admin Pages

on

  • 7,029 views

 

Statistics

Views

Total Views
7,029
Views on SlideShare
6,856
Embed Views
173

Actions

Likes
11
Downloads
39
Comments
0

3 Embeds 173

https://twitter.com 134
http://wwwudd.loc 38
http://www.onlydoo.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    WordPress Admin UI - Future Proofing Your Admin Pages WordPress Admin UI - Future Proofing Your Admin Pages Presentation Transcript

    • 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 HOOK FOR CREATING MENUS wcsd2013_admin_menu OUR CALLBACK FUNCTION TO CREATE OUR MENU); http://codex.wordpress.org/Administration_Menus
    • 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
    • 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
    • HTMLMARKUP
    • BASIC HTML OUTPUT
    • 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
    • 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
    • BASIC HTML STRUCTURE<div class="wrap"> <?php screen_icon(); ?> <h2><?php _e( Hello WordCamp San Diego 2013 ); ?></h2></div> <h2> THE PAGE TITLE
    • 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 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/
    • 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/
    • 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/
    • 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/
    • 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/
    • 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/
    • 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/
    • TABLEDATA
    • LIST TABLES
    • 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/
    • 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 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
    • 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
    • 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
    • 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;}
    • 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; } }
    • SLIDES bdove.me/wcsd2013 EMAILbrandondove@pixeljar.net twitter web