[Support request] Limit the number of categories displayed

[John]

Hello,

I have a custom taxonomy that I display on my blog loop template. But some posts have a lot of terms attached to them, so it takes a lot of screen real estate. Is there a way to limit the number of taxonomy terms displayed?

I’m using the GB Buttons to display the terms with dynamic data. Ideally I’d like to limit the number of terms to either a number of terms (e.g. 3) in some places, or to a single line that fits in my design.

Is there a way to achieve that?

Thank you

[John]

PS: there is probably a hacky way to hide extra terms with CSS, but I would prefer a less hacky solution if possible (i.e. with PHP)

[Fernando]

Hi John,

Unfortunately, there’s no filter for that.

Another option is to re-render the list of terms and show only 3 terms through PHP. But you’d still need CSS to add styling to this.

Do you significantly have a lot of categories for some posts well over 3?

[John]

Thank you Fernando.

I have enough posts with more categories that I want to display, but more importantly I cannot control how many categories the site users will be adding in the future, and I don’t want to limit them. So I’m looking for a solution that will work regardless of how many categories are added.

How to re-render the list of terms and show only 3 terms through PHP? I don’t mind adding CSS per se

[David]

Hi there,

theres no way to filter the results of that dynamic data.
So instead you could:

1. Add this PHP snippet;

function custom_post_terms() {
    $terms = get_the_terms( get_the_ID(), 'category' );
    if ( $terms && ! is_wp_error( $terms ) ) {
        $output = '';
        $count = 0;
        foreach ( $terms as $term ) {
            if ( $count >= 3 ) {
                break;
            }
            $output .= '<a class="custom-class" href="' . esc_url( get_term_link( $term ) ) . '">' . esc_html( $term->name ) . '</a>';
            $count++;
        }
        $output .= '</ul>';
        return $output;
    }
}

add_filter( 'render_block', function( $block_content, $block ) {
    if ( 
        ! empty( $block['attrs']['className'] ) 
        && 'custom-terms' === $block['attrs']['className']  
    ) { 
        $terms = custom_post_terms();
        if ($terms) {
            return $terms;
        }
    }

    return $block_content;

}, 10, 2 );

2. add a Container Block with a class that you can you use to style the links.
3. in that Container add a Headline block with a Advanced > Additional CSS Class of: custom-terms

The function will swap the headline out for the first 3 terms

[John]

Thank you David. That didn’t work unfortunately, maybe because I am using button elements instead of headlines, even though I couldn’t see anything specific to headlines in the code.

I ended up using CSS to hide all terms other than first-child and nth-child(2). That will do for now…

[David]

Ok, no problems.
To cover what the function above does:

1. you add a block with the classname. and this just acts as a placeholder nothing more.
2. the core then swaps the placeholder out with the results of that function.

[Author]

Posts