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