I am trying to accomplish an Ajax navigation for the categories and for that I need the code to look something like:
<ul>
<li data-level="1">Parent Category</li>
<li data-level="1">Parent Category
<ul class="children">
<li class="sub-category" data-level="2">Subcategory
<ul class="children">
<li class="sub-sub-category" data-level="3">Sub Subcategory</li>
</ul>
</li>
</ul>
</li>
</ul>
I already have a walker defined that creates something similar, also adding a div around the children ul and a class to the categories that do not contain any children categories. It works fine for the first level of subcategories but I got stuck there and can’t seem to be able to create the next level of subcategories properly. This is the walker I have:
class Navigation_Catwalker extends Walker_Category {
// Configure the start of each level
function start_lvl(&$output, $depth = 0, $args = array()) {
$output .= "";
}
// Configure the end of each level
function end_lvl(&$output, $depth = 0, $args = array()) {
$output .= "";
}
// Configure the start of each element
function start_el( &$output, $category, $depth = 0, $args = array(), $id = 0) {
// Set the category name and slug as a variables for later use
$cat_name = esc_attr( $category->name );
$cat_name = apply_filters( 'list_cats', $cat_name, $category );
$cat_slug = esc_attr( $category->slug );
$n_depth = $depth + 1;
$termchildren = get_term_children( $category->term_id, $category->taxonomy );
if(count($termchildren)===0){
$class .= 'i-dont-have-kids';
}
// Configure the output for the top list element and its URL
if ( $depth === 0 ) {
$link = '<a class="parent-category-dropdown" href="#"' . '>' . $cat_name . '</a>';
$indent = str_repeat("\t", $depth);
$output .= "\t<li class="parent-category $class " . $cat_slug . "" data-level="$n_depth">$link\n$indent<div class="children"><ul>\n<li class="parent-name" data-level="$n_depth">" . $cat_name . "</li>";
}
// Configure the output for lower level list elements and their URL's
if ( $depth === 1 ) {
$link = '<a href="#"' . '>' . $cat_name . '</a>';
$output .= "\t<li class="sub-category $class" data-level="$n_depth">$link\n";
}
if( $depth > 1) {
$link = '<a href="#"' . '>' . $cat_name . '</a>';
$output .= "\n<li class="sub-category $class" data-level="$n_depth">$link\n";
}
}
// Configure the end of each element
function end_el(&$output, $page, $depth = 0, $args = array() ) {
if ( $depth === 0 ) {
$indent = str_repeat("\t", $depth);
$output .= "$indent</ul>\n</div>\n";
}
if ( $depth > 0 ) {
$output .= "</li>";
}
}
}
Anyone have any ideas ?