Outputting all child categories with custom html

Question

I want to output all children categories of category 11, the following code works:

<?php wp_list_categories('child_of=11&hide_empty=1'); ?>

However it outputs wordpress's html which isn't what I want, I would like to know if it's possible to change what wordpress outputs?

The current html is:

<li class="cat-item cat-item-13"><a href="/category/portfolio/consumer">Consumer</a></li>
<li class="cat-item cat-item-12"><a href="/category/portfolio/enterprise">Enterprise</a></li>

I basically want to do the following without having to inject javascript:

<li><a href="#" data-filter=".consumer">Consumer</a></li>
<li><a href="#" data-filter=".enterprise">Enterprise</a></li>

Is this possible?

Answer 1

Try this

$args = array(
    'child_of' => 11,
    'hide_empty' => 1
);
$categories = get_categories($args);

foreach ($categories as $category) {
    echo "<li ><a href='#' data-filter='.".strtolower($category->name)."'>".$category->name."</a></li>";
}

You may use $category->slug for that data-filter purpose