How to Show Child categories on Category Pages


While Working on my Wallpaper WordPress theme  one of my buyer asked to show child categories on category page.  Normally we do not show sub-categories on categories pages but it is really a good idea to show sub-categories on category pages.

Show Child Category

Wp_list_categories () function is used to display all the list from your WordPress database in a list format and that list is also in UN-ordered list, The user wants this category list in two columns and on the top of every category page if that category does not have any sub=category or child category then there should not be any sign on the top of it.

The problem was not to take categories from post and it should be available on the category pages. WordPress use archive.php file in absence of category.php file. So my idea was to grab raw category list from the WordPress database and then for this category check all the child category from this list and them display these category in two columns

<h1><?php single_cat_title(); ?></h1>
<hr/>
<?php
$category_id = get_cat_ID( single_cat_title(”,false) );
// Get the URL of  this category
$args = array(
‘type’                     => ‘post’,
‘child_of’                 => 0,
‘parent’                   => ”,
‘orderby’                  => ‘name’,
‘order’                    => ‘ASC’,
‘hide_empty’               => 0,
‘hierarchical’             => 1,
‘exclude’                  => ”,
‘include’                  => ”,
‘number’                   => ”,
‘taxonomy’                 => ‘category’,
‘pad_counts’               => false
);
$categories =  get_categories($args);
//echo ‘<ul>';
$cat_left=””;
$cat_right=””;
$count = 0;
foreach($categories as $childcat) {
if (cat_is_ancestor_of($category_id, $childcat->cat_ID)==true) {
//    echo ‘<li><a href=”‘.get_category_link($childcat->cat_ID).'”>';
//              echo $childcat->cat_name . ‘(‘. $childcat->count.’)</a></li>';

if( $count % 2 == 0)
{
$cat_left = $cat_left.'<li><a href=”‘.get_category_link($childcat->cat_ID).'”>’. $childcat->cat_name . ‘(‘. $childcat->count.’)</a></li>';

}
else
{
$cat_right = $cat_right.'<li><a href=”‘.get_category_link($childcat->cat_ID).'”>’. $childcat->cat_name . ‘(‘. $childcat->count.’)</a></li>';
}
$count++;
}
}
?>
<div class=”left_side”>
<ul>
<?php echo $cat_left;?>
</ul>
</div>
<div class=”right-side”>
<ul>
<?php echo $cat_right;?>
</ul>
</div>
<?php if($count >= 1) echo ‘<hr/>'; ?>

CSS to show this list in a proper manner on the screen

.left_side,.right_side {

width:48%;

float:left;font-size:14px;

}

.right_side { width:48%; float:right;}

Hope this code will be helpful to increase CTR  of your website.




2 Brilliant Comments - Join Discussion Now!

  1. Isaac says:

    Thanks Rakesh, i have been looking for this for a while

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>