your custom wordpress admin pages suck
TRANSCRIPT
![Page 1: Your Custom WordPress Admin Pages Suck](https://reader033.vdocuments.site/reader033/viewer/2022060109/5558c560d8b42a235c8b476a/html5/thumbnails/1.jpg)
Anthony Montalbano @italianst4
Your Custom WordPress Admin Pages Suck(and how to make them unsucky)
![Page 2: Your Custom WordPress Admin Pages Suck](https://reader033.vdocuments.site/reader033/viewer/2022060109/5558c560d8b42a235c8b476a/html5/thumbnails/2.jpg)
Who is Anthony Montalbano?
Passionate for codeBachelor's in Computer Science
Passionate for WordPressWordCamp Detroit Organizer, Plugin/Theme Developer
Passionate for open sourceWordPress plugin developer
Passionate for wordsSerial blogger
Passionate for possibilitiesCo-founder of flipfrog and AMBR Detroit
source: iamthecoolestpersonever.com
![Page 3: Your Custom WordPress Admin Pages Suck](https://reader033.vdocuments.site/reader033/viewer/2022060109/5558c560d8b42a235c8b476a/html5/thumbnails/3.jpg)
What are you talking about?!
![Page 4: Your Custom WordPress Admin Pages Suck](https://reader033.vdocuments.site/reader033/viewer/2022060109/5558c560d8b42a235c8b476a/html5/thumbnails/4.jpg)
What are you talking about?!
![Page 5: Your Custom WordPress Admin Pages Suck](https://reader033.vdocuments.site/reader033/viewer/2022060109/5558c560d8b42a235c8b476a/html5/thumbnails/5.jpg)
What are you talking about?!
![Page 6: Your Custom WordPress Admin Pages Suck](https://reader033.vdocuments.site/reader033/viewer/2022060109/5558c560d8b42a235c8b476a/html5/thumbnails/6.jpg)
What are you talking about?!
More examples...http://themeoptions.wordpress.com/
A need rant...http://wpcandy.com/thinks/custom-admin-screens-are-the-worst
Comment rant...http://wpcandy.com/thinks/custom-admin-screens-are-the-
worst#comment-127921
![Page 7: Your Custom WordPress Admin Pages Suck](https://reader033.vdocuments.site/reader033/viewer/2022060109/5558c560d8b42a235c8b476a/html5/thumbnails/7.jpg)
What are you talking about?!
"This stuff needs to stop."
~Ryan Imel
![Page 8: Your Custom WordPress Admin Pages Suck](https://reader033.vdocuments.site/reader033/viewer/2022060109/5558c560d8b42a235c8b476a/html5/thumbnails/8.jpg)
First World Problem?
![Page 9: Your Custom WordPress Admin Pages Suck](https://reader033.vdocuments.site/reader033/viewer/2022060109/5558c560d8b42a235c8b476a/html5/thumbnails/9.jpg)
Be a Good Guy Greg!
![Page 10: Your Custom WordPress Admin Pages Suck](https://reader033.vdocuments.site/reader033/viewer/2022060109/5558c560d8b42a235c8b476a/html5/thumbnails/10.jpg)
The WordPress AdminIt's in the details...
![Page 11: Your Custom WordPress Admin Pages Suck](https://reader033.vdocuments.site/reader033/viewer/2022060109/5558c560d8b42a235c8b476a/html5/thumbnails/11.jpg)
The WordPress Admin
Icons
![Page 12: Your Custom WordPress Admin Pages Suck](https://reader033.vdocuments.site/reader033/viewer/2022060109/5558c560d8b42a235c8b476a/html5/thumbnails/12.jpg)
The WordPress Admin
Header
![Page 13: Your Custom WordPress Admin Pages Suck](https://reader033.vdocuments.site/reader033/viewer/2022060109/5558c560d8b42a235c8b476a/html5/thumbnails/13.jpg)
The WordPress Admin
Buttons
![Page 14: Your Custom WordPress Admin Pages Suck](https://reader033.vdocuments.site/reader033/viewer/2022060109/5558c560d8b42a235c8b476a/html5/thumbnails/14.jpg)
The WordPress Admin
Forms
![Page 15: Your Custom WordPress Admin Pages Suck](https://reader033.vdocuments.site/reader033/viewer/2022060109/5558c560d8b42a235c8b476a/html5/thumbnails/15.jpg)
The WordPress Admin
Containers
![Page 16: Your Custom WordPress Admin Pages Suck](https://reader033.vdocuments.site/reader033/viewer/2022060109/5558c560d8b42a235c8b476a/html5/thumbnails/16.jpg)
Locating your admin page
● Navbar● Toolbar● Dashboard● Post Edit● Widgets● Default Admin Pages● Plugins Page
![Page 17: Your Custom WordPress Admin Pages Suck](https://reader033.vdocuments.site/reader033/viewer/2022060109/5558c560d8b42a235c8b476a/html5/thumbnails/17.jpg)
StylingLet's make things sexy
![Page 18: Your Custom WordPress Admin Pages Suck](https://reader033.vdocuments.site/reader033/viewer/2022060109/5558c560d8b42a235c8b476a/html5/thumbnails/18.jpg)
Wrap it up!
<div class="wrap">
<!-- MAGIC GOES HERE --> </div>
![Page 19: Your Custom WordPress Admin Pages Suck](https://reader033.vdocuments.site/reader033/viewer/2022060109/5558c560d8b42a235c8b476a/html5/thumbnails/19.jpg)
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>
![Page 20: Your Custom WordPress Admin Pages Suck](https://reader033.vdocuments.site/reader033/viewer/2022060109/5558c560d8b42a235c8b476a/html5/thumbnails/20.jpg)
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">Don't click me</a></div>
![Page 21: Your Custom WordPress Admin Pages Suck](https://reader033.vdocuments.site/reader033/viewer/2022060109/5558c560d8b42a235c8b476a/html5/thumbnails/21.jpg)
Notices
<div class="wrap"> <div class="updated"><p>Settings are saved!</p></div> <div class="error"><p>Oh no, it failed</p></div></div>
![Page 22: Your Custom WordPress Admin Pages Suck](https://reader033.vdocuments.site/reader033/viewer/2022060109/5558c560d8b42a235c8b476a/html5/thumbnails/22.jpg)
Forms
![Page 23: Your Custom WordPress Admin Pages Suck](https://reader033.vdocuments.site/reader033/viewer/2022060109/5558c560d8b42a235c8b476a/html5/thumbnails/23.jpg)
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>
![Page 24: Your Custom WordPress Admin Pages Suck](https://reader033.vdocuments.site/reader033/viewer/2022060109/5558c560d8b42a235c8b476a/html5/thumbnails/24.jpg)
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>
![Page 25: Your Custom WordPress Admin Pages Suck](https://reader033.vdocuments.site/reader033/viewer/2022060109/5558c560d8b42a235c8b476a/html5/thumbnails/25.jpg)
Forms (continued, and again)<tr> <th scope="row"> <label for="color">Color</label> </th> <td> <fieldset> <legend class="screen-reader-text"><span>Date Format</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>
![Page 26: Your Custom WordPress Admin Pages Suck](https://reader033.vdocuments.site/reader033/viewer/2022060109/5558c560d8b42a235c8b476a/html5/thumbnails/26.jpg)
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>
![Page 27: Your Custom WordPress Admin Pages Suck](https://reader033.vdocuments.site/reader033/viewer/2022060109/5558c560d8b42a235c8b476a/html5/thumbnails/27.jpg)
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>[email protected]</td> </tr></tbody> </table></div>
![Page 28: Your Custom WordPress Admin Pages Suck](https://reader033.vdocuments.site/reader033/viewer/2022060109/5558c560d8b42a235c8b476a/html5/thumbnails/28.jpg)
Interactive ElementsClick, click, drag, clickity, click!
![Page 29: Your Custom WordPress Admin Pages Suck](https://reader033.vdocuments.site/reader033/viewer/2022060109/5558c560d8b42a235c8b476a/html5/thumbnails/29.jpg)
Scripts and Styles
There are many cases where you may want to include a javascript or style sheet with your plugin. WordPress has this functionality built in. By default WordPress has many scripts included, such as jQuery.
http://codex.wordpress.org/Function_Reference/wp_enqueue_script
![Page 30: Your Custom WordPress Admin Pages Suck](https://reader033.vdocuments.site/reader033/viewer/2022060109/5558c560d8b42a235c8b476a/html5/thumbnails/30.jpg)
Scripts and Styles (continued)
<?phpfunction my_scripts_method() { wp_enqueue_script('jquery'); } add_action('wp_enqueue_scripts', 'my_scripts_method');?>
wp_register_script( 'simplr', 'https://raw.github.com/simplrteam/SimplrJS/master/dist/simplr.min.js');
Using a script
Adding a new script
![Page 31: Your Custom WordPress Admin Pages Suck](https://reader033.vdocuments.site/reader033/viewer/2022060109/5558c560d8b42a235c8b476a/html5/thumbnails/31.jpg)
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/
![Page 32: Your Custom WordPress Admin Pages Suck](https://reader033.vdocuments.site/reader033/viewer/2022060109/5558c560d8b42a235c8b476a/html5/thumbnails/32.jpg)
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' => __('«'), 'next_text' => __('»'), 'total' => ceil($num_of_records/$posts_per_page), 'current' => $_GET['paged'] ));
![Page 33: Your Custom WordPress Admin Pages Suck](https://reader033.vdocuments.site/reader033/viewer/2022060109/5558c560d8b42a235c8b476a/html5/thumbnails/33.jpg)
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
![Page 34: Your Custom WordPress Admin Pages Suck](https://reader033.vdocuments.site/reader033/viewer/2022060109/5558c560d8b42a235c8b476a/html5/thumbnails/34.jpg)
Media Uploader
How to use the media uploader:http://wp.tutsplus.com/tutorials/creative-coding/how-to-integrate-the-wordpress-media-uploader-in-theme-and-plugin-options/
![Page 35: Your Custom WordPress Admin Pages Suck](https://reader033.vdocuments.site/reader033/viewer/2022060109/5558c560d8b42a235c8b476a/html5/thumbnails/35.jpg)
Admin Pointers
How to add pointers:http://wp.tutsplus.com/tutorials/integrating-with-wordpress-ui-admin-pointers/
![Page 36: Your Custom WordPress Admin Pages Suck](https://reader033.vdocuments.site/reader033/viewer/2022060109/5558c560d8b42a235c8b476a/html5/thumbnails/36.jpg)
Data RetentionMaybe we should save that...
![Page 37: Your Custom WordPress Admin Pages Suck](https://reader033.vdocuments.site/reader033/viewer/2022060109/5558c560d8b42a235c8b476a/html5/thumbnails/37.jpg)
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
![Page 38: Your Custom WordPress Admin Pages Suck](https://reader033.vdocuments.site/reader033/viewer/2022060109/5558c560d8b42a235c8b476a/html5/thumbnails/38.jpg)
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
![Page 39: Your Custom WordPress Admin Pages Suck](https://reader033.vdocuments.site/reader033/viewer/2022060109/5558c560d8b42a235c8b476a/html5/thumbnails/39.jpg)
Settings API
http://codex.wordpress.org/Settings_API
![Page 40: Your Custom WordPress Admin Pages Suck](https://reader033.vdocuments.site/reader033/viewer/2022060109/5558c560d8b42a235c8b476a/html5/thumbnails/40.jpg)
Widget Data
class Example_Widget extends WP_Widget {// Displaying widget option valuepublic function widget( $args, $instance ) {
echo $instance['title'];}
// Updating a widget option valuepublic function update( $new_instance, $old_instance ) {
$instance = array();$instance['title'] = strip_tags( $new_instance['title'] );
return $instance;}
}
http://codex.wordpress.org/Widgets_API
![Page 41: Your Custom WordPress Admin Pages Suck](https://reader033.vdocuments.site/reader033/viewer/2022060109/5558c560d8b42a235c8b476a/html5/thumbnails/41.jpg)
Explore moreIt's only just begun...
![Page 42: Your Custom WordPress Admin Pages Suck](https://reader033.vdocuments.site/reader033/viewer/2022060109/5558c560d8b42a235c8b476a/html5/thumbnails/42.jpg)
Admin UI Reference Plugin
Download the plugin here:https://github.com/bueltge/WordPress-Admin-Style
![Page 43: Your Custom WordPress Admin Pages Suck](https://reader033.vdocuments.site/reader033/viewer/2022060109/5558c560d8b42a235c8b476a/html5/thumbnails/43.jpg)
Additional Sources
UI Pattern and Style Guidehttp://codex.wordpress.org/User:TECannon/UI_Pattern_and_Style_Guide
Creating Admin Themeshttp://codex.wordpress.org/Creating_Admin_Themes
Posts Screenhttp://codex.wordpress.org/Posts_Screen
WordPress.org Style Guidehttp://dotorgstyleguide.wordpress.com/
Unofficial WordPress Plugin User Interface Guidehttp://wpcandy.com/presents/wordpress-plugin-user-interface-guide
![Page 44: Your Custom WordPress Admin Pages Suck](https://reader033.vdocuments.site/reader033/viewer/2022060109/5558c560d8b42a235c8b476a/html5/thumbnails/44.jpg)
Contribute
http://make.wordpress.org/ui/
![Page 45: Your Custom WordPress Admin Pages Suck](https://reader033.vdocuments.site/reader033/viewer/2022060109/5558c560d8b42a235c8b476a/html5/thumbnails/45.jpg)
Some final thoughts
Keep it simple.
![Page 46: Your Custom WordPress Admin Pages Suck](https://reader033.vdocuments.site/reader033/viewer/2022060109/5558c560d8b42a235c8b476a/html5/thumbnails/46.jpg)
Some final thoughts