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, portfol...
Workflow1. Register our Portfolio Custom Post Type2. Create the template for the Sort Page &   include it in Admin Menu   ...
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...
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...
Create the DB update order logic● hook to "wp_ajax_<action-identifier>" (in  our case this would be  "wp_ajax_portfolio_so...
What if we have too manyPortfolio items?● Enable the built-in Menu Order input  hierarchical => true in  register_post_typ...
Questions?
Resources● WordPress Function Reference  http://codex.wordpress.org/Function_Reference/● jQueryUI Sortable  http://jqueryu...
Thank you!http://facebook.com/ickatanet/http://blog.ickata.net/
Upcoming SlideShare
Loading in …5
×

Creating a simple Custom Post Type sort UI

1,962 views

Published on

for WordPress using jQuery UI Sortable

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,962
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Creating a simple Custom Post Type sort UI

  1. 1. Creating a simpleCustom Post Type sort UIfor WordPressusing jQuery UI Sortable
  2. 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. 3. Workflow1. 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
  4. 4. Register Custom Post Type - Portfolio● register_post_type()● hook it to "init"
  5. 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. 6. Include JS & CSS resources● wp_register_style()● wp_register_script()● hook to "admin_print_styles" & "admin_print_scripts"
  7. 7. Init jQueryUI Sortable● $(.my-list).sortable()
  8. 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. 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 Posts "menu_order" property
  10. 10. What if we have too manyPortfolio items?● Enable the built-in Menu Order input hierarchical => true in register_post_type()
  11. 11. Questions?
  12. 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. 13. Thank you!http://facebook.com/ickatanet/http://blog.ickata.net/

×