Your Custom WordPress Admin Pages Suck
Upcoming SlideShare
Loading in...5
×
 

Your Custom WordPress Admin Pages Suck

on

  • 9,001 views

 

Statistics

Views

Total Views
9,001
Views on SlideShare
8,914
Embed Views
87

Actions

Likes
3
Downloads
50
Comments
0

7 Embeds 87

http://www.stonepower.fr 57
http://lanyrd.com 16
http://www.conseilsmarketing.com 7
http://www.paperblog.fr 3
https://twitter.com 2
http://pigeindexeroff 1
http://matiweb.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

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

Your Custom WordPress Admin Pages Suck Your Custom WordPress Admin Pages Suck Presentation Transcript

  • Your Custom WordPressAdmin Pages Suck(and how to make them unsucky)Anthony Montalbano @italianst4 anthony@ambrdetroit.com
  • 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
  • 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://wpcandy.com/thinks/custom-admin-screens-are-the-worstComment rant... http://wpcandy.com/thinks/custom-admin-screens-are-the- worst#comment-127921
  • 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 ● Plugins Page
  • 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" 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>
  • 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>
  • Notices<div class="wrap"> <div class="updated"><p>Settings are saved!</p></div> <div class="error"><p>Oh no, it failed</p></div></div>
  • Forms
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • InteractiveElementsClick, click, drag, clickity, click!
  • 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
  • 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);
  • 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/
  • 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] ));
  • Pagination (continued) if ( $page_links ) { ?> <div class="tablenav-pages"> <?php echo sprintf( <span class="displaying-num" > . __( Displaying %s&#8211;%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
  • 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/
  • 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 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
  • 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
  • Settings API http://codex.wordpress.org/Settings_API
  • 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
  • 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 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
  • Contribute http://make.wordpress.org/ui/
  • Some final thoughts Keep it simple.
  • Some final thoughts
  • Thank you! Anthony Montalbano @italianst4anthony@ambrdetroit.com