How to create a custom categories page

Question

I am working on a WordPress website.

My issue is, I have single.php code and this code is displaying a single product view. But when I click on any categories then the same code is working for categories and it's displaying all the categories with all the contents. I have to display only the heading title and image of the categories instated of displaying all the content.

Should I create new template-parts/categories or I have to do make changes in on template-parts/content?

Because UI design is totally different on categories page.

<?php
/**
 * The template for displaying all single posts
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
 *
 * @package testTheme
 */
get_header();
?>

<div id="primary" class="content-area">
    <main id="main" class="site-main">
<div class="container">
    <?php
    while ( have_posts() ) :
      the_post();

      get_template_part( 'template-parts/content', get_post_type() );
      the_post_navigation();
      // If comments are open or we have at least one comment, load up the comment template.
      if ( comments_open() || get_comments_number() ) :
        comments_template();
      endif;

    endwhile; // End of the loop.
    ?>
<div class="cp-seeWrapper"> 
  <div class="equalPadding equalPadding-T0">
    <div class="equalSectionHeading text-center"><h2>See More</h2></div>
<div class="row">
    <?php
// Default arguments
$args = array(
  'posts_per_page' => 6, // How many items to display
  'post__not_in'   => array( get_the_ID() ), // Exclude current post
  'no_found_rows'  => true, // We don't ned pagination so this speeds up the query
);
// Check for current post category and add tax_query to the query arguments
$cats = wp_get_post_terms( get_the_ID(), 'category' ); 
$cats_ids = array();  
foreach( $cats as $wpex_related_cat ) {
  $cats_ids[] = $wpex_related_cat->term_id; 
}
//print_r($cats_ids);
if ( ! empty( $cats_ids ) ) {
  $args['category__in'] = $cats_ids;
}
// Query posts
$wpex_query = new wp_query( $args );?>

<?php
foreach( $wpex_query->posts as $post ) : setup_postdata( $post ); ?>
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12 ">
  <div class="cp-shadow cp-seeSinglePostWrapper">
  <?php the_post_thumbnail();?>
    <div class="bg-white single-post-box">
    <div class="d-flex cp-CategoryList">
     <div class="seeDate"><?php echo get_the_date('F j, Y'); ?></div>
      <div class="cp_cat_list">
        <?php $cat = get_the_category();
        ?>
        <a href="<?php echo esc_url( get_category_link( $cat[0]->term_id ) );?>"><?php echo $cat[0]->cat_name?></a><?php //the_category(''); 
        ?>
      </div>
    </div>
      <div class="cp-b-content"><h2><a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( the_title_attribute( 'echo=0' ) ); ?>"><?php echo wp_trim_words(get_the_title(), 12, '...'); ?></a></h2></div>
      <p><?php echo wp_trim_words(get_the_excerpt(), 25, '...'); ?></p>
  </div>
  </div>
  </div>
<?php
// End loop
endforeach;
  ?>

<?php
// Reset post data
wp_reset_postdata(); ?>

      </div>
      </div>
      </div>
      </div>
    </main><!-- #main -->
  </div><!-- #primary -->


<?php
get_sidebar();
get_footer();

template-parts/content

<?php
/**
 * Template part for displaying posts
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package testTheme
 */

?>
<div class="equalPadding">
  <div class="cp-blogWrapper">
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  <header class="entry-header">
    <?php
    if ( is_singular() ) :
      the_title( '<div class=" cp-blogHeading text-center"><h1 class="entry-title">', '</h1></div>' );
    ?><div class="text-center"><?php the_excerpt();?></div>

    <?php else :
      the_title( '<div class=" cp-blogHeading text-center"><h2 class="entry-title "><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2></div>' );
    endif;

    if ( 'post' === get_post_type() ) :
      ?>
      <div class="entry-meta">
        <?php
        //testTheme_posted_on();
        //testTheme_posted_by();
        ?>
      </div> <!-- .entry-meta -->
    <?php endif; ?>
  </header><!-- .entry-header -->


  <?php testTheme_post_thumbnail(); ?>
  <div class="cp-blog-details">
    <div class="entry-meta">
      <div class="d-flex">
      <div class="seeDate"><?php echo get_the_date('F j, Y');?></div>
      <?php
      //testTheme_posted_on();
      the_category(' ');
      testTheme_posted_by();

      ?>
      </div>
    </div>
  </div>

<div class="cp-blog-content">
  <div class="entry-content">
    <?php
    the_content( sprintf(
      wp_kses(
        /* translators: %s: Name of current post. Only visible to screen readers */
        __( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'testTheme' ),
        array(
          'span' => array(
            'class' => array(),
          ),
        )
      ),
      get_the_title()
    ) );

    wp_link_pages( array(
      'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'testTheme' ),
      'after'  => '</div>',
    ) );
    ?>
  </div><!-- .entry-content -->
</div>
<!-- 
  <footer class="entry-footer">
    <?php // testTheme_entry_footer(); ?>
  </footer> -->
</article><!-- #post-<?php the_ID(); ?> -->
  </div>
</div>

In the image, Single view product output. I want category page like below image so should I create a new template part?

Answer 1

Here is a sample category.php template. You can place it in the main theme directory.

<?php

/**
 * A Simple Category Template
 */

get_header(); ?>

<section id="primary" class="site-content">
    <div id="content" role="main">

        <?php
        // Check if there are any posts to display
        if (have_posts()) : ?>

            <header class="archive-header">
                <h1 class="archive-title">Category: <?php single_cat_title('', false); ?></h1>


                <?php
                    // Display optional category description
                    if (category_description()) : ?>
                    <div class="archive-meta"><?php echo category_description(); ?></div>
                <?php endif; ?>
            </header>

            <?php

                // The Loop
                while (have_posts()) : the_post(); ?>
                <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
                <small><?php the_time('F jS, Y') ?> by <?php the_author_posts_link() ?></small>

                <div class="entry">
                    <?php the_content(); ?>

                    <p class="postmetadata"><?php
                                                    comments_popup_link('No comments yet', '1 comment', '% comments', 'comments-link', 'Comments closed');
                                                    ?></p>
                </div>

            <?php endwhile;

            else : ?>
            <p>Sorry, no posts matched your criteria.</p>


        <?php endif; ?>
    </div>
</section>


<?php get_sidebar(); ?>
<?php get_footer(); ?>

Taken from: https://www.wpbeginner.com/wp-themes/how-to-create-category-templates-in-wordpress/