Horizontal Categories List

Hi! Have you tried using the “Categories” block (rather than “Categories List”)? It should show a horizontal, comma-separated list of categories, like so:

I saw that block, but it isn’t clear on how to use it. When I added it, it did not display my list of categories like the Category List Block did. It displays one field that says “No Categories”. I don’t know if there’s something I have to do to get it to populate or if it’s not working.

Ah, I think I see what’s going on here. The Categories block only shows the categories that are assigned to the current post, whereas the Categories List block shows all existing categories. I take it that you’d like to show all existing categories then?

If so, then you should indeed use the Categories List block. Since it doesn’t provide a built-in option to display categories horizontally, you’ll need to add a bit of custom CSS to style it.

To do so, open the Styles tab, and click on the “Blocks” item at the bottom. This will open a list of block types. Locate the Categories List block (you can use the Search field to get there more quickly) and click on it.

In the Categories List block’s styling panel, open the “Advanced” panel at the bottom. This will allow you to enter additional CSS that will be applied to all instances of the Categories List block.

If that field is empty, enter the following:

& li {
    display: inline-block;
    margin-right: 0.5em;
}

(You can tweak the value used for margin-right to change the spacing in between categories.)

If the “Additional CSS” field is not empty, please let me know; it’ll require a bit of tweaking to reconcile the existing custom styling with the code snippet I shared.

Thanks, I had to modify the first line of your code. I couldn’t get it to work when I entered the code the way you have it. I couldn’t figure out how to name the class in the Advanced section.

I changed the first line to “li.cat-list {” then put the name “cat-list” in the Advanced section and it worked.

Thanks for pointing me in the right direction.

You’re welcome! Glad you got it to work.