1

I'm not even sure it's possible to do what I'm trying to do. I want to create a custom category template that displays the current category's child categories instead of posts from that category.

I also want to keep the layout as close as possible to the original template with a thumbnail image, title and excerpt. I will use a custom category image for the thumbnail, the title is the child category term and for the excerpt I will use the category description.

In the original category template the posts are laid out in a grid format and the loop has a counter set up to open and close the "row' div after every second post (see the code below). Is it possible to do the same with categories?

This is the code I'm using to get my child categories:

<?php 
$cat = get_category( get_query_var( 'cat' ) );
$cat_id = $cat->cat_ID;
$child_categories=get_categories(
array( 'parent' => $cat_id )
);

foreach ( $child_categories as $child ) {
echo '<li>'.$child ->cat_name.'</li>';
}
?>

But instead of a list I need it in the following format:

<article>
 <div class="category thumbnail">
<a href="" title=""><img alt="" src="" />
</a>
</div>
<div class="category-title">
        <h2 class="entry-title">Category Title</h2>
    </header><!-- .entry-header -->
    <div class="category description">
    </div><!-- .entry-content -->
</div>
</article>

...and 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(); ?>

The line get_template_part( 'template-parts/content-grid' ); is where it links to the "article" div referenced above.

  • I'm not sure if I understand your question. If you're able to list the child categories, what's stopping you from wrapping them in a little bit more html? – cjbj Aug 20 '16 at 14:38
  • Yes, you're right. I wasn't understanding properly how the code works. – jrcollins Aug 21 '16 at 0:13
1

Here is your solution-

<?php
/**
 * The template for displaying category archive pages.
 *
 * @link https://codex.wordpress.org/Template_Hierarchy
 *
 * @package Codilight_Lite
 */
$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
    )
);
get_header(); ?>
<div id="content" class="site-content container">
    <div class="content-inside">
    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">
            <?php
            foreach ( $child_categories as $child ) { ?>
                <article>
                    <div class="category thumbnail">
                        <a href="" title=""><img alt="" src="" />
                        </a>
                    </div>
                    <div class="category-title">
                        <h2 class="entry-title"><?php echo $child ->cat_name;?></h2>
                        </header><!-- .entry-header -->
                        <div class="category description">
                            <?php echo $child ->description;?>
                        </div><!-- .entry-content -->
                    </div>
                </article>
            <?php
            }
            ?>
        </main><!-- #main -->
    </div><!-- #primary -->

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

Just copy and paste it to your archive.php and you are ready to go. Hope this is gonna help you.

  • I tested the code and it does exactly what I want. Now I just need to add a counter so I can match the styling in the original. – jrcollins Aug 21 '16 at 0:12
  • If my answer helps you, would you please accept my answer ? It would be great. @jrcollins – CodeMascot Aug 21 '16 at 3:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.