your custom wordpress admin pages suck

47
Anthony Montalbano @italianst4 [email protected] Your Custom WordPress Admin Pages Suck (and how to make them unsucky)

Upload: anthony-montalbano

Post on 17-May-2015

9.232 views

Category:

Education


0 download

TRANSCRIPT

Page 1: Your Custom WordPress Admin Pages Suck

Anthony Montalbano @italianst4

[email protected]

Your Custom WordPress Admin Pages Suck(and how to make them unsucky)

Page 2: Your Custom WordPress Admin Pages Suck

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

What are you talking about?!

Page 4: Your Custom WordPress Admin Pages Suck

What are you talking about?!

Page 5: Your Custom WordPress Admin Pages Suck

What are you talking about?!

Page 6: Your Custom WordPress Admin Pages Suck

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

What are you talking about?!

"This stuff needs to stop."

~Ryan Imel

Page 8: Your Custom WordPress Admin Pages Suck

First World Problem?

Page 9: Your Custom WordPress Admin Pages Suck

Be a Good Guy Greg!

Page 10: Your Custom WordPress Admin Pages Suck

The WordPress AdminIt's in the details...

Page 11: Your Custom WordPress Admin Pages Suck

The WordPress Admin

Icons

Page 12: Your Custom WordPress Admin Pages Suck

The WordPress Admin

Header

Page 13: Your Custom WordPress Admin Pages Suck

The WordPress Admin

Buttons

Page 14: Your Custom WordPress Admin Pages Suck

The WordPress Admin

Forms

Page 15: Your Custom WordPress Admin Pages Suck

The WordPress Admin

Containers

Page 16: Your Custom WordPress Admin Pages Suck

Locating your admin page

● Navbar● Toolbar● Dashboard● Post Edit● Widgets● Default Admin Pages● Plugins Page

Page 17: Your Custom WordPress Admin Pages Suck

StylingLet's make things sexy

Page 18: Your Custom WordPress Admin Pages Suck

Wrap it up!

<div class="wrap">

<!-- MAGIC GOES HERE --> </div>

Page 19: Your Custom WordPress Admin Pages Suck

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

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

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

Forms

Page 23: Your Custom WordPress Admin Pages Suck

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

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

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

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

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

Interactive ElementsClick, click, drag, clickity, click!

Page 29: Your Custom WordPress Admin Pages Suck

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

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

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

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'] ));

Page 33: Your Custom WordPress Admin Pages Suck

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

Page 34: Your Custom WordPress Admin Pages Suck

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

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

Data RetentionMaybe we should save that...

Page 37: Your Custom WordPress Admin Pages Suck

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

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

Settings API

http://codex.wordpress.org/Settings_API

Page 40: Your Custom WordPress Admin Pages Suck

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

Explore moreIt's only just begun...

Page 42: Your Custom WordPress Admin Pages Suck

Admin UI Reference Plugin

Download the plugin here:https://github.com/bueltge/WordPress-Admin-Style

Page 43: Your Custom WordPress Admin Pages Suck

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

Contribute

http://make.wordpress.org/ui/

Page 45: Your Custom WordPress Admin Pages Suck

Some final thoughts

Keep it simple.

Page 46: Your Custom WordPress Admin Pages Suck

Some final thoughts

Page 47: Your Custom WordPress Admin Pages Suck

Thank you!

Anthony Montalbano

@italianst4

[email protected]