SlideShare a Scribd company logo
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 CONTRIBUTOR
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 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 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
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
HTML
MARKUP
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
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>

<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 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/
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/
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/
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/
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/
TABLE
DATA
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 A
CUSTOM 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: 64x64


Fugue Icons: http://p.yusukekamiyamane.com/ | PSD: http://bdove.me/wcsd2013-psd.zip
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
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
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
            EMAIL
brandondove@pixeljar.net
  twitter           web

More Related Content

What's hot

HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?Remy Sharp
 
Repaso rápido a los nuevos estándares web
Repaso rápido a los nuevos estándares webRepaso rápido a los nuevos estándares web
Repaso rápido a los nuevos estándares webPablo Garaizar
 
jQuery from the very beginning
jQuery from the very beginningjQuery from the very beginning
jQuery from the very beginningAnis Ahmad
 
PSD to WordPress
PSD to WordPressPSD to WordPress
PSD to WordPressNile Flores
 
Dress Your WordPress with Child Themes
Dress Your WordPress with Child ThemesDress Your WordPress with Child Themes
Dress Your WordPress with Child ThemesLaurie M. Rauch
 
jQuery and Rails, Sitting in a Tree
jQuery and Rails, Sitting in a TreejQuery and Rails, Sitting in a Tree
jQuery and Rails, Sitting in a Treeadamlogic
 
jQuery Mobile Introduction ( demo on EZoapp )
jQuery Mobile Introduction ( demo on EZoapp )jQuery Mobile Introduction ( demo on EZoapp )
jQuery Mobile Introduction ( demo on EZoapp )EZoApp
 
jQuery Anti-Patterns for Performance & Compression
jQuery Anti-Patterns for Performance & CompressionjQuery Anti-Patterns for Performance & Compression
jQuery Anti-Patterns for Performance & CompressionPaul Irish
 
Difference between java script and jquery
Difference between java script and jqueryDifference between java script and jquery
Difference between java script and jqueryUmar Ali
 
Mojolicious - Perl Framework for the Real-Time Web (Lightning Talk)
Mojolicious - Perl Framework for the Real-Time Web (Lightning Talk)Mojolicious - Perl Framework for the Real-Time Web (Lightning Talk)
Mojolicious - Perl Framework for the Real-Time Web (Lightning Talk)Dotan Dimet
 
Google
GoogleGoogle
Googlesoon
 
Mojolicious: what works and what doesn't
Mojolicious: what works and what doesn'tMojolicious: what works and what doesn't
Mojolicious: what works and what doesn'tCosimo Streppone
 
Componentization css angular
Componentization css angularComponentization css angular
Componentization css angularDavid Amend
 

What's hot (20)

jQuery Best Practice
jQuery Best Practice jQuery Best Practice
jQuery Best Practice
 
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
 
Repaso rápido a los nuevos estándares web
Repaso rápido a los nuevos estándares webRepaso rápido a los nuevos estándares web
Repaso rápido a los nuevos estándares web
 
jQuery from the very beginning
jQuery from the very beginningjQuery from the very beginning
jQuery from the very beginning
 
PSD to WordPress
PSD to WordPressPSD to WordPress
PSD to WordPress
 
Dress Your WordPress with Child Themes
Dress Your WordPress with Child ThemesDress Your WordPress with Child Themes
Dress Your WordPress with Child Themes
 
jQuery and Rails, Sitting in a Tree
jQuery and Rails, Sitting in a TreejQuery and Rails, Sitting in a Tree
jQuery and Rails, Sitting in a Tree
 
jQuery Mobile Introduction ( demo on EZoapp )
jQuery Mobile Introduction ( demo on EZoapp )jQuery Mobile Introduction ( demo on EZoapp )
jQuery Mobile Introduction ( demo on EZoapp )
 
Mojolicious on Steroids
Mojolicious on SteroidsMojolicious on Steroids
Mojolicious on Steroids
 
jQuery Anti-Patterns for Performance & Compression
jQuery Anti-Patterns for Performance & CompressionjQuery Anti-Patterns for Performance & Compression
jQuery Anti-Patterns for Performance & Compression
 
18.register login
18.register login18.register login
18.register login
 
jQuery
jQueryjQuery
jQuery
 
Difference between java script and jquery
Difference between java script and jqueryDifference between java script and jquery
Difference between java script and jquery
 
Mojolicious - Perl Framework for the Real-Time Web (Lightning Talk)
Mojolicious - Perl Framework for the Real-Time Web (Lightning Talk)Mojolicious - Perl Framework for the Real-Time Web (Lightning Talk)
Mojolicious - Perl Framework for the Real-Time Web (Lightning Talk)
 
RESTful web services
RESTful web servicesRESTful web services
RESTful web services
 
Google
GoogleGoogle
Google
 
Mojolicious: what works and what doesn't
Mojolicious: what works and what doesn'tMojolicious: what works and what doesn't
Mojolicious: what works and what doesn't
 
Mojolicious
MojoliciousMojolicious
Mojolicious
 
Workshop 6: Designer tools
Workshop 6: Designer toolsWorkshop 6: Designer tools
Workshop 6: Designer tools
 
Componentization css angular
Componentization css angularComponentization css angular
Componentization css angular
 

Similar to WordPress Admin UI - Future Proofing Your Admin Pages

Making WordPress Your CMS and Automatically Updating a Self Hosted WordPress ...
Making WordPress Your CMS and Automatically Updating a Self Hosted WordPress ...Making WordPress Your CMS and Automatically Updating a Self Hosted WordPress ...
Making WordPress Your CMS and Automatically Updating a Self Hosted WordPress ...cehwitham
 
CSS3 Takes on the World
CSS3 Takes on the WorldCSS3 Takes on the World
CSS3 Takes on the WorldJonathan Snook
 
How Not to Build a WordPress Plugin
How Not to Build a WordPress PluginHow Not to Build a WordPress Plugin
How Not to Build a WordPress PluginWill Norris
 
Top Wordpress dashboard hacks
Top Wordpress dashboard hacks Top Wordpress dashboard hacks
Top Wordpress dashboard hacks Pankaj Subedi
 
Expedite the development lifecycle with MongoDB and serverless - DEM02 - Sant...
Expedite the development lifecycle with MongoDB and serverless - DEM02 - Sant...Expedite the development lifecycle with MongoDB and serverless - DEM02 - Sant...
Expedite the development lifecycle with MongoDB and serverless - DEM02 - Sant...Amazon Web Services
 
Mozilla Web Apps - Super-VanJS
Mozilla Web Apps - Super-VanJSMozilla Web Apps - Super-VanJS
Mozilla Web Apps - Super-VanJSRobert Nyman
 
Security and Performance - Italian WordPress Conference
Security and Performance - Italian WordPress ConferenceSecurity and Performance - Italian WordPress Conference
Security and Performance - Italian WordPress ConferenceMaurizio Pelizzone
 
Presentation html5 css3 by thibaut
Presentation html5 css3 by thibautPresentation html5 css3 by thibaut
Presentation html5 css3 by thibautThibaut Baillet
 
Your Custom WordPress Admin Pages Suck
Your Custom WordPress Admin Pages SuckYour Custom WordPress Admin Pages Suck
Your Custom WordPress Admin Pages SuckAnthony Montalbano
 
Big Data for each one of us
Big Data for each one of usBig Data for each one of us
Big Data for each one of usOSCON Byrum
 

Similar to WordPress Admin UI - Future Proofing Your Admin Pages (20)

Making WordPress Your CMS and Automatically Updating a Self Hosted WordPress ...
Making WordPress Your CMS and Automatically Updating a Self Hosted WordPress ...Making WordPress Your CMS and Automatically Updating a Self Hosted WordPress ...
Making WordPress Your CMS and Automatically Updating a Self Hosted WordPress ...
 
Codegnitorppt
CodegnitorpptCodegnitorppt
Codegnitorppt
 
Flask – Python
Flask – PythonFlask – Python
Flask – Python
 
Introduction to angular js
Introduction to angular jsIntroduction to angular js
Introduction to angular js
 
Yii Introduction
Yii IntroductionYii Introduction
Yii Introduction
 
Html5 For Jjugccc2009fall
Html5 For Jjugccc2009fallHtml5 For Jjugccc2009fall
Html5 For Jjugccc2009fall
 
CSS3 Takes on the World
CSS3 Takes on the WorldCSS3 Takes on the World
CSS3 Takes on the World
 
How Not to Build a WordPress Plugin
How Not to Build a WordPress PluginHow Not to Build a WordPress Plugin
How Not to Build a WordPress Plugin
 
Nodejs.meetup
Nodejs.meetupNodejs.meetup
Nodejs.meetup
 
Top Wordpress dashboard hacks
Top Wordpress dashboard hacks Top Wordpress dashboard hacks
Top Wordpress dashboard hacks
 
Expedite the development lifecycle with MongoDB and serverless - DEM02 - Sant...
Expedite the development lifecycle with MongoDB and serverless - DEM02 - Sant...Expedite the development lifecycle with MongoDB and serverless - DEM02 - Sant...
Expedite the development lifecycle with MongoDB and serverless - DEM02 - Sant...
 
Mozilla Web Apps - Super-VanJS
Mozilla Web Apps - Super-VanJSMozilla Web Apps - Super-VanJS
Mozilla Web Apps - Super-VanJS
 
Security and Performance - Italian WordPress Conference
Security and Performance - Italian WordPress ConferenceSecurity and Performance - Italian WordPress Conference
Security and Performance - Italian WordPress Conference
 
Mobile themes, QR codes, and shortURLs
Mobile themes, QR codes, and shortURLsMobile themes, QR codes, and shortURLs
Mobile themes, QR codes, and shortURLs
 
Presentation html5 css3 by thibaut
Presentation html5 css3 by thibautPresentation html5 css3 by thibaut
Presentation html5 css3 by thibaut
 
Upload[1]
Upload[1]Upload[1]
Upload[1]
 
Your Custom WordPress Admin Pages Suck
Your Custom WordPress Admin Pages SuckYour Custom WordPress Admin Pages Suck
Your Custom WordPress Admin Pages Suck
 
Google app engine by example
Google app engine by exampleGoogle app engine by example
Google app engine by example
 
Django at the Disco
Django at the DiscoDjango at the Disco
Django at the Disco
 
Big Data for each one of us
Big Data for each one of usBig Data for each one of us
Big Data for each one of us
 

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