Make dropdown menu with subcategories using php - php

Question

I want to change a given menu with submenus into a dropdown menu.
Actually it opens a new row below the main menu. You can see in the given screenshot here.
I have searched in the code for the shown css class nm-shop-sub-categories and found this function. The class nm-shop-sub-categories is at the end of the function.
/*
* Product category menu: Output
*/
if ( ! function_exists( 'nm_category_menu_output' ) ) {
function nm_category_menu_output( $is_category, $current_cat_id, $hide_empty ) {
global $wp_query, $nm_theme_options;
$page_id = wc_get_page_id( 'shop' );
$page_url = get_permalink( $page_id );
$hide_sub = true;
$current_top_cat_id = null;
$all_categories_class = '';
// Is this a category page?
if ( $is_category ) {
$hide_sub = false;
// Get current category's top-parent id
$current_cat_parents = get_ancestors( $current_cat_id, 'product_cat' );
if ( ! empty( $current_cat_parents ) ) {
$current_top_cat_id = end( $current_cat_parents ); // Get last item from array
}
// Get current category's direct children
$current_cat_direct_children = get_terms( 'product_cat',
array(
'fields' => 'ids',
'parent' => $current_cat_id,
'hierarchical' => true,
'hide_empty' => $hide_empty
)
);
$category_has_children = ( empty( $current_cat_direct_children ) ) ? false : true;
} else {
// No current category, set "All" as current (if not product tag archive or search)
if ( ! is_product_tag() && ! isset( $_REQUEST['s'] ) ) {
$all_categories_class = ' class="current-cat"';
}
}
$output_cat = '<li' . $all_categories_class . '>' . esc_html__( 'All', 'nm-framework' ) . '</li>';
$output_sub_cat = '';
$output_current_sub_cat = '';
// Categories order
$orderby = 'slug';
$order = 'asc';
if ( isset( $nm_theme_options['shop_categories_orderby'] ) ) {
$orderby = $nm_theme_options['shop_categories_orderby'];
$order = $nm_theme_options['shop_categories_order'];
}
$categories = get_categories( array(
'type' => 'post',
'orderby' => $orderby, // Note: 'name' sorts by product category "menu/sort order"
'order' => $order,
'hide_empty' => $hide_empty,
'hierarchical' => 1,
'taxonomy' => 'product_cat'
) );
// Categories menu divider
$categories_menu_divider = apply_filters( 'nm_shop_categories_divider', '<span>⁄</span>' );
foreach( $categories as $category ) {
// Is this a sub-category?
if ( $category->parent != '0' ) {
// Should sub-categories be included?
if ( $hide_sub ) {
continue; // Skip to next loop item
} else {
if (
$category->parent == $current_cat_id || // Include current sub-category's children
! $category_has_children && $category->parent == $wp_query->queried_object->parent // Include categories with the same parent (if current sub-category doesn't have children)
) {
$output_sub_cat .= nm_category_menu_create_list( $category, $current_cat_id, $categories_menu_divider );
} else if (
$category->term_id == $current_cat_id // Include current sub-category (save in a separate variable so it can be appended to the start of the category list)
) {
$output_current_sub_cat = nm_category_menu_create_list( $category, $current_cat_id, $categories_menu_divider );
}
}
} else {
$output_cat .= nm_category_menu_create_list( $category, $current_cat_id, $categories_menu_divider, $current_top_cat_id );
}
}
if ( strlen( $output_sub_cat ) > 0 ) {
$output_sub_cat = '<ul class="nm-shop-sub-categories">' . $output_current_sub_cat . $output_sub_cat . '</ul>';
}
$output = $output_cat . $output_sub_cat;
echo $output;
}
}
Is it possible to rewrite the function to generate a dropdown menu instead of the shown menu?
As you can see in the screenshot the css class
<ul class="nm-shop-sub-categories">
<li>item_1</li>
<li>item_2</li>
</ul>
is not inside the parent listing. But I want it to be like this structure:
<ul class="nm-shop-categories">
<li>parent_item_1</li>
<ul class="nm-shop-sub-categories">
<li>sub_item_1</li>
<li>sub_item_2</li>
</ul>
<li>parent_item_2</li>
</ul>
Since in my code is no classic html I don't know how to change that via php. Any ideas?
Or is there no need to change the structure and I can use css to make change this menu into a clssic dropdown menu?
Update: I've made the changes mentioned by Norman. But it didn't solved the problem. The subcategories are still seperate from the parent ul elements.
In addition to the fist block of code I've found a second one relating to subcategories. Maybe this would be of any help?
/*
* Product category menu: Output sub-categories
*/
if ( ! function_exists( 'nm_sub_category_menu_output' ) ) {
function nm_sub_category_menu_output( $current_cat_id, $hide_empty ) {
global $wp_query, $nm_theme_options;
// Categories menu divider
$categories_menu_divider = apply_filters( 'nm_shop_categories_divider', '<span>⁄</span>' );
$output_sub_categories = '';
// Categories order
$orderby = 'slug';
$order = 'asc';
if ( isset( $nm_theme_options['shop_categories_orderby'] ) ) {
$orderby = $nm_theme_options['shop_categories_orderby'];
$order = $nm_theme_options['shop_categories_order'];
}
$sub_categories = get_categories( array(
'type' => 'post',
'parent' => $current_cat_id,
'orderby' => $orderby, // Note: 'name' sorts by product category "menu/sort order"
'order' => $order,
'hide_empty' => $hide_empty,
'hierarchical' => 1,
'taxonomy' => 'product_cat'
) );
$has_sub_categories = ( empty( $sub_categories ) ) ? false : true;
// Is there any sub-categories available
if ( $has_sub_categories ) {
//$current_cat_name = __( 'All', 'nm-framework' );
$current_cat_name = apply_filters( 'nm_shop_parent_category_title', $wp_query->queried_object->name );
foreach( $sub_categories as $sub_category ) {
$output_sub_categories .= nm_category_menu_create_list( $sub_category, $current_cat_id, $categories_menu_divider );
}
} else {
$current_cat_name = $wp_query->queried_object->name;
}
// "Back" link
$output_back_link = '';
if ( $nm_theme_options['shop_categories_back_link'] ) {
$parent_cat_id = $wp_query->queried_object->parent;
if ( $parent_cat_id ) {
// Back to parent-category link
$parent_cat_url = get_term_link( (int) $parent_cat_id, 'product_cat' );
$output_back_link = nm_sub_category_menu_back_link( $parent_cat_url, $categories_menu_divider );
} else if ( $nm_theme_options['shop_categories_back_link'] == '1st' ) {
// 1st sub-level - Back to top-level (main shop page) link
$shop_page_id = wc_get_page_id( 'shop' );
$shop_url = get_permalink( $shop_page_id );
$output_back_link = nm_sub_category_menu_back_link( $shop_url, $categories_menu_divider, ' 1st-level' );
}
}
// Current category link
$current_cat_url = get_term_link( (int) $current_cat_id, 'product_cat' );
$output_current_cat = '<li class="current-cat">' . esc_html( $current_cat_name ) . '</li>';
echo $output_back_link . $output_current_cat . $output_sub_categories;
}
}

Answer 1

Structure you required is not the best to manage with CSS
As per the code assumption it seems like you need below structure as the resultant.
<ul class="nm-shop-categories">
<li>parent_item_1
<ul class="nm-shop-sub-categories">
<li>sub_item_1</li>
<li>sub_item_2</li>
</ul>
</li>
<li>parent_item_2</li>
</ul>
To achieve the above structure, i would suggest you to change the line this
$output_cat = '<li' . $all_categories_class . '>' . esc_html__( 'All', 'nm-framework' ) . '</li>';
To
$output_cat = '<li' . $all_categories_class . '>';
$output_cat .= '' . esc_html__( 'All', 'nm-framework' ) . '';
And End of output
$output = $output_cat . $output_sub_cat;
To
$output = $output_cat . $output_sub_cat .'</li>';