I am working on a category. I have to show all the category list on-page. So I tried the below code and it's working. I am getting my all the category list.

Below is the output of my category list

My question is, Where I go and add the category list code? I have to access the URL like / so it will display my category list.

I created the category.php page but that page is displaying the post with the related category.

For example so it will display all the post which is related to the destination.

<?php
   /**
   * A Simple Category Template
   */
   get_header(); 

?>  
<div id="primary" class="content-area">
   <main id="main" class="site-main">
       <div class="CategoryHero">
<?php
// Get the current queried object
$term    = get_queried_object();
$term_id = ( isset( $term->term_id ) ) ? (int) $term->term_id : 0;

$categories = get_categories( array(
    'taxonomy'   => 'category',
    'orderby'    => 'name',
    'parent'     => 0,
    'hide_empty' => 0, // change to 1 to hide categores not having a single post
) );
?>

<ul>
    <?php
    foreach ( $categories as $category ) 
    {
        $cat_ID        = (int) $category->term_id;
        $category_name = $category->name;

        // When viewing a particular category, give it an [active] class
        $cat_class = ( $cat_ID == $term_id ) ? 'active' : 'not-active';

        // I don't like showing the [uncategoirzed] category
        if ( strtolower( $category_name ) != 'uncategorized' )
        {
            printf('<li><a href="' . esc_url( get_category_link( $category->term_id ) ) . '">' . $category->name . '</a></li>');
        }
    }
    ?>
</ul>
     
         </div>
   </main>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Second page

The output of below code is

Africa
--Post one
--Post two

//

<?php
   /**
   * A Simple Category Template
   */
   get_header(); 

?>  
<div id="primary" class="content-area">
   <main id="main" class="site-main">
       <div class="CategoryHero">
           
     <?php 
    if (have_posts()){
        if(is_category()){                   
                 $category_images = get_option( 'category_images' );
                 $category_image = '';
                 if ( is_array( $category_images ) && array_key_exists( get_query_var('cat'), $category_images ) ){
                  $category_image = $category_images[get_query_var('cat')] ;
                 ?>        
                  <div class="category-img" style="background-image:linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),url(<?php echo $category_image;?>)">
                      <div class="container h-100">
                      <div class="categoryWrapper">
                    <div class="categoryContent">
                        <h1><?php single_cat_title(''); ?></h1>
                        <p><?php echo category_description(); ?></p>
                        </div>
                        
                        </div>
                        </div>
                      
                      </div>
                 <?php
                 }
                 }?>
           <div class="categoryWrapper_list"><div class="equalPadding"><ul>
         <?php  
             
        while (have_posts()) {
            the_post();
            ?>
           <li> <div class="subCategoryPostWrap" style="background-image:linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),url(<?php echo get_the_post_thumbnail_url( $_post->ID, 'thumbnail' );?>)">

                    <div class="productContent colcentertext">
                        
                <div class="blackBoxPackage">
                    <div class="cp-b-content">
                        <h4><?php echo wp_trim_words(get_the_title(), 15, '...');?></h4>
             <p><?php echo wp_trim_words(get_the_excerpt(), 30, '...');?></p>
          <div class="canExplore"><a class="canbtn" href="<?php echo esc_url( get_the_permalink() );?>">Explore now</a></div>
          </div>

        
                    
        </div>
        
    </div>  
    </div></li><?php }?></ul>
              <div class="pt-5 text-center"><a class="canbtn cabbtnbg canbtnPadding removeArrowbtn loadMore" href="javascript:void(0);">Load More Packages</a></div>

    </div>
    
</div>
<?php } else{?><p>Sorry, no posts matched your criteria.</p><?php } ?>
         </div>
   </main>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>