List of terms for a post

Hey,

I'm seeing the list of terms now, however I had to create each list separately (1 for each taxonomy).

Is there a way to combine these into one list? Please see image of my current layout and desired layout.

Thanks,
Fergal

however I had to create each list separately (1 for each taxonomy).

That's normal behavior, you can't add different taxonomies in the same list of terms as they are different terms.

So what exactly are you trying to combine on the front end?

I see thanks for that information Ying.

Is there a way to arrange the different term lists horizontally instead of vertically? I'm thinking if we can do this and minimize the space between the different lists then maybe on the front end it would look like one list.

Please see bottom two images here of my current layout and what I'd like to achieve:
https://imgur.com/a/EQPc0LJ

You can use the "Inline width" to have all headlines in the same line. Inside the Spacing category after "Border Radius" you should see the toggle for "Inline width".

https://tinyurl.com/2qexuonp

This is awesome thanks Jean.

I tried to hack together inserting commas between the term lists by adding ", " before text. However, there is a space after each term list. Please see below:

https://imgur.com/a/ZC3F1ez

Have any creative solutions to handle this space after each term list?

Thanks,
Fergal

Hi Fergal,

For reference, can you provide the link to where you're trying to display this?

You may use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Hey Fernando,

For sure. Please find the link in the private field. I'm trying to achieve the list of terms seen at the bottom of the URLs. The layout is pretty close as is.

I see. Try adding class make-flex to the Container Block holding the terms, then add this CSS:

.gb-container.make-flex > .gb-inside-container {
    display: flex;
}

That worked Fernando! Thank you so much.

Can we also please remove the margin-bottom: 1.5em that is being applied to the "Posted In" p tag right above the term list?

Can you try using a GB Headline Block for that instead? And then, set the margin-bottom to 0.

That worked thank you Fernando!

I have one last style ask for this type of post and created a new topic here.

Can you please take a look?

https://generatepress.com/forums/topic/add-padding-to-left-and-right-of-single-post-content/#new-post

Thanks,
Fergal

Alright! I'll reply there.

Hey Fernando,

Sorry to re-open this topic, but I now see that this style for listing categories doesn't work as expected for tablet and mobile layouts. Can you please help me fix this?

Thanks,
Fergal

Hi there,

its not possible with the current method you're using.
All terms would need to be output in one group.

I created this PHP Snippet to do that:

function show_mutiple_terms() {
    global $post;
    $terms = wp_get_post_terms($post->ID, array( 'category','post_tag' ));
	
    if ( $terms ) {
        $html = '<div class="custom-terms">';
        foreach( $terms as $term ) {
            $html .= '<a href="' . esc_attr( get_term_link( $term ) ) . '">' . __( $term->name ) . ',</a>';
        }
        $html .= '</div>';

    }
    return $html;
}
add_shortcode('display_terms', 'show_mutiple_terms' );

you need to update the array( 'category','post_tag' ) to include the custom tax slugs.

It will create the [display_terms] shortcode that you can add to your site instead