WP Grid Builder Card Filter – How to Add Custom Classes to Your Grid Cards

If you have ever needed to add a custom CSS class to individual cards in a WP Grid Builder grid, you have probably found yourself searching for wp_grid_builder/card filter. This guide explains exactly how to do it.

Why Add Custom Classes to Cards?

Adding custom classes unlocks a lot of design flexibility. You might want to:

• Style cards differently based on post type (blog posts vs. products vs. portfolio items)
• Add a unique class based on the post ID for JavaScript interactions
• Target specific cards with hover effects
• Integrate with third-party plugins that rely on specific class names

WP Grid Builder’s card builder is powerful, but sometimes you need that extra level of control that only PHP filters can provide

The Main Filter: wp_grid_builder/card/attributes

This filter allows you to modify the HTML attributes of any card in a WP Grid Builder grid. You can add custom classes, data attributes, or modify existing ones.

Basic Usage

Here is the most common use case – adding the post type as a CSS class to every card

function set_class_postype( $atts, $card ) {
    // Get the current post, term, or user object
    $object = wpgb_get_object();
    
    // If it is a post, add post type as a class
    if ( isset( $object->post_type ) ) {
        $atts['class'] .= ' ' . $object->post_type;
    }
    
    return $atts;
}
add_filter( 'wp_grid_builder/card/attributes', 'set_class_postype', 10, 2 );

Critical: Always use wpgb_get_object() to get the current card object. If you use get_post_type() without this, you will get the post type of the page where the grid is embedded, not the post inside the card

One developer who figured this out was excited about the possibilities: “Found the solution! I simply added $object = wpgb_get_object(); $post_type = $object->post_type; Wooo so excited, this opens the door for so many possibilities!

Adding Post ID as a Class

Sometimes you need a unique class per card for JavaScript interactions, like linking cards to map markers

function add_post_id_to_card( $atts, $card ) {
    $object = wpgb_get_object();
    
    if ( isset( $object->ID ) ) {
        $atts['class'] .= ' post-' . $object->ID;
    }
    
    return $atts;
}
add_filter( 'wp_grid_builder/card/attributes', 'add_post_id_to_card', 10, 2 );

Other Useful Filters for Cards

wp_grid_builder/blocks – Register Custom Card Blocks

This filter allows you to add your own blocks to the WP Grid Builder card builder. You can display custom field data, generate dynamic content, or anything else you need

function register_custom_block( $blocks ) {
    $blocks['custom_field_image_block'] = [
        'name'            => 'Custom Field - Image',
        'render_callback' => 'render_custom_field_image_block',
    ];
    return $blocks;
}
add_filter( 'wp_grid_builder/blocks', 'register_custom_block', 10, 1 );

function render_custom_field_image_block() {
    // Object can be a post, term or user
    $object = wpgb_get_object();
    
    // If this is not a post
    if ( ! isset( $object->post_type ) ) {
        return;
    }
    
    // Get custom field value (change "your_field_name")
    $image_id = get_post_meta( $object->ID, 'your_field_name', true );
    
    if ( ! empty( $image_id ) ) {
        echo wp_get_attachment_image( $image_id, 'medium' );
    }
}

This approach is especially useful for displaying data from Advanced Custom Fields (ACF) directly inside your grid cards

wp_grid_builder/custom_fields – Register Custom Facet Sources

If you need to filter by custom fields that are not automatically detected, this filter lets you register them as facet sources

Common Issues and How to Fix Them

Problem: The Class is Added but Nothing Changes

You added the class through the filter, you can see it in the HTML, but your CSS is not working. This usually happens because of CSS specificity conflicts

WP Grid Builder loads its own stylesheets, and they can be hard to override. One developer found a clever workaround using CSS cascade layers

add_filter('style_loader_tag', function ($tag, $handle, $href, $media) {
    // Only match WP Grid Builder front-end styles
    if (is_admin() || strpos($handle, 'wpgb-') !== 0) {
        return $tag;
    }
    // Replace link with inline style using cascade layer
    return '<style>@import "' . $href . '" layer(base);</style>' . "\n";
}, 10, 4);

Then define your layers at the top of your theme stylesheet:

@layer base, components, utility;

Now you can write your custom styles in a higher layer that will override the plugin styles

Problem: Class Added to the Card Wrapper Instead of the Card Itself

Depending on your theme or page builder, the wp_grid_builder/card/attributes filter might add classes to the card wrapper rather than the inner card element

If this happens, you might need to target the specific block or element using a different filter like render_block_generateblocks/container for GenerateBlocks, or similar hooks for your specific page builder

Quick Reference Table

Final Tips

• Always use a unique prefix for your function names (like your theme or organization name) to avoid conflicts with other plugins
• Clear your grid cache after adding PHP filters – WP Grid Builder caches card output for performance
• Test on a staging site first, especially when modifying card attributes that affect the entire grid
• The wpgb_get_object() function is your best friend – it reliably returns the current post, term, or user being displayed in the card

Need Help with Your WP Grid Builder Setup?

If you are stuck with custom filters, card styling, or complex facet configurations, I can help.

Get a free estimate within 24 hours for your specific issue.

Send me:

• What you are trying to achieve
• What code you have tried
• URL of your site

I will look at your setup and tell you exactly what needs to be fixed and how much it will cost.

If I am fully booked, one of our WordPress developers will step in to help you.

No obligations. Just an honest assessment.

Get Your Free Estimate →

24-hour response time. Serious inquiries only.