Multiple seperate categories inside a query loop

1

I can I display categories as separate “blocks” instead of having them display with a comma in between next to each other?

image
image3348×1604 405 KB

2

not sure. Been looking for something like this myself.

You can specify html tag(s). This will be placed between the categories and render the html

Like

{post_terms_location:</br>}

where the br tag is a linebreak(enter) so more html should be possible

It does somehow seem to order them alphabetical. Haven’t found a way to change this jet.

Not sure what you mean with blocks. You can start with a tag, then categories, end the tag, open it again and it should repeat. Then after, close the tag

<sometag> {post_terms_location:</closesometag> <sometag>} </closesometag>

Or assign a class to it for

<span class="someclass">{post_terms_location:</span>}
3

It’s a query loop, I’m not supposed to put multiple things in there, no? I just want to have the categories separate. I can’t put a gap between the categories - so they are seperate rectangles - or remove the comma.

4

you can.

To have a space between them and no comma, add :space after category

like

{post_terms_category: }

to make them rectangles you will need to add a background color or border or so, so i would add a span to add a class or inline css

<span class="classforcss">{post_terms_category:</span>}
5

Tnx, I know but I want to control them in a div and control how they are displayed, and what gap etc.

6

best way i can think of is:

<div class="AddClassForCss">{post_terms_category:</div>}

or inline

<div style="background-color:aliceblue;padding:25px;">{post_terms_category:</div>}

something like this. Add/change till you get the desired effect.

As post_terms_category outputs as 1 single object, you can not separate them to control them individual.

maybe if you really want to you can see if you can use some echo function but thats beyond my knowledge

7

That’s not implemented, also want that sometimes. Use PHP in a code block.

8

Tnx, I dont have to look any further then. I have no idea where to start when you say “use php” though.

9

Code element and ChatGPT will be a good start.

With clickable categories it is something like this:

<?php
$terms = get_terms([
    'taxonomy'   => 'category',
    'hide_empty' => false,
]);

if (!empty($terms) && !is_wp_error($terms)) : ?>
    <div class="category-wrapper">
        <?php foreach ($terms as $term): ?>
            <div class="category-item">
                <a href="<?php echo esc_url(get_term_link($term)); ?>">
                    <?php echo esc_html($term->name); ?>
                </a>
            </div>
        <?php endforeach; ?>
    </div>
<?php endif; ?>

Remove a tag for non-clickable version

10

I don’t need them to be clickable, just visually separate. I always try ChatGPT before I come here btw :slight_smile:

11

The

<a href=""></a>

makes them clickable. Remove the A tag.

12

Hey, I don’t need them to be clickable. Just want them separated. I’m a bit confused why the clickable keeps coming up?

13

You said you don’t need them clickable.

If you assign a class to them instead of the link, you can target the class by css and make them separate.