I'm customizing my theme's category template to display the current category's child categories instead of the posts from that category.
The category template links to another template file (content-grid.php) which generates the dynamic post/category content.
The only way I can get it to work is by combining all the code together on the category template.
This is the original category template:
<?php
/**
* The template for displaying category archive pages.
*
* @link https://codex.wordpress.org/Template_Hierarchy
*
* @package Codilight_Lite
*/
get_header(); ?>
<div id="content" class="site-content container <?php echo codilight_lite_sidebar_position(); ?>">
<div class="content-inside">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php
if ( have_posts() ) : $count = 0; ?>
<header class="page-header">
<?php
the_archive_title( '<h1 class="page-title">', '</h1>' );
the_archive_description( '<div class="taxonomy-description">', '</div>' );
?>
</header><!-- .page-header -->
<?php
$layout_archive_posts = get_theme_mod( 'layout_archive_posts', 'grid' );
if ( $layout_archive_posts == 'grid' ) {
echo '<div class="block1 block1_grid">';
echo '<div class="row">';
while ( have_posts() ) : the_post();
$count++;
get_template_part( 'template-parts/content-grid' );
if ( $count % 2 == 0 ) {
echo '</div>';
echo '<div class="row">';
}
endwhile;
echo '</div>';
echo '</div>';
codilight_lite_custom_paginate();
} else {
echo '<div class="block1 block1_list">';
while ( have_posts() ) : the_post();
get_template_part( 'template-parts/content-list' );
endwhile;
codilight_lite_custom_paginate();
echo '</div>';
}
?>
<?php else : ?>
<?php get_template_part( 'template-parts/content', 'none' ); ?>
<?php endif; ?>
</main><!-- #main -->
</div><!-- #primary -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
...and this is the content-grid.php template file:
<?php
/**
* Template part for displaying posts with grid style.
*
* @link https://codex.wordpress.org/Template_Hierarchy
*
* @package Codilight_Lite
*/
?>
<article id="post-<?php the_ID(); ?>" <?php post_class( 'col-md-6 col-sm-12' ); ?>>
<div class="entry-thumb">
<a href="<?php echo esc_url( get_permalink() ); ?>" title="<?php the_title(); ?>">
<?php
if ( has_post_thumbnail( ) ) {
the_post_thumbnail( 'codilight_lite_block_2_medium' );
} else {
echo '<img alt="'. esc_html( get_the_title() ) .'" src="'. esc_url( get_template_directory_uri() . '/assets/images/blank325_170.png' ) .'">';
}
?>
</a>
<?php
$category = get_the_category();
if($category[0]){
echo '<a class="entry-category" href="'.get_category_link($category[0]->term_id ).'">'.$category[0]->cat_name.'</a>';
}
?>
</div>
<div class="entry-detail">
<header class="entry-header">
<?php the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); ?>
<?php if ( 'post' === get_post_type() ) codilight_lite_meta_1();?>
</header><!-- .entry-header -->
<div class="entry-excerpt">
<?php echo codilight_lite_excerpt(120); ?>
</div><!-- .entry-content -->
</div>
</article><!-- #post-## -->
...and now for the customized category template file:
<?php
/**
* Category Template: Custom
*/
get_header(); ?>
<div id="content" class="site-content container <?php echo codilight_lite_sidebar_position(); ?>">
<div class="content-inside">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php
$cat = get_category( get_query_var( 'cat' ) );
$cat_id = $cat->cat_ID;
$child_categories=get_categories(
array(
'parent' => $cat_id,
// Uncomment the below line if you want empty category to appear on the list.
// 'hide_empty' => 0
)
);
if (!empty($child_categories)) : $count = 0; ?>
<header class="page-header">
<?php
the_archive_title( '<h1 class="page-title">', '</h1>' );
the_archive_description( '<div class="taxonomy-description">', '</div>' );
?>
</header><!-- .page-header -->
<?php
echo '<div class="block1 block1_grid">';
echo '<div class="row">';
foreach ( $child_categories as $child ){ $count++;
get_template_part( 'template-parts/content-grid' );
if ( $count % 2 == 0 ) {
echo '</div>';
echo '<div class="row">';
}
}
echo '</div>';
echo '</div>';
?>
<?php else : ?>
<?php get_template_part( 'template-parts/content', 'none' ); ?>
<?php endif; ?>
</main><!-- #main -->
</div><!-- #primary -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
...and the customized content-grid.php template file:
<?php
/**
* Template part for displaying posts with grid style.
*
* @link https://codex.wordpress.org/Template_Hierarchy
*
* @package Codilight_Lite
*/
?>
<article id="" class="col-md-6 col-sm-12">
<div class="entry-thumb">
<a href="<?php echo get_category_link( $child->cat_ID ); ?>" title="<?php echo $child ->cat_name;?>">
<?php $image_url = z_taxonomy_image_url($child->term_id); ?>
<?php if (!empty($image_url)) : ?>
<img alt="" src="<?php if (function_exists('z_taxonomy_image_url')) echo z_taxonomy_image_url($child->term_id);?>" />
<?php else: ?>
<img alt="" src="<?php echo esc_url( get_template_directory_uri() . '/assets/images/blank325_170.png' ) ?>" />
<?php endif; ?>
</a>
</div>
<div class="entry-detail">
<header class="entry-header">
<h2 class="entry-title"><a href="<?php echo get_category_link( $child->cat_ID ); ?> " rel="bookmark"><?php echo $child ->cat_name;?></a>
</h2>
</header><!-- .entry-header -->
<div class="entry-excerpt">
<?php echo $child ->description;?>
</div><!-- .entry-content -->
</div>
</article><!-- #post-## -->
...and lastly this is how I put all the code together in the category template file which works:
<?php
/**
* Category Template: Custom
*/
get_header(); ?>
<div id="content" class="site-content container <?php echo codilight_lite_sidebar_position(); ?>">
<div class="content-inside">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php
$cat = get_category( get_query_var( 'cat' ) );
$cat_id = $cat->cat_ID;
$child_categories=get_categories(
array(
'parent' => $cat_id,
// Uncomment the below line if you want empty category to appear on the list.
// 'hide_empty' => 0
)
);
if (!empty($child_categories)) : $count = 0; ?>
<header class="page-header">
<?php
the_archive_title( '<h1 class="page-title">', '</h1>' );
the_archive_description( '<div class="taxonomy-description">', '</div>' );
?>
</header><!-- .page-header -->
<?php
echo '<div class="block1 block1_grid">';
echo '<div class="row">';
foreach ( $child_categories as $child ) : $count++; ?>
<article id="" class="col-md-6 col-sm-12">
<div class="entry-thumb">
<a href="<?php echo get_category_link( $child->cat_ID ); ?>" title="<?php echo $child ->cat_name;?>">
<?php $image_url = z_taxonomy_image_url($child->term_id); ?>
<?php if (!empty($image_url)) : ?>
<img alt="" src="<?php if (function_exists('z_taxonomy_image_url')) echo z_taxonomy_image_url($child->term_id);?>" />
<?php else: ?>
<img alt="" src="<?php echo esc_url( get_template_directory_uri() . '/assets/images/blank325_170.png' ) ?>" />
<?php endif; ?>
</a>
</div>
<div class="entry-detail">
<header class="entry-header">
<h2 class="entry-title"><a href="<?php echo get_category_link( $child->cat_ID ); ?> " rel="bookmark"><?php echo $child ->cat_name;?></a></h2>
</header><!-- .entry-header -->
<div class="entry-excerpt">
<?php echo $child ->description;?>
</div><!-- .entry-content -->
</div>
</article><!-- #post-## -->
<?php ?>
<?php if ( $count % 2 == 0 ) {
echo '</div>';
echo '<div class="row">';
}
endforeach;
echo '</div>';
echo '</div>';
?>
<?php else : ?>
<?php get_template_part( 'template-parts/content', 'none' ); ?>
<?php endif; ?>
</main><!-- #main -->
</div><!-- #primary -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
