Creating a simpleCustom Post Type sort UIfor WordPressusing jQuery UI Sortable

Introduction

● Custom Post Types - they are just like Posts, but not at all○ we can have many of them - sliders, portfolio

items, articles, etc.○ they can have title, content, thumbnail - just like a

regular Post○ they can be sorted and visualized in the defined

order● jQueryUI provides Sortable UI● WordPress includes jQueryUI in the package

Workflow

1. Register our Portfolio Custom Post Type2. Create the template for the Sort Page &

include it in Admin Menu○ print Portfolio items into unordered list (<ul>)

3. Include JS & CSS resources4. Init jQueryUI Sortable on our Portfolio items5. Create the client-side update logic6. Create the DB update order logic

Register Custom Post Type - Portfolio

● register_post_type()● hook it to "init"

Create the template for the Sort Page

● get all Portfolio Posts using new WP_Query()

● add menu item using add_submenu_page()● hook to "admin_menu"

Include JS & CSS resources

● wp_register_style()● wp_register_script()● hook to "admin_print_styles" &

"admin_print_scripts"

Init jQueryUI Sortable

● $('.my-list').sortable()

Create the client-side update logic

● add update callback - execute AJAX request○ "url" should point be default WordPress AJAX

Handler■ a global JS variable is defined - ajaxurl

○ "data" params■ "action" - our unique identifier ("portfolio_sort")■ "post_ids_ordered" - an array of Post IDs in the

desired order

Create the DB update order logic

● hook to "wp_ajax_<action-identifier>" (in our case this would be "wp_ajax_portfolio_sort")

● update each Post's "menu_order" property

What if we have too manyPortfolio items?

● Enable the built-in Menu Order input'hierarchical' => true in register_post_type()

Questions?

Resources

● WordPress Function Referencehttp://codex.wordpress.org/Function_Reference/

● jQueryUI Sortablehttp://jqueryui.com/sortable/

● jQueryUI Sortable APIhttp://api.jqueryui.com/sortable/

Thank you!http://facebook.com/ickatanet/http://blog.ickata.net/