{"id":23,"date":"2017-04-13T11:47:04","date_gmt":"2017-04-13T11:47:04","guid":{"rendered":"http:\/\/localhost\/portfolio\/blog\/?p=23"},"modified":"2020-01-03T10:30:17","modified_gmt":"2020-01-03T10:30:17","slug":"dynamic-dependent-dropdown-categories-posts","status":"publish","type":"post","link":"https:\/\/webprow.com\/blog\/dynamic-dependent-dropdown-categories-posts\/","title":{"rendered":"Dynamic dependent Dropdown – Categories posts"},"content":{"rendered":"

This post guides you to how \u00a0dynamically add drop down of wp posts categories, and \u00a0based on the selection of category from drop down \u00a0sub-categories or posts will show in another drop down.<\/p>\n

Add Below codes (steps 1,2,3,3-1)<\/strong> in functions.php.<\/strong><\/p>\n

STEP 1: Registering Ajax functions<\/strong><\/p>\n

if ( ! class_exists( 'frontendAjaxDropdown' ) ):\r\n class frontendAjaxDropdown\r\n {\r\n \/**\r\n * Loading WordPress hooks\r\n *\/\r\n function __construct()\r\n {\r\n \/**\r\n * Add shortcode function\r\n *\/\r\n add_shortcode( 'ajax-dropdown', array($this, 'init_shortocde') );\r\n \/**\r\n * Register ajax action\r\n *\/\r\n add_action( 'wp_ajax_get_subcat', array($this, 'getSubCat') );\r\n \/**\r\n * Register ajax action for non loged in user\r\n *\/\r\n add_action('wp_ajax_nopriv_get_subcat', array($this, 'getSubCat') );\r\n }<\/pre>\n
STEP 2:\u00a0Get categories in drop down<\/strong><\/p>\n
function init_shortocde()\r\n {\r\n wp_dropdown_categories(\r\n 'name=main_cat&selected=-1&hierarchical=1&depth=1&hide_empty=0&show_option_none=All Categories'\r\n );\r\n ?>\r\n <script type=\"text\/javascript\">\r\n (function($){\r\n $(\"#main_cat\").change(function(){\r\n $(\"#sub_cat\").empty();\r\n $.ajax({\r\n type: \"post\",\r\n url: \"<?php echo admin_url( 'admin-ajax.php' ); ?>\",\r\n data: { action: 'get_subcat', cat_id: $(\"#main_cat option:selected\").val() },\r\n beforeSend: function() {$(\"#loading\").fadeIn('slow');},\r\n success: function(data) {\r\n $(\"#loading\").fadeOut('slow');\r\n $(\"#sub_cat\").append(data);\r\n }\r\n });\r\n });\r\n })(jQuery);\r\n <\/script>\r\n\r\n<div id=\"loading\" style=\"display: none;\">Loading...<\/div>\r\n <div id=\"sub_cat\"><\/div>\r\n <?php\r\n }<\/pre>\n
STEP 3 : To get sub-category of selected parent category<\/strong><\/p>\n
\/**\r\n * AJAX action: Shows dropdown for selected parent\r\n *\/\r\n function getSubCat()\r\n {\r\n wp_dropdown_categories(\r\n \"name=sub_cat&selected=-1&hierarchical=1&depth=1&hide_empty=0&child_of={$_POST['cat_id']}\"\r\n );\r\n die();\r\n }\r\n }\r\nendif;\r\nnew frontendAjaxDropdown();<\/pre>\n
STEP 3-1 :\u00a0To get only posts\u00a0of selected parent category<\/strong><\/p>\n
Note :<\/strong><\/span> Replace the Below\u00a0code with Above one(STEP 3) to get posts.<\/p>\n
function getSubCat()\r\n { \r\n$cat_id = $_POST['cat_id'];\r\n$args=array(\r\n'cat' => $cat_id,\r\n'post_type' => 'YOUR POST TYPE',\/\/ You can set custom post type here\r\n'post_status' => 'publish',\r\n\r\n);\r\n$my_query = null;\r\n$my_query = new WP_Query($args);\r\nif( $my_query->have_posts() ) {\r\n?>\r\n<strong>Select Products :<\/strong>\r\n<select name=\"menu[]\" class=\"form-control\" multiple> \/\/Remove multiple option if you don't needed\r\n<?php\r\nwhile ($my_query->have_posts()) : $my_query->the_post(); ?>\r\n<option value=\"<?php the_title() ?>\" ><?php the_title(); ?> <\/option>\r\n<?php\r\nendwhile;\r\n\r\n?>\r\n<\/select>\r\n<?php \r\nwp_reset_query();\r\n?> <?php }}\r\n }\r\nendif;\r\nnew frontendAjaxDropdown();<\/pre>\n
Final code : (Replace the code for posts Refer Step 3-1)<\/strong><\/p>\n
if ( ! class_exists( 'frontendAjaxDropdown' ) ):\r\n class frontendAjaxDropdown\r\n {\r\n \/**\r\n * Loading WordPress hooks\r\n *\/\r\n function __construct()\r\n {\r\n \/**\r\n * Add shortcode function\r\n *\/\r\n add_shortcode( 'ajax-dropdown', array($this, 'init_shortocde') );\r\n \/**\r\n * Register ajax action\r\n *\/\r\n add_action( 'wp_ajax_get_subcat', array($this, 'getSubCat') );\r\n \/**\r\n * Register ajax action for non loged in user\r\n *\/\r\n add_action('wp_ajax_nopriv_get_subcat', array($this, 'getSubCat') );\r\n }\r\n \/**\r\n * Show parent dropdown for wordpress category and loaded necessarry javascripts\r\n *\/\r\n function init_shortocde()\r\n {\r\n wp_dropdown_categories(\r\n 'name=main_cat&selected=-1&hierarchical=1&depth=1&hide_empty=0&show_option_none=All Categories'\r\n );\r\n ?>\r\n <script type=\"text\/javascript\">\r\n (function($){\r\n $(\"#main_cat\").change(function(){\r\n $(\"#sub_cat\").empty();\r\n $.ajax({\r\n type: \"post\",\r\n url: \"<?php echo admin_url( 'admin-ajax.php' ); ?>\",\r\n data: { action: 'get_subcat', cat_id: $(\"#main_cat option:selected\").val() },\r\n beforeSend: function() {$(\"#loading\").fadeIn('slow');},\r\n success: function(data) {\r\n $(\"#loading\").fadeOut('slow');\r\n $(\"#sub_cat\").append(data);\r\n }\r\n });\r\n });\r\n })(jQuery);\r\n <\/script>\r\n\r\n<div id=\"loading\" style=\"display: none;\">Loading...<\/div>\r\n <div id=\"sub_cat\"><\/div>\r\n <?php\r\n }\r\n \/**\r\n * AJAX action: Shows dropdown for selected parent\r\n *\/\r\n function getSubCat()\r\n {\r\n wp_dropdown_categories(\r\n \"name=sub_cat&selected=-1&hierarchical=1&depth=1&hide_empty=0&child_of={$_POST['cat_id']}\"\r\n );\r\n die();\r\n }\r\n }\r\nendif;\r\nnew frontendAjaxDropdown();<\/pre>\n
STEP 4 : To get it work place the below short code where do you need show in front end page or post<\/strong><\/p>\n
[ajax-dropdown]<\/pre>\n","protected":false},"excerpt":{"rendered":"
This post guides you to how \u00a0dynamically add drop down of wp posts categories, and \u00a0based on the selection of category from drop down \u00a0sub-categories or posts will show in another drop down. Add Below codes (steps 1,2,3,3-1) in functions.php. STEP 1: Registering Ajax functions if ( ! class_exists( ‘frontendAjaxDropdown’ ) ): class frontendAjaxDropdown { […]<\/p>\n","protected":false},"author":1,"featured_media":154,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[5,4],"class_list":["post-23","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-ajax","tag-dropdown"],"_links":{"self":[{"href":"https:\/\/webprow.com\/blog\/wp-json\/wp\/v2\/posts\/23","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webprow.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webprow.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webprow.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webprow.com\/blog\/wp-json\/wp\/v2\/comments?post=23"}],"version-history":[{"count":1,"href":"https:\/\/webprow.com\/blog\/wp-json\/wp\/v2\/posts\/23\/revisions"}],"predecessor-version":[{"id":122,"href":"https:\/\/webprow.com\/blog\/wp-json\/wp\/v2\/posts\/23\/revisions\/122"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webprow.com\/blog\/wp-json\/wp\/v2\/media\/154"}],"wp:attachment":[{"href":"https:\/\/webprow.com\/blog\/wp-json\/wp\/v2\/media?parent=23"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webprow.com\/blog\/wp-json\/wp\/v2\/categories?post=23"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webprow.com\/blog\/wp-json\/wp\/v2\/tags?post=23"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}