[Resolved] Adding custom class to core GP sections via php in child template files

[Matthew]

Hi, thanks for everything, quick question. I am moving a site to GeneratePress that already has an all-encompassing custom stylesheet. It is built with Tailwind so the entire thing is <10kb and every class is referenced like this:

.bg-gray-50{--tw-bg-opacity:1;background-color:rgba(249,250,251,var(--tw-bg-opacity))}
.border-white{--tw-border-opacity:1;border-color:rgba(255,255,255,var(--tw-border-opacity))}
.text-gray-500{--tw-text-opacity:1;color:rgba(107,114,128,var(--tw-text-opacity))}

The question is, how can I apply all of these classes to GP without having to replicate any code, or add hundreds of GP classes like “generate-columns” to the original stylesheet? I would like to be able to add these custom classes to core GP sections such as site-header, site-info, etc to avoid an abundance of inline code.

I thought that by copying /inc/structure/footer.php to the child theme and modifying it I would be able to make changes. However, maybe I am modifying it incorrectly, or maybe child themes do not detect files buried in this folder structure. Either way, nothing I do seems to make any changes. Originally I had hoped it would be as simple as something like modifying the code below, but obviously I was mistaken:

<footer <?php generate_do_attr( 'site-info','bg-gray-50' ); ?>>

Any suggestions or recommendations for the best course of action would be greatly appreciated, thank you!

[Tom]

Hi there,

That function comes with filters: generate_do_attr()

It’s new in 3.1 so we don’t have documentation on it yet, but it works like this:

1. Note the first parameter – site-info in your example.
2. Add the filter and reference that ID:

add_filter( 'generate_parse_attr', function( $attributes, $context ) {
    if ( 'site-info' === $context ) {
        $attributes['class'] .= ' my-custom-class';
    }

    if ( 'another-id' === $context ) {
        $attributes['class'] .= ' another-custom-class';
    }

    return $attributes;
}, 10, 2 );

This system works with any HTML attributes, so you can do things like: $attributes['id'] = 'custom-id'; or $attributes['data-something'] = 'else';

Hope this helps!

[Matthew]

Tom, you are an absolute legend! That helps immensely, exactly what I was looking for…..thanks a million! 😀

[Tom]

Glad I could help! 🙂

[Author]

Posts