"post_terms_category" output customization

How To
1

Hi,
on an archive template, I want to output the assigned categories of my posts. To achieve this, I used the
meta data field and chosed {post_terms_category}
That gives me an comma separated list with the categories like this:

bricks_post_terms_category
bricks_post_terms_category927×571 77.1 KB

But I don’t want it to be this list, my desired output are two seperate boxes with the categories (like buttons). How to achieve this?

Thanks for your help!
Lars

2

Hey Lars,
That’s currently not possible via the dynamic data tag, but a little custom CSS and PHP inside of a code element should do the job:

<style>
  .catList {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .catList__item {
    background-color: #27187E;
    color: #f2f2f2;
    padding: 3px 6px;
    font-size: 1.4rem;
    border-radius: 0.5rem;
  }
</style>

<?php

$categories = get_the_category();
$output = '';

if ( ! empty( $categories ) ) {
  $output .= '<ul class="catList">';
  foreach( $categories as $category ) {
        $output .= '<li class="catList__item"><a href="' . esc_url( get_category_link( $category->term_id ) ) . '" alt="' . esc_attr( sprintf( __( 'View all posts in %s', 'textdomain' ), $category->name ) ) . '">' . esc_html( $category->name ) . '</a></li>';
  }
  echo trim( $output );
}

?>

Best regards,
timmse

5 Likes
3

Great, thank you timmse!

4

Hi,

This solution looks a bit overkill for me :wink:
I find it easier to use CSS only for this, using transparency to remove commas:

.post-categories {
  color: transparent;
}
.post-categories a {
  color: var(--text-color);
  padding: var(--term-padding);
  border: solid var(--border-width) var(--border-color);
  border-radius: var(--button-radius);
}

But what would be nice is something like {post_terms_category:separator_string}.

3 Likes
5

I like your idea except the category list should really by in a list element like in timmse example so hiding the comma is not enough.

The dynamic data {post_terms_category} should really be updated to use a proper list element.

1 Like
6

Thanks @timmse - I am kinda stuck with this too. Your advice seems the most relevant.

I am using pods custom fields ( multi select ) for the dynamic data. - Anyway I can show the output as separate boxes (like buttons) instead of comma separated value?

can’t seem to figure this with custom fields - Thank you sir

Snag_2c9ee1d
Snag_2c9ee1d1182×623 53.7 KB

7

Snímka obrazovky 2023-11-11 o 19.13.50
Snímka obrazovky 2023-11-11 o 19.13.50666×1360 56 KB

Guys, how would you only show one of multiple categories on single product page? Right now it shows all the categories where the product is assigned but what if I want to show only one certain category? Lets say product is in category A, B, C and I want to show only name of the C category and A and B to be hidden.

8

create function

function myterms () {
   $get_cat = get_the_terms( '', 'service-category' );
   return $get_cat[0]->name; 
}

and use {echo:myterms}

1 Like
9

Thank you for the code! For some reason I cannot get it to work. Would you have time for a quick chat? Happy to pay.

10

Conversations are text only. English is not my native language and I write through a translator.

Probably your mistake is that you need to specify your taxonomy instead of the ‘service-category’

1 Like
11

Hi did you find more simple solution?