1. Creating a simple
Custom Post Type sort UI
for WordPress
using jQuery UI Sortable

2. 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

3. Workflow
1. Register our Portfolio Custom Post Type
2. Create the template for the Sort Page &
include it in Admin Menu
○ print Portfolio items into unordered list (<ul>)
3. Include JS & CSS resources
4. Init jQueryUI Sortable on our Portfolio items
5. Create the client-side update logic
6. Create the DB update order logic

4. Register Custom Post Type - Portfolio
● register_post_type()
● hook it to "init"

5. 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"

6. Include JS & CSS resources
● wp_register_style()
● wp_register_script()
● hook to "admin_print_styles" &
"admin_print_scripts"

7. Init jQueryUI Sortable
● $('.my-list').sortable()

8. 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

9. 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

10. What if we have too many
Portfolio items?
● Enable the built-in Menu Order input
'hierarchical' => true in
register_post_type()

11. Questions?

12. Resources
● WordPress Function Reference
http://codex.wordpress.org/Function_Reference/
● jQueryUI Sortable
http://jqueryui.com/sortable/
● jQueryUI Sortable API
http://api.jqueryui.com/sortable/

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