Your SlideShare is downloading. ×
0
Your Custom WordPressAdmin Pages Suck(and how to make them unsucky)Anthony Montalbano          @italianst4       anthony@a...
Who is Anthony Montalbano?Passionate for code  Bachelors in Computer SciencePassionate for WordPress  WordCamp Detroit Org...
What are you talking about?!
What are you talking about?!
What are you talking about?!
What are you talking about?!More examples...               http://themeoptions.wordpress.com/A need rant...  http://wpcand...
What are you talking about?!"This stuff needs    to stop."                           ~Ryan Imel
First World Problem?
Be a Good Guy Greg!
The WordPressAdminIts in the details...
The WordPress AdminIcons
The WordPress AdminHeader
The WordPress AdminButtons
The WordPress AdminForms
The WordPress AdminContainers
Locating your admin page  ●   Navbar  ●   Toolbar  ●   Dashboard  ●   Post Edit  ●   Widgets  ●   Default Admin Pages  ●  ...
StylingLets make things sexy
Wrap it up!              <div class="wrap">                       <!-- MAGIC GOES HERE --              >              </div>
Admin UI Basics            <div class="wrap">              <h1>WordCamp Detroit</h1>              <div id="icon-users" cla...
Buttons<div class="wrap">  <input class="button-primary" value="<?php _e(Save Options); ?>"type="button" />  <br /><br /> ...
Notices<div class="wrap">  <div class="updated"><p>Settings are saved!</p></div>  <div class="error"><p>Oh no, it failed</...
Forms
Forms (continued)<div class="wrap">  <form method="POST" action="<?php echo $_SERVER[REQUEST_URI]; ?>">    <table class="f...
Forms (continued, again)<tr valign="top">        <th scope="row">          <label for="aboutyou">About You</label>        ...
Forms (continued, and again)<tr>        <th scope="row">          <label for="color">Color</label>        </th>        <td...
Tabs  <div class="wrap">    <h2 class="nav-tab-wrapper">      Just Some Tabs      <a href="#" class="nav-tab nav-tab-activ...
Static Tables    <div class="wrap">      <table class="widefat">        <thead><tr>           <th>Name</th> <th>Email</th>...
InteractiveElementsClick, click, drag, clickity, click!
Scripts and StylesThere are many cases where you may want toinclude a javascript or style sheet with yourplugin. WordPress...
Scripts and Styles (continued)Using a script     <?php     function my_scripts_method() {         wp_enqueue_script(jquery...
Dynamic Tables In the codex: http://codex.wordpress.org/Function_Reference/WP_List_Table How to: http://wp.smashingmagazin...
Pagination   <div class="wrap">     <div class="tablenav">     <?php     $posts_per_page = 15;     $num_of_records = 500; ...
Pagination (continued)   if ( $page_links ) { ?>       <div class="tablenav-pages">          <?php echo sprintf( <span cla...
Media UploaderHow to use the media uploader:http://wp.tutsplus.com/tutorials/creative-coding/how-to-integrate-the-wordpres...
Admin PointersHow to add pointers:http://wp.tutsplus.com/tutorials/integrating-with-wordpress-ui-admin-pointers/
Data RetentionMaybe we should save that...
Options API// Create an option to the databaseadd_option( $option, $value = , $deprecated = , $autoload = yes );// Removes...
Transients API// Set a transientset_transient( special_query_results, $special_query_results, 60*60*12);// Remove a transi...
Settings API               http://codex.wordpress.org/Settings_API
Widget Dataclass Example_Widget extends WP_Widget {    // Displaying widget option value    public function widget( $args,...
Explore moreIts only just begun...
Admin UI Reference PluginDownload the plugin here:   https://github.com/bueltge/WordPress-Admin-Style
Additional SourcesUI Pattern and Style Guidehttp://codex.wordpress.org/User:TECannon/UI_Pattern_and_Style_GuideCreating Ad...
Contribute     http://make.wordpress.org/ui/
Some final thoughts      Keep it simple.
Some final thoughts
Thank you!  Anthony Montalbano      @italianst4anthony@ambrdetroit.com
Upcoming SlideShare
Loading in...5
×

Your Custom WordPress Admin Pages Suck

9,337

Published on

Published in: Education

Transcript of "Your Custom WordPress Admin Pages Suck"

  1. 1. Your Custom WordPressAdmin Pages Suck(and how to make them unsucky)Anthony Montalbano @italianst4 anthony@ambrdetroit.com
  2. 2. Who is Anthony Montalbano?Passionate for code Bachelors in Computer SciencePassionate for WordPress WordCamp Detroit Organizer, Plugin/Theme DeveloperPassionate for open source WordPress plugin developerPassionate for words Serial bloggerPassionate for possibilities Co-founder of flipfrog and AMBR Detroit source: iamthecoolestpersonever.com
  3. 3. What are you talking about?!
  4. 4. What are you talking about?!
  5. 5. What are you talking about?!
  6. 6. What are you talking about?!More examples... http://themeoptions.wordpress.com/A need rant... http://wpcandy.com/thinks/custom-admin-screens-are-the-worstComment rant... http://wpcandy.com/thinks/custom-admin-screens-are-the- worst#comment-127921
  7. 7. What are you talking about?!"This stuff needs to stop." ~Ryan Imel
  8. 8. First World Problem?
  9. 9. Be a Good Guy Greg!
  10. 10. The WordPressAdminIts in the details...
  11. 11. The WordPress AdminIcons
  12. 12. The WordPress AdminHeader
  13. 13. The WordPress AdminButtons
  14. 14. The WordPress AdminForms
  15. 15. The WordPress AdminContainers
  16. 16. Locating your admin page ● Navbar ● Toolbar ● Dashboard ● Post Edit ● Widgets ● Default Admin Pages ● Plugins Page
  17. 17. StylingLets make things sexy
  18. 18. Wrap it up! <div class="wrap"> <!-- MAGIC GOES HERE -- > </div>
  19. 19. Admin UI Basics <div class="wrap"> <h1>WordCamp Detroit</h1> <div id="icon-users" class="icon32"></div> <h2>WordCamp Detroit</h2> <h3>WordCamp Detroit</h3> <h4>WordCamp Detroit</h4> <span>I will make better admin UIs</span> <br/><br/> <code>jQuery(#badUI).remove();</code> </div>
  20. 20. Buttons<div class="wrap"> <input class="button-primary" value="<?php _e(Save Options); ?>"type="button" /> <br /><br /> <input class="button-secondary" value="<?php _e(Empty Trash); ?>"type="button" /> <br /><br /> <a href="#" class="button-secondary">Dont click me</a></div>
  21. 21. Notices<div class="wrap"> <div class="updated"><p>Settings are saved!</p></div> <div class="error"><p>Oh no, it failed</p></div></div>
  22. 22. Forms
  23. 23. Forms (continued)<div class="wrap"> <form method="POST" action="<?php echo $_SERVER[REQUEST_URI]; ?>"> <table class="form-table"> <tr valign="top"> <th scope="row"> <label for="name">Name<span> *</span></label> </th> <td> <input id="name" maxlength="45" size="10" name="name" value=""type="text" /> <p class="description">What do they call you?</p> </td> </tr> <tr valign="top"> <th scope="row"> <label for="gender">Gender<span> *</span></label> </th> <td> <select id="gender" name="gender"> <option value="male">Male<option> <option value="female">Female<option> </select> </td> </tr>
  24. 24. Forms (continued, again)<tr valign="top"> <th scope="row"> <label for="aboutyou">About You</label> </th> <td> <textarea id="aboutyou"></textarea> </td> </tr> <tr valign="top"> <th scope="row"> <label for="awesome">Are you awesome?</label> </th> <td> <fieldset> <label for="awesome"> <input id="awesome" name="awesome" value="" type="checkbox"value="1" /> Umm, yeah! </label> </fieldset> </td> </tr>
  25. 25. Forms (continued, and again)<tr> <th scope="row"> <label for="color">Color</label> </th> <td> <fieldset> <legend class="screen-reader-text"><span>DateFormat</span></legend> <label title="red"> <input type="radio" name="color" value="red" checked="checked"> <span>Red</span> </label><br> <label title="blue"> <input type="radio" name="color" value="blue"> <span>Blue</span> </label><br> <label title="green"> <input type="radio" name="color" value="green"> <span>Green</span> </label><br> </fieldset> </table> </form></div>
  26. 26. Tabs <div class="wrap"> <h2 class="nav-tab-wrapper"> Just Some Tabs <a href="#" class="nav-tab nav-tab-active">Tab 1</a> <a href="#" class="nav-tab">Tab 2</a> </h2> </div>
  27. 27. Static Tables <div class="wrap"> <table class="widefat"> <thead><tr> <th>Name</th> <th>Email</th> </tr></thead> <tfoot><tr> <th>Name</th> <th>Email</th> </tr></tfoot> <tbody><tr> <td>Anthony Montalbano</td> <td>anthony@ambrdetroit.com</td> </tr></tbody> </table> </div>
  28. 28. InteractiveElementsClick, click, drag, clickity, click!
  29. 29. Scripts and StylesThere are many cases where you may want toinclude a javascript or style sheet with yourplugin. WordPress has this functionality builtin. By default WordPress has many scriptsincluded, such as jQuery. http://codex.wordpress.org/Function_Reference/wp_enqueue_script
  30. 30. Scripts and Styles (continued)Using a script <?php function my_scripts_method() { wp_enqueue_script(jquery); } add_action(wp_enqueue_scripts, my_scripts_method); ?>Adding a new script wp_register_script( simplr, https://raw.github. com/simplrteam/SimplrJS/master/dist/simplr.min.js);
  31. 31. Dynamic Tables In the codex: http://codex.wordpress.org/Function_Reference/WP_List_Table How to: http://wp.smashingmagazine.com/2011/11/03/native-admin-tables-wordpress/
  32. 32. Pagination <div class="wrap"> <div class="tablenav"> <?php $posts_per_page = 15; $num_of_records = 500; $page_links = paginate_links( array( base => add_query_arg( paged, %#% ), format => , prev_text => __(&laquo;), next_text => __(&raquo;), total => ceil($num_of_records/$posts_per_page), current => $_GET[paged] ));
  33. 33. Pagination (continued) if ( $page_links ) { ?> <div class="tablenav-pages"> <?php echo sprintf( <span class="displaying-num" > . __( Displaying %s–%s of %s ) . </span>%s, number_format_i18n( ( $_GET[paged] - 1 ) * $posts_per_page + 1 ), number_format_i18n( min( $_GET[paged] * $posts_per_page, $num_of_records ) ), number_format_i18n( $num_of_records ), $page_links ); ?> </div> <?php } ?> </div> </div> http://codex.wordpress.org/Function_Reference/paginate_links
  34. 34. Media UploaderHow to use the media uploader:http://wp.tutsplus.com/tutorials/creative-coding/how-to-integrate-the-wordpress-media-uploader-in-theme-and-plugin-options/
  35. 35. Admin PointersHow to add pointers:http://wp.tutsplus.com/tutorials/integrating-with-wordpress-ui-admin-pointers/
  36. 36. Data RetentionMaybe we should save that...
  37. 37. Options API// Create an option to the databaseadd_option( $option, $value = , $deprecated = , $autoload = yes );// Removes option by name.delete_option( $option );// Fetch a saved optionget_option( $option, $default = false );// Update the value of an option that was already added.update_option( $option, $newvalue ); http://codex.wordpress.org/Options_API
  38. 38. Transients API// Set a transientset_transient( special_query_results, $special_query_results, 60*60*12);// Remove a transient by name.delete_transient( special_query_results );// Fetch a saved optionget_transient( special_query_results); http://codex.wordpress.org/Transients_API
  39. 39. Settings API http://codex.wordpress.org/Settings_API
  40. 40. Widget Dataclass Example_Widget extends WP_Widget { // Displaying widget option value public function widget( $args, $instance ) { echo $instance[title]; } // Updating a widget option value public function update( $new_instance, $old_instance ) { $instance = array(); $instance[title] = strip_tags( $new_instance[title] ); return $instance; }} http://codex.wordpress.org/Widgets_API
  41. 41. Explore moreIts only just begun...
  42. 42. Admin UI Reference PluginDownload the plugin here: https://github.com/bueltge/WordPress-Admin-Style
  43. 43. Additional SourcesUI Pattern and Style Guidehttp://codex.wordpress.org/User:TECannon/UI_Pattern_and_Style_GuideCreating Admin Themeshttp://codex.wordpress.org/Creating_Admin_ThemesPosts Screenhttp://codex.wordpress.org/Posts_ScreenWordPress.org Style Guidehttp://dotorgstyleguide.wordpress.com/Unofficial WordPress Plugin User Interface Guidehttp://wpcandy.com/presents/wordpress-plugin-user-interface-guide
  44. 44. Contribute http://make.wordpress.org/ui/
  45. 45. Some final thoughts Keep it simple.
  46. 46. Some final thoughts
  47. 47. Thank you! Anthony Montalbano @italianst4anthony@ambrdetroit.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×