Style sub categories differently from its parent category

admin管理员组

文章数量:1433481

I am new to wordpress and to this website. I've been searching for a solution to my problem. I found this code that solved my problem, but unfortunately I can't style the sub categories differently from the parent category. Im not a php coder, can anyone show me how?

I want something like this

<ul>
 <h2>Category 1</h2>
 <p>Description of the Category1</p>
 <li>Sub Category link 1</li>
 <li>Sub Category link 2</li>
 <li>Sub Category link 3</li>
</ul>

<ul>
 <h2>Category 2</h2>
 <p>Description of the Category2</p>
 <li>Sub Category link 1</li>
 <li>Sub Category link 2</li>
 <li>Sub Category link 3</li>
</ul>

 <ul>
 <h2>Category 3</h2>
 <p>Description of the Category3</p>
 <li>Sub Category link 1</li>
 <li>Sub Category link 2</li>
 <li>Sub Category link 3</li>
</ul>

Here is the code I'm using, got it from here

<?php 
if (is_category()) {
$this_category = get_category($cat);
if (get_category_children($this_category->cat_ID) != "") {
    echo '<div id="catlist"><ul>';
    $childcategories = get_categories(array(
        'orderyby' => 'name',
        'hide_empty' => false,
        'child_of' => $this_category->cat_ID
        ));
    foreach($childcategories as $category) {
        echo '<a href="' . get_category_link( $category->term_id ) . '" title="' .     sprintf( __( "View all posts in %s" ), $category->name ) . '" ' . '>' . $category-    >name.'</a>';
        echo '<p>'.$category->description.'</p>';
    }
    echo '</ul></div>';
}
}
?>

EDIT

Here is my complete code

<?php get_header(); ?>
<div id="content">
<?php if ( function_exists('yoast_breadcrumb') ) { yoast_breadcrumb('<p   id="breadcrumbs">','</p>');} ?>
    <div id="cont_left">
    <h1><?php single_cat_title( '', true ); ?></h1>
    <?php 
        if (is_category()) {
            $this_category = get_category($cat);
            if (get_category_children($this_category->cat_ID) != "") {
             echo '<div id="cat-display"><ul>';
                $childcategories = get_categories(array(
                  'orderyby' => 'name',
                   'hide_empty' => false,
                   'child_of' => $this_category->cat_ID
                   ));

             foreach($childcategories as $category) {
                  echo '<img src="  content/uploads/2014/05/' . $category->cat_ID . '.jpg" alt="' . $category->cat_name . '"  />';
                  echo '<a href="' . get_category_link( $category->term_id  ) . '" title="' . sprintf( __( "View all posts in %s" ), $category->name ) . '" ' . '>' .  $category->      name.'</a>';

                    echo '<p>'.$category->description.'</p>';
             }
             echo '</ul></div>';
         }
        }
        ?>
    </div>
    <div ><?php get_sidebar(); ?></div>
<div class="clear"></div>
</div>
<?php get_footer(); ?>

and this is the output

Actually I need to put an image in the parent category and under the parent a list of sub category links.

I am new to wordpress and to this website. I've been searching for a solution to my problem. I found this code that solved my problem, but unfortunately I can't style the sub categories differently from the parent category. Im not a php coder, can anyone show me how?

I want something like this

<ul>
 <h2>Category 1</h2>
 <p>Description of the Category1</p>
 <li>Sub Category link 1</li>
 <li>Sub Category link 2</li>
 <li>Sub Category link 3</li>
</ul>

<ul>
 <h2>Category 2</h2>
 <p>Description of the Category2</p>
 <li>Sub Category link 1</li>
 <li>Sub Category link 2</li>
 <li>Sub Category link 3</li>
</ul>

 <ul>
 <h2>Category 3</h2>
 <p>Description of the Category3</p>
 <li>Sub Category link 1</li>
 <li>Sub Category link 2</li>
 <li>Sub Category link 3</li>
</ul>

Here is the code I'm using, got it from here

<?php 
if (is_category()) {
$this_category = get_category($cat);
if (get_category_children($this_category->cat_ID) != "") {
    echo '<div id="catlist"><ul>';
    $childcategories = get_categories(array(
        'orderyby' => 'name',
        'hide_empty' => false,
        'child_of' => $this_category->cat_ID
        ));
    foreach($childcategories as $category) {
        echo '<a href="' . get_category_link( $category->term_id ) . '" title="' .     sprintf( __( "View all posts in %s" ), $category->name ) . '" ' . '>' . $category-    >name.'</a>';
        echo '<p>'.$category->description.'</p>';
    }
    echo '</ul></div>';
}
}
?>

EDIT

Here is my complete code

<?php get_header(); ?>
<div id="content">
<?php if ( function_exists('yoast_breadcrumb') ) { yoast_breadcrumb('<p   id="breadcrumbs">','</p>');} ?>
    <div id="cont_left">
    <h1><?php single_cat_title( '', true ); ?></h1>
    <?php 
        if (is_category()) {
            $this_category = get_category($cat);
            if (get_category_children($this_category->cat_ID) != "") {
             echo '<div id="cat-display"><ul>';
                $childcategories = get_categories(array(
                  'orderyby' => 'name',
                   'hide_empty' => false,
                   'child_of' => $this_category->cat_ID
                   ));

             foreach($childcategories as $category) {
                  echo '<img src="http://marinelcdpro/wp-  content/uploads/2014/05/' . $category->cat_ID . '.jpg" alt="' . $category->cat_name . '"  />';
                  echo '<a href="' . get_category_link( $category->term_id  ) . '" title="' . sprintf( __( "View all posts in %s" ), $category->name ) . '" ' . '>' .  $category->      name.'</a>';

                    echo '<p>'.$category->description.'</p>';
             }
             echo '</ul></div>';
         }
        }
        ?>
    </div>
    <div ><?php get_sidebar(); ?></div>
<div class="clear"></div>
</div>
<?php get_footer(); ?>

and this is the output

Actually I need to put an image in the parent category and under the parent a list of sub category links.

• categories

Share Improve this question edited Apr 13, 2017 at 12:37 CommunityBot 1 asked Jun 17, 2014 at 0:24 ZymethZymeth 122 bronze badges 2

• 2 Thanks for edting my question Pieter, its more understandable now. Appreciated it. :D – Zymeth Commented Jun 17, 2014 at 16:34
• For styling you don't need any PHP. Just CSS. I don't get what's wrong with your output. It all looks just fine and you can target everything uniquely with just CSS. – norman.lol Commented Apr 14, 2019 at 19:20

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

It will generate the structure as you have asked for.

if (is_category()) {
    $this_category = get_category($cat);
    if (get_category_children($this_category->cat_ID) != "") {
        echo '<div id="catlist"><ul>';
        $childcategories = get_categories(array(
            'orderyby' => 'name',
            'hide_empty' => false,
            'child_of' => $this_category->cat_ID
            ));
        foreach($childcategories as $category) {
            echo '<li class="sub-cat">';
            echo '<a href="' . get_category_link( $category->term_id ) . '" title="' . sprintf( __( "View all posts in %s" ), $category->name ) . '" ' . '>' . $category->name.'</a>';
            echo '<p>'.$category->description.'</p>';
            echo '</li>';
        }
        echo '</ul></div>';
    }
}

本文标签： Style sub categories differently from its parent category