A conditional CSS class helper, like Laravel’s class directive

Recently I’ve been working on more Laravel projects, and it’s easy to get used to the exceptional developer experience it provides. Everything is beautifully put together, and so well documented that working with it is a pleasure.

Coming back to WordPress development, and building a bespoke WordPress theme, I can’t help but miss some of the niceties given to you by the Blade templating engine.

The @class directive is something that I find very handy when working with TailwindCSS inside Laravel. Read more about Laravel’s @class directive

Essentially, it will conditionally compile a class string. The directive accepts an array of classes where the array key contains the class or classes you wish to add, while the value is a boolean expression. If the array element has a numeric key, it will always be included in the rendered class list.

The example given in the Laravel documentation is as follows:

 1@php
 2    $isActive = false;
 3    $hasError = true;
 4@endphp
 5 
 6<span @class([
 7    'p-4',
 8    'font-bold' => $isActive,
 9    'text-gray-500' => ! $isActive,
10    'bg-red' => $hasError,
11])></span>
12 
13<span class="p-4 text-gray-500 bg-red"></span>

And so, I set out to create something similar that I could use in a custom WordPress theme or plugin.

I’m a real advocate for building your own tools, especially when working with WordPress, to improve your efficiency and productivity. I’ve built a whole suite of packages to do exactly that. The biggest benefit, for me, is knowing exactly how the code works, and what to expect when I use it.

What I ended up with in this case is a PHP library that you can bring into your WordPress theme using Composer, or add with a straightforward include statement, and use it to conditionally compile class strings in the same way as the @class directive does.

You can install the package inside your theme using Composer, like this:

1composer require intimation/catalyst-attributes

Using the Attributes class

To illustrate its use, in a recent project, the site header was to have a transparent background on the home page, and a fixed position above a large banner image, while on all of the other pages, it would appear on its own with a flat black background, and scroll with the page.

While it would be easy to write the conditional logic in and compile the class strings with an if/ else statement, it always looks awkward, and it’s prone to errors and overrides when you least expect them. Using the Attributes class we have a nice, clean syntax and a better way to compile complex class strings.

In this case, I used the Attributes class as follows:

 1<header <?php echo \Intimation\Catalyst\Attributes::class( [
 2    'transition px-4 sm:px-6 2xl:px-16 z-50',
 3    'fixed top-0 right-0 left-0' => is_front_page(),
 4    'bg-black sticky top-0'      => !is_front_page(),
 5] ); ?>>
 6</header>
 7 
 8<!-- On the home page -->
 9<header class="transition px-4 sm:px-6 2xl:px-16 z-50 fixed top-0 right-0 left-0"></header>
10 
11<!-- Everywhere else -->
12<header class="transition px-4 sm:px-6 2xl:px-16 z-50 bg-black sticky top-0"></header>

Use it yourself

This package is open source, and you’re welcome to use it in your own projects as you see fit.

The repository is available at https://github.com/intimationcreative/catalyst-attributes and it’s also listed on Packagist at https://packagist.org/packages/intimation/catalyst-attributes.