Unable to style WordPress wp_list_categories

2 Views

I have problem displaying my wp_list_categories with Style. I am already using args, etc but that does not seem to help with the problem.

I want to display same sub-categories for single article.

Read More

Here my code : 

<?php
if (is_home()) {
    wp_list_categories('orderby=id&title_li=none&depth=1');
} else {
    $category = get_the_category();
    $cat_term_id = $category[0]->term_id;
    $cat_category_parent = $category[0]->category_parent;
    $listcat = wp_list_categories('echo=0&child_of='.$cat_category_parent.'&title_li=');
    $listcat = str_replace("cat-item-".$cat_term_id, "cat-item-".$cat_term_id." current-cat", $listcat);
  if ( in_category( $cat_term_id ) || post_is_in_descendant_category( $cat_term_id )) {
      echo $listcat;
  }
}
?>
</ul>

and here is the result :

http://i.stack.imgur.com/buYyl.jpg

I want the result will be like this :

http://i.stack.imgur.com/U3Pc6.jpg

Post Views: 2

Related posts

1 comment

  1. I think this might work for you, but I’m not exactly sure which theme file you’re referencing above.

    <?php $parent_cat_id = 1; // Change this ID to match the ID value of the "Sepeda" category ?>
<?php $categories = get_categories( "child_of=$parent_cat_id" ); ?> 

<?php if ($categories) : ?>
    <ul id="category-list">
        <?php // Print the link for 'Sepeda' ?>
        <?php echo "<li class='category-name'><a href='" . get_category_link($parent_cat_id) . "'>" . get_cat_name($parent_cat_id) . "</a></li>"; ?>

        <?php // Loop through the sub-categories of 'Sepeda' and print the names and links ?>
        <?php foreach ($categories as $cat) { 
            echo "<li class='category-name'><a href='" . get_category_link( $cat->term_id ) . "'>" . $cat->name . "</a></li>";
        } ?>

        <?php wp_reset_query();  // Restore global post data  ?> 
    </ul>
<?php endif; ?>

    Then you could use this CSS to style the category list appropriately:

    #category-list {
    width: 250px;
    padding: 5px;
    background: white;
    list-style: none;
}
.category-name {
    background-color: #694489;
    color: white;
    min-height: 40px;
    text-align: center;
    line-height: normal;
    padding-top: 10px;
}
.category-name + .category-name {
    margin-top: 10px;
}

Comments are closed.