Add category classes to Post Listing items?

How To
1

In many Wordpress themes and tools, the Post Listing templates/modules will print some helpful classes with each post item in the listing. Specifically, the class I would like to add is a ‘category-[categoryslug]’ class, so I can style posts differently with CSS based on their categories.

Is there a way to do this in Bricks? Anyone else wish the Post Listing element included these classes by default?

Thanks

2

I find this frustrating. It doesn’t offer dynamic data, but you can actually put this:
{post_terms_project_type:plain}
In the CUSTOM CSS->CSS CLASSES of your main div (the one with the query).
It’s not great, as it gets the classes as the ‘readable name’, so Latest News is two words, not hyphenated.
Maybe someone can work out a better dynamic field…
Otherwise I use a code snippet to give the posts themselves the terms which they would get in most themes.

// add term classes to term archives and posts to enable styling posts of xxx term
function ds_custom_body_classes( $classes ) {
    if ( !bricks_is_builder_main() && is_singular('projects') ) {    
        global $post;
        $my_terms = get_the_terms( $post->ID, 'project_type' );
        if ( $my_terms && ! is_wp_error( $my_terms ) ) {
            foreach ( $my_terms as $term ) {
                $classes[] = $term->slug;
            }
        }
        return $classes;
    }
    return $classes;
}
add_filter( 'body_class', 'ds_custom_body_classes' );

Change ‘projects’ to your CPT, or to ‘posts’ if it’s for regular posts…

1 Like
3

Thanks so much for your reply. Yeah, it’s really frustrating that some of the standard WP classes are not added to the default elements.

Your function is helpful for the single pages, but for the listing page I’m still working through a solution. Previously, I was using the default ‘Posts’ element to list posts… it has every option I need aside from these category classes. But since those are missing, I’m having to re-build my listing as a custom query object.

Even then, as you mentioned, there is no dynamic data to print out the category slug. I’ve gone the route of using a custom function along with Bricks dynamic {echo:function_name} to print out the category slug. Here’s my function:

function bl_get_current_term_slug() {
	$cats = get_the_category();
	$slug = 'undefined';

	if ( ! empty( $cats ) ) {
		$slug = $cats[0]->slug;
	}

	return $slug;
}

These kind of ‘almost but not quite’ scenarios are why I’ve always avoided page-builders and coded my own themes… but heard so many good things about Bricks. The pains of learning a new workflow, I suppose. Hopefully Bricks grows to embrace the standard WP classes and prints them automatically for us to use.

4

I hope so. It’s also important to remember that Bricks is still a baby… it’s hard to remember because it already does so much, but it’s not even v2 yet.

5

Hi guys

Maybe I don’t fully understand what you are trying to do.

But if it is adding css attributes dynamically based on conditions or checks, isn’t the filter

add_filter( ‘bricks/element/set_root_attributes’, function( $attributes, $element )

exactly for this use case?

You could for example check in the filter which category the post belongs to and based on that set a different attribute class.

See this as an example what can be done dynamically

Cheers

Patric

1 Like
6

Thanks @Patric
I constantly find my knowledge like a sponge… it looks big but is full of holes! The filter looks like it could do the job, but I’m not sure how the code would go.

I do think it would be useful to be able to pull in the term slugs. At the moment term-slug returns a link to the archive - where what would be handy would be the actual slug/slugs. It would make adding unique classes and then styling them very easy, without needing to create yet another custom function to maintain.

1 Like
7

@Patric thanks for the reply.

Specifically, I was trying to add classes to the individual post items inside the default Bricks ‘Posts’ element. The ‘set_root_attributes’ filter you shared seems to be meant for modifying the root element’s attributes, not child items within the root element. In this case, the DOM elements I am trying to modify are the .bricks-layout-item elements within the ‘Posts’ element.

In many themes & builders, the default ‘Posts’ listing will automatically print out helpful classes such as ‘category-xyz’ on the listing items so they might be styled differently based on category. In this case, I did not see a way to modify the default ‘Posts’ listing markup to add these classes, so I had to essentially re-build the ‘Posts’ element using a custom element with a query, and then using a custom function along with Bricks {echo:function_name} dynamic content on the custom query element’s class field, thus giving me the classes I could use to style different categories posts differently. It worked for me, but I was a little bummed to have to re-create the listing just for this little feature.

Maybe there is a method using the filter you shared, that I am not grasping… also possible that you have another filter that could make this modification (perhaps ’ /query/loop_object’?) but I had to get this feature finished today for a client :slight_smile: so I didn’t have time to fully dive into all the filters.

Please do let me know if I’m missing the functionality of the ‘/element/set_root_attributes’ filter, or if there are other methods to achieve this. I’d love to continue using Bricks for client projects, and get more familiar with the Bricks workflow & capabilities.

Also, happy to share screenshots or other info if that is helpful.

8

Hi

yeah, unfortunately I have no experience with the Posts element as I never used it. I find the Posts elements too restrictive. I prefer to make my own query loops that offer endless possibilities.

So I think I can’t really help you any further, sorry.

On the positive side, I think going the way of creating your own query loop was the right way forward as it gives you full power of the data and how the data shall be shown in the front-end.

Cheers

Patric

1 Like