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
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
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"
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 Posts "menu_order" property
What if we have too manyPortfolio items?● Enable the built-in Menu Order input hierarchical => true in register_post_type()