Topic: Modify dynamic data – list of categories

marty
April 19, 2023 at 6:42 pm

I’m trying to do two things:

1. Use a headline block or similar to list categories in a query loop, but have them separated into separate “pills” where each category looks like a little button with a background color and space between items — so far I have only been able to list them within the same headline block, where the border/margin and so forth surround all of the terms rather than individually.

2. Relatedly, is there a way to list only the first category assigned to the post, instead of all of them?

Hope this makes sense, thanks for your help!
Fernando
April 19, 2023 at 7:49 pm

Hi Marty.

Let’s address #2 first.

Can you add the Categories through a Headline Block or a Button Block to your Query Loop? Let’s keep one and hide others through custom CSS.
marty
April 19, 2023 at 9:20 pm

That’s what I’m currently doing. Using a headline block inside a query loop. You can see it at the root URL I shared (it moved to the main front page now) in the right column at the top of the fold.

Thanks!
Fernando
April 19, 2023 at 9:44 pm
Give the Headline Block a class of hide-other-terms

Adding Custom Classes: https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/

Then, add this through Appearance > Customize > Additional CSS:
```
.gb-headline.hide-other-terms > :not(:first-child){
    display:none !important;
}
```
Let us know how it goes.
marty
April 20, 2023 at 1:38 pm
I have tried this and placed it along with my CSS to hide the ‘front page’ category:
```
.hide-front .gb-headline>.term-frontpage,
.hide-front .gb-headline-text>.term-frontpage {
    display: none;
}

.hide-front .gb-headline.dynamic-term-class>*:not(:last-of-type):after {
    content: " "
}

.gb-headline.hide-other-terms > :not(:first-child){
    display:none !important;
}
```
It works, but only for a post that has more than one category. Is there a way to only hide the second or later categories?

You can currently see this at my URL currently.

Thanks!
marty
April 20, 2023 at 1:40 pm

Added screencap.
Ying
April 20, 2023 at 2:30 pm

Is there a way to only hide the second or later categories?

The CSS is written in this way. The post in the screenshot is displaying correctly in my eyes, can you let me know what is issue with it? 🙂
marty
April 20, 2023 at 2:40 pm

In the second post in the screenshot, there is no category displayed at all (it’s a little blue dot)

The relevant HTML, both hidden by the CSS:

<div class="gb-headline gb-headline-8665733c hide-other-terms gb-headline-text wp-dark-mode-ignore"><span class="post-term-item term-frontpage wp-dark-mode-ignore">Front Page</span> <span class="post-term-item term-projects wp-dark-mode-ignore">Projects</span></div>

In this instance I would still like to display the ‘Projects’ category.

thanks!

Ying

April 20, 2023 at 3:04 pm

It’s hidden because of this CSS:

.hide-front .gb-headline>.term-frontpage,
.hide-front .gb-headline-text>.term-frontpage {
    display: none;
}

You can change it to:

.hide-front .gb-headline>.term-frontpage:not(:first-child), .hide-front .gb-headline-text>.term-frontpage:not(:first-child) {
    display: none;
}

marty
April 20, 2023 at 3:30 pm

Hmm, I tried the CSS but now it displays Front Page, which I want to purposely hide intentionally, but I do not want to hide the Project category in my example.

So I want to show a single category for each post, and I want to hide Front Page. All others are fine to display.

Hope that makes sense, lmk!
Fernando
April 20, 2023 at 4:30 pm

Can you remove all the CSS you have for hiding these first? Let’s try to do it from scratch to avoid conflicting codes.
marty
April 20, 2023 at 5:33 pm

Sure. When I tested this earlier I did comment out my previous CSS.

Basically I need to

– Hide ‘Front Page’ category
– Display only one category (curious also how to set the order by of this)

– Additionally I’m still interested in learning how to display categories in this manner but have separate divs / buttons / containers for each category so they appear as separate shapes.

Thank you!
Fernando
April 20, 2023 at 6:10 pm

Can you clear the cache from Autoptimize or temporarily disable it first?
marty
April 20, 2023 at 9:42 pm

Ah yes good catch, I have cleared it now.
Fernando
April 20, 2023 at 10:05 pm

The previous codes seem to still be there from my end. Can you try disabling caching plugins instead?
marty
April 21, 2023 at 10:38 am

I restored my previous CSS as the newer CSS was showing the category I wanted to hide. I will attempt this again shortly.

Viewing 16 posts - 1 through 16 (of 17 total)

1 2 →

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Modify dynamic data – list of categories