Show category and description

Question

I am creating a theme, and I would like to show each category and its description in front page. I used the following code, but it is only showing one of the categories without a link to its page but a link for home page and also not showing the description.

<h1 class="categoryTitle">
    <a href="<?php echo esc_url( $category_link ); ?>">
        <?php foreach( (get_the_category()) as $chaine ) { 
            if($chaine->parent == 0){ 
                echo $chaine->cat_name . ' '; 
            }
        } ?>
    </a>
</h1>
<p class="cateSubTitle">
    <?php echo category_description( $category_id ); ?>
</p>

How shall I fix this?

Answer 1

Just need to use get_categories and a foreach

$cats = get_categories();
  if ( !empty( $cats ) && !is_wp_error( $cats ) ){
   foreach ( $cats as $cat ) {
    echo '<h1 class="categoryTitle"><a href="'.get_category_link( $cat->term_id ).'">'.$cat->name.'</a></h1>';
    echo '<p class="cateSubTitle">'.$cat->description.'</p>';
   }
  }

To Add each one in it's own div, just add a tag after the foreach e.g.

$cats = get_categories();
      if ( !empty( $cats ) && !is_wp_error( $cats ) ){
       foreach ( $cats as $cat ) {
        echo '<div class="divname" id="'.$cat->slug.'">';
        echo '<h1 class="categoryTitle"><a href="'.get_category_link( $cat->term_id ).'">'.$cat->name.'</a></h1>';
        echo '<p class="cateSubTitle">'.$cat->description.'</p>';
        echo '</div>';
       }
      }

There is a class so you can target all the divs at once, and each one has an id so you can target them individually, the id is the category slug e.g. toms-category