WordPress how to display top level category only

Question

I'm in the process of designing the category/archives page for my WordPress site and I've been trying to write out a page title like this:

Portfolio: Weddings

I've been using this code which achieves this, however, since the parent and the sub-category are in the same php it's annoying trying to style individually with CSS (mainly for mobile devices).

<span><?php echo implode( ": ", array_filter( explode( ": ", get_category_parents( $cat, true, ": " ) ) ) ); ?></span>

Is there a way I can achieve something more like this?

<span class="parent-cat"><?php DISPLAY PARENT NAME  ; ?></span>
<span class="child-cat"><?php printf( esc_html__( '%s', 'myTheme' ), single_cat_title( '', false ) ); ?></span>

Thank you!

Answer 1

Currently you're using get_category_parents to retrieve the parent categories. What you asked for is only for two parent categories, but what if there are more than two parent categories?

If you want to get parents separately, you could use get_ancestors function which gives you more flexibility. It'll get you all of the parents ids on which you could set up a foreach loop and output them separately. If there is only one parent, then that's exactly what you're looking for.

get_ancestors^Docs

if (is_category()) {

  $query_obj = get_queried_object();

  $query_obj_parents_ids = get_ancestors($query_obj->term_id, 'category');

  if ($query_obj_parents_ids) {

    foreach ($query_obj_parents_ids as $query_obj_parent_id) { ?>
      <span class="parent-cat-<?php echo  $query_obj_parent_id ?>"><?php printf(esc_html__('%s', 'myTheme'), get_the_category_by_ID($query_obj_parent_id)); ?></span>
<?php

    }
  }
}

So if your category has, let's say 3 parents, it will output:

<span class="parent-cat-11">test category parent 03</span>
<span class="parent-cat-8">test category parent 02</span>
<span class="parent-cat-2">test category parent 01</span>

The closest parent will get outputed first.

Also note that parent-cat-{$parent-id} will be the name of your class which allows you to target your parents with css and/or javascript.

Note that i've also used get_the_category_by_ID function, which will get you the category name based on category ID.

get_the_category_by_ID^Docs

Also if you need the category name for the same page (i.e page title), not parents names, then you could use echo $query_obj->name;.

---

This is the example you asked for, in your question:

if (is_category()) {

  $query_obj = get_queried_object();

  $query_obj_parents_ids = get_ancestors($query_obj->term_id, 'category');

  if ($query_obj_parents_ids) {

    foreach ($query_obj_parents_ids as $query_obj_parent_id) {
?>
      <span class="parent-cat"><?php echo get_the_category_by_ID($query_obj_parent_id) ?></span>
<?php 
    } 
  }
?>
      <span class="child-cat"><?php printf(esc_html__('%s', 'myTheme'), $query_obj->name); ?></span>
<?php
}

Which will output this:

<span class="parent-cat">Portfolio</span>
<span class="child-cat">Weddings</span>