wp_list_categories depth and number

Question

My code is as follows:

$custom_args = array(
     'orderby'          => 'name',
     'order'            => 'ASC',   
     'depth'            => 1,
     'number'           => 4, 
);
    wp_list_categories($custom_args);

I'd like to create a list of categories and to show only the parent category, I use 'depth' => 1, but because I also want to control the number of categories, I added 'number' => 4 hoping that would be enough however it only shows one parent category.

If I remove depth it shows the 4 categories but the links are also children categories.

Any idea on how to solve this issue I'm having? Many thanks in advance.

Answer 1

You should add 'child_of' => 0,

That way you will display only Main categories aka children of 0.

$custom_args = array(
     'orderby'          => 'name',
     'order'            => 'ASC', 
     'child_of'         => 0,  
     'depth'            => 1,
     'number'           => 4, 
);
wp_list_categories($custom_args);

If you want to get WooCommerce categories try this:

function getCustomProductCats () {
  $orderby = 'name';
  $order = 'asc';
  $hide_empty = false ;
  $cat_args = array(
      'orderby'    => $orderby,
      'order'      => $order,
      'child_of'   => 0,
      'number'     => 4,
      'hide_empty' => $hide_empty,
  );
 
  $product_categories = get_terms( 'product_cat', $cat_args );
 
  if( !empty($product_categories) ){
      echo '<ul>';
      foreach ($product_categories as $key => $category) {
          echo '<li>';
          echo '<a href="'.get_term_link($category).'" >';
          echo $category->name;
          echo '</a>';
          echo '</li>';
      }
      echo '</ul>';
    }
}
getCustomProductCats();

source for WC solution https://phptechnologytutorials.wordpress.com/2018/03/10/get-list-of-all-product-categories-in-woocommerce/

Answer 2

Structure is as follows:

<ul class="main-menu">  
    <li><a href="">CMS Themes</a>
        <ul class="children">
            <li><a href="">Moodle</a></li>
        </ul>
    </li>
    <li><a href="">Empty Cat</a></li>
    <li><a href="">HTML</a>
        <ul class="children">
            <li><a href="">Creative</a></li>
        </ul>
    </li>
    <li><a href="">Photography</a></li>
    <li><a href="">Wordpress</a>
        <ul class="children">
            <li><a href="">Blog / Magazine</a></li>
            <li><a href="">Corporate</a></li>
            <li><a href="">Creative</a></li>
            <li><a href="">eCommerce</a></li>
            </li>
        </ul>
    </li>
</ul>