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 ORGANIZER
COMMERCIAL PLUGIN DEVELOPER   WORDPRESS CORE CONTRIBUT...
WHY OH WHY?!




   http://link.to/src
PREPARING FOR THE INEVITABLE


      MP6
       IS COMING
       http://wordpress.org/extend/plugins/mp6/
PHP
HTML
   CSS
CREATING AN ADMIN PAGE
// Hook to create the menu
add_action(

     'admin_menu',                               WORDPRESS ...
CREATING AN ADMIN PAGE
// Create top-level menu item
function wcsd2013_admin_menu() {
    add_menu_page(

         'WordCa...
CREATING AN ADMIN PAGE
// Page output
function wcsd2013_page() {

    if ( ! current_user_can( 'update_core' ) )
        w...
HTML
MARKUP
BASIC HTML OUTPUT
BASIC HTML STRUCTURE
<div class="wrap">
    <?php screen_icon(); ?>
    <h2><?php _e( 'Hello WordCamp San Diego 2013' ); ?...
BASIC HTML STRUCTURE
<div class="wrap">
    <?php screen_icon(); ?>
    <h2><?php _e( 'Hello WordCamp San Diego 2013' ); ?...
BASIC HTML STRUCTURE
<div class="wrap">
    <?php screen_icon(); ?>
    <h2><?php _e( 'Hello WordCamp San Diego 2013' ); ?...
FORM
ELEMENTS
HTML FORMS
HTML FORMS
<h3><?php _e( 'Section Name' ) ?></h3>
<p><?php _e( 'Describe the section so users know what to do.' ) ?></p>

...
BONUS ROUND: SETTINGS API
<div class="wrap">
    <?php screen_icon(); ?>
    <h2><?php _e( 'Hello WordCamp San Diego 2013'...
BONUS ROUND: SETTINGS API
add_action( 'admin_init', 'wcsd2013_admin_init' );
function wcsd2013_admin_init() {
    register...
BONUS ROUND: SETTINGS API
add_action( 'admin_init', 'wcsd2013_admin_init' );
function wcsd2013_admin_init() {
    add_sett...
BONUS ROUND: SETTINGS API
function wcsd2013_section_name_callback() {
    _e( 'Describe this section a bit so people know ...
BONUS ROUND: SETTINGS API
add_action( 'admin_init', 'wcsd2013_admin_init' );
function wcsd2013_admin_init() {
    add_sett...
BONUS ROUND: SETTINGS API
function wcsd2013_field_name_callback() {
    $setting = get_option( 'wcsd2013-setting' );
    s...
TABLE
DATA
LIST TABLES
LIST TABLES
<h3><?php _e('Some Tabulated Data') ?></h3>
<table class="wp-list-table widefat fixed">
<thead>
    <tr><th><?...
BONUS ROUND: WP LIST TABLE



     CODE
  http://wordpress.org/extend/plugins/custom-list-table-example/
ADDING A
CUSTOM 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 css
add_action(

     'admin_enqueue_scripts',                        WORD...
ADDING A CUSTOM BADASS ICON
// Enqueue the styles
function wcsd2013_scripts() {
   wp_enqueue_style(

         'wcsd-admin...
ADDING A CUSTOM BADASS ICON
#adminmenu li#toplevel_page_wcsd2013 .wp-menu-image{
    background: transparent url(images/me...
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
            EMAIL
brandondove@pixeljar.net
  twitter           web
Upcoming SlideShare
Loading in …5
×

of

WordPress Admin UI - Future Proofing Your Admin Pages Slide 1 WordPress Admin UI - Future Proofing Your Admin Pages Slide 2 WordPress Admin UI - Future Proofing Your Admin Pages Slide 3 WordPress Admin UI - Future Proofing Your Admin Pages Slide 4 WordPress Admin UI - Future Proofing Your Admin Pages Slide 5 WordPress Admin UI - Future Proofing Your Admin Pages Slide 6 WordPress Admin UI - Future Proofing Your Admin Pages Slide 7 WordPress Admin UI - Future Proofing Your Admin Pages Slide 8 WordPress Admin UI - Future Proofing Your Admin Pages Slide 9 WordPress Admin UI - Future Proofing Your Admin Pages Slide 10 WordPress Admin UI - Future Proofing Your Admin Pages Slide 11 WordPress Admin UI - Future Proofing Your Admin Pages Slide 12 WordPress Admin UI - Future Proofing Your Admin Pages Slide 13 WordPress Admin UI - Future Proofing Your Admin Pages Slide 14 WordPress Admin UI - Future Proofing Your Admin Pages Slide 15 WordPress Admin UI - Future Proofing Your Admin Pages Slide 16 WordPress Admin UI - Future Proofing Your Admin Pages Slide 17 WordPress Admin UI - Future Proofing Your Admin Pages Slide 18 WordPress Admin UI - Future Proofing Your Admin Pages Slide 19 WordPress Admin UI - Future Proofing Your Admin Pages Slide 20 WordPress Admin UI - Future Proofing Your Admin Pages Slide 21 WordPress Admin UI - Future Proofing Your Admin Pages Slide 22 WordPress Admin UI - Future Proofing Your Admin Pages Slide 23 WordPress Admin UI - Future Proofing Your Admin Pages Slide 24 WordPress Admin UI - Future Proofing Your Admin Pages Slide 25 WordPress Admin UI - Future Proofing Your Admin Pages Slide 26 WordPress Admin UI - Future Proofing Your Admin Pages Slide 27 WordPress Admin UI - Future Proofing Your Admin Pages Slide 28 WordPress Admin UI - Future Proofing Your Admin Pages Slide 29 WordPress Admin UI - Future Proofing Your Admin Pages Slide 30 WordPress Admin UI - Future Proofing Your Admin Pages Slide 31 WordPress Admin UI - Future Proofing Your Admin Pages Slide 32 WordPress Admin UI - Future Proofing Your Admin Pages Slide 33 WordPress Admin UI - Future Proofing Your Admin Pages Slide 34
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

12 Likes

Share

Download to read offline

WordPress Admin UI - Future Proofing Your Admin Pages

Download to read offline

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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 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
  • saghian

    Jan. 26, 2017
  • christianjacques522

    Jul. 14, 2014
  • felixrohrbach

    Feb. 1, 2014
  • arimichikondo

    Jun. 17, 2013
  • NicolaBrits

    Mar. 26, 2013
  • lovelyprinc007

    Mar. 25, 2013
  • jorgeospinatabares

    Mar. 24, 2013
  • hadiaahmad7927

    Mar. 24, 2013
  • RaggilWisnuaji

    Mar. 24, 2013
  • beromantahar

    Mar. 24, 2013
  • chintiakhoiri

    Mar. 24, 2013
  • 0610131685

    Mar. 24, 2013

Views

Total views

10,753

On Slideshare

0

From embeds

0

Number of embeds

158

Actions

Downloads

45

Shares

0

Comments

0

Likes

12

×