wp_list_categories walker without links on categories that have subcategories (to make a nested dropdown menu)

Question

I'd like to make a custom walker that works with wp_list_categories to generate a menu of nested uls using my category, sub-category, and sub-sub-category(?) structure. Any category that has sub-categories can't be a link so it can be clicked in order to reveal the sub-categories (or sub-sub-categories).

Here's what I want (only items with a 🔗 should be links):

Tops
  Shirts
    T-shirts 🔗
    Longsleeves 🔗
  Jackets
    Hoodies 🔗
    Raincoats 🔗
Shoes
  Boots 🔗
  Formal 🔗
Trousers
  Shorts 🔗
  Longs 🔗
Bags 🔗

See also this CodePen demo with the hard-coded HTML I'd like to generate, ideally with a custom walker for wp_list_categories.

1. I need to show a list of categories and subcategories in a series of nested uls.
2. If a given category has subcategories, that category can't display as a link (a div or similar instead).
3. If a given category does not have any subcategories, that category will display as a link.

My menu system is at most three levels deep, and categories without descendants could be anywhere. The reason I'd really like to use wp_list_categories is so my editors have the flexibility to reorder categories. If I hard-coded in each top-level category they can't reorder them freely using WP's built-in category editor.

Goal: Right now, wp_list_categories does output my categories properly. I just need to figure out how to override the code that is making category titles with subcategories be links. I need them to just be plain text.

I'm trying to make a custom walker myself but can't seem to figure out where it decides if a category is a sub (or a "sub of a sub") in order to omit links where they're not wanted.

Answer 1

If you say the wp_list_categories output format is ok to you and all you need is only to remove the links from parent categories, try the following code (you can add it to your functions.php):

add_filter( 'wp_list_categories', 'sanitize_list_categories_links', 10, 2 );
function sanitize_list_categories_links( $list, $args ) {
    if ( isset( $args['sanitize_links'] ) && $args['sanitize_links'] ) {
        $list = preg_replace( '/(<li(?:|\s[^>]*)>)<a(?:|\s[^>]*)>(.*?)<\/a>(\s*<ul(?:|\s[^>]*)>)/', '$1$2$3', $list );
    }
    return $list;
}

and then add an extra parameter to your wp_list_categories arguments list:

wp_list_categories( array( ..., 'sanitize_links' => 1 ) );

This regex will remove <a ...> and </a> HTML tags from <li ...><a ...>Category name</a> string if this string is followed with <ul ...> HTML tag meaning the category has at least one child and left those tags untouched otherwise.

Update

To get the HTML markup similar to your codepen example, you can use

add_filter( 'wp_list_categories', 'sanitize_list_categories_links', 10, 2 );
function sanitize_list_categories_links( $list, $args ) {
    if ( isset( $args['sanitize_links'] ) && $args['sanitize_links'] ) {
        $list = preg_replace( '/(<li(?:|\s[^>]*)>)<a(?:|\s[^>]*)>(.*?)<\/a>(\s*<ul(?:|\s[^>]*)>)/',
                              '$1<div class="title">$2</div>$3', $list );
    }
    return $list;
}