I am new to programming and i am trying to create 4 level drop down. As of now i am referring to the link here.
With the above link, i can only create 2 level drop down. Since my programming skills are on the beginner side, i am not sure how to achieve this.
I have created wordpress categories like this:
Parent Category > Child 1 Category > Child 2 Category > Child 3 Category
There should be 4 Drop Down:
Parent Drop Down
Child1 Drop Down
Child2 Drop Down
Child 3 Drop Down
Once the user selects all the drop down, it should redirect to a post with customize links as follows:
http://www.example.com/parent/child1/child2/child3/
Is it possible to create 4 level drop down with customized redirection?
Well, i have tried to add the below code into functions.php. The first drop down is working, when i select the second drop down, it does not auto-populate the third drop down.
Here is the code which i have tried so far.
if ( ! class_exists( 'frontendAjaxDropdown' ) ):
class frontendAjaxDropdown
{
/**
* Loading WordPress hooks
*/
function __construct()
{
/**
* Add shortcode function
*/
add_shortcode( 'ajax-dropdown', array($this, 'init_shortocde') );
/**
* Register ajax action
*/
add_action( 'wp_ajax_get_subcat1', array($this, 'getSubCat1') );
/**
* Register ajax action for non loged in user
*/
add_action('wp_ajax_nopriv_get_subcat1', array($this, 'getSubCat1') );
add_action( 'wp_ajax_get_subcat2', array($this, 'getSubCat2') );
/**
* Register ajax action for non loged in user
*/
add_action('wp_ajax_nopriv_get_subcat2', array($this, 'getSubCat2') );
}
/**
* Show parent dropdown for wordpress category and loaded necessarry javascripts
*/
function init_shortocde()
{
wp_dropdown_categories(
'name=main_cat&selected=-1&hierarchical=1&depth=1&hide_empty=0&show_option_none=All Categories'
);
?>
<script type="text/javascript">
(function($){
$("#main_cat").change(function(){
$("#sub_cat1").empty();
$("#sub_cat2").empty();
$.ajax({
type: "post",
url: "<?php echo admin_url( 'admin-ajax.php' ); ?>",
data: { action: 'get_subcat1', cat_id1: $("#main_cat option:selected").val() },
beforeSend: function() {$("#loading").fadeIn('slow');},
success: function(data) {
$("#loading").fadeOut('slow');
$("#sub_cat1").append(data);
$("#sub_cat2").empty();
}
});
});
})(jQuery);
</script>
<div id="loading" style="display: none;">Loading...</div>
<div id="sub_cat1"></div>
<?php
}
/**
* AJAX action: Shows dropdown for selected parent
*/
function getSubCat1()
{
wp_dropdown_categories(
"name=sub_cat1&selected=-1&hierarchical=1&depth=1&hide_empty=0&child_of={$_POST['cat_id1']}"
);
}
}
?>
<script type="text/javascript">
(function($){
$("#sub_cat1").change(function(){
$("#sub_cat2").empty();
$.ajax({
type: "post",
url: "<?php echo admin_url( 'admin-ajax.php' ); ?>",
data: { action: 'get_subcat2', cat_id2: $("#sub_cat1 option:selected").val() },
beforeSend: function() {$("#loading").fadeIn('slow');},
success: function(data) {
$("#loading").fadeOut('slow');
$("#sub_cat2").append(data);
}
});
});
})(jQuery);
</script>
<div id="loading1" style="display: none;">Loading...</div>
<div id="sub_cat2"></div>
<?php
function getSubCat2()
{
wp_dropdown_categories(
"name=sub_cat2&selected=-1&hierarchical=1&depth=1&hide_empty=0&child_of={$_POST['cat_id1']}+{$_POST['cat_id2']}"
);
die();
}
endif;
new frontendAjaxDropdown();</div>