Boone’s Sortable Columns is a new WordPress plugin to make it easier for developers of WordPress plugins and themes to create sortable data tables and lists. Like my recent Boone’s Pagination, this is not a plugin for end users but for developers. (And, by the way, Boone’s Sortable Columns goes with Boone’s Pagination like strawberries go with rhubarb. More on that in a minute.)
If you’re building a client site, you can activate the plugin directly in the WordPress Dashboard, and instantiate the class anywhere in your installation. Or, if you’re the developer of a theme or plugin that you’ll be distributing for wide use, you can simply copy the file boones-sortable-columns.php into your own plugin/theme (I recommend a directory called ‘lib’), and then require it manually when you want to do some sortin’.
The plugin is extensively documented inline. I highly recommend that you crack open the source if you have questions about the kinds of options that Boone’s Sortable Columns provides. But, as a quick introduction, here’s a simple example of how you might use the class in your own plugin. Let’s say you have a custom post type called ‘restaurant’, and you want to display a list of restaurants that is sortable by restaurant name, the date when the restaurant was added to the site, and the name of the person who submitted the restaurant (the post author). Here’s the code you might use for a simple table, with my comments and explanations inline.
[code language=”php”]
// Include Boone’s Sortable Columns. You only need to do this if you’re not running it as a
// standalone plugin. Obviously, you’ll need to put the proper path for your plugin.
require_once( WP_CONTENT_DIR . ‘/my-plugin-name/lib/boones-sortable-columns.php’ );
// Define an array of column data.
// For more details on these (and more!) arguments, see the plugin’s inline docs.
$cols = array(
array(
‘name’ => ‘title’,
‘title’ => ‘Restaurant Name’,
‘css_class’ => ‘restaurant-name’,
‘is_default’ => true
),
array(
‘name’ => ‘author’,
‘title’ => ‘Creator’,
‘css_class’ => ‘creator’
),
array(
‘name’ => ‘date’,
‘title’ => ‘Date Added’,
‘css_class’ => ‘date-added’,
‘default_order’ => ‘desc’
)
);
// Create the sorting object based on this column data.
$sortable = new BBG_CPT_Sort( $cols );
// Use some of the data from the $sortable object to help you build a posts query.
// In this example, I’ve intentionally chosen sortable options that can be passed directly to the
// ‘orderby’ param, because they are accepted directly by WP_Query (see http://codex.wordpress.org/Function_Reference/WP_Query#Order_.26_Orderby_Parameters for more details).
// In real life, your query might require something more complex, like the building of a meta_query.
$query_args = array(
‘post_type’ => ‘restaurant’,
‘orderby’ => $sortable->get_orderby,
‘order’ => $sortable->get_order
);
// Fire the query
$restaurants = new WP_Query( $query_args );
// Now let’s create the table markup. Here’s where the magic really happens.
?>
have_posts() ) : ?>
| “>the_column_title() ?> | ||
|---|---|---|
[/code]
Boone’s Sortable Columns handles everything else for you. It figures out what the current orderby/order parameters are. It figures out what the href on the column headers should be. It even creates CSS selectors for the <th> element that match what WP itself uses in the ‘widefat’ tables on the Dashboard, so that you can take advantage of all the pretty JS and CSS built into the WP admin interface. In fact, if this were a Dashboard page, you could simplify the <thead> described above as follows:
[code language=”php”]
have_columns ) : $sortable->the_column() ?>
the_column_th() ?>
[/code]
The method the_column_th() will build the markup for you. Ain’t that the bee’s knees?
Together with Boone’s Pagination
Boone’s Sortable Columns is made more scrumptious when combined with Boone’s Pagination. Here’s a compressed (uncommented) version of the example above, this time with some pagination code.
[code language=”php”]
require_once( WP_CONTENT_DIR . ‘/my-plugin-name/lib/boones-sortable-columns.php’ );
require_once( WP_CONTENT_DIR . ‘/my-plugin-name/lib/boones-pagination.php’ );
$cols = array(
array(
‘name’ => ‘title’,
‘title’ => ‘Restaurant Name’,
‘css_class’ => ‘restaurant-name’,
‘is_default’ => true
),
array(
‘name’ => ‘author’,
‘title’ => ‘Creator’,
‘css_class’ => ‘creator’
),
array(
‘name’ => ‘date’,
‘title’ => ‘Date Added’,
‘css_class’ => ‘date-added’,
‘default_order’ => ‘desc’
)
);
$sortable = new BBG_CPT_Sort( $cols );
$pagination = new BBG_CPT_Pagination();
$query_args = array(
‘post_type’ => ‘restaurant’,
‘orderby’ => $sortable->get_orderby,
‘order’ => $sortable->get_order,
‘paged’ => $pagination->get_paged,
‘per_page’ => $pagination->get_per_page
);
$restaurants = new WP_Query( $query_args );
$pagination->setup_query( $restaurants );
?>
have_posts() ) : ?>
| “>the_column_title() ?> | ||
|---|---|---|
[/code]
Sweet, huh? If you want to see some real-life, more complex examples of Boone’s Pagination and Boone’s Sortable Columns in use, check out Invite Anyone (where the data is a custom post type, as in the example above – see method invite_anyone_settings_mi_content()) or Unconfirmed (where the data actually comes from a custom query of the wp_signups table – look for the admin_panel_main() method).
You can get Boone’s Sortable Columns from the wordpress.org repo or follow its development on Github.
