Bricks and WP hooks for odd/even style classes

How To
1

I would like to add different style classes for even and odd posts, I found this tip:

However, after adding this feature to function.php I find that the post_class hook is never called, is this Bricks fault or is it done differently in WP 6 version?

How to do it?

1 Like
2

After a few days of struggle I finally came to a solution, it’s a shame that I lost so much time.
But I’ll share it with others if anyone needs it.

You need to add a filter to the functions.php file:

global $_class;
$_class = 'odd';
add_filter( 'bricks/element/render', function( $render, $element ) {
  if ( $element->id === 'kccvgo' ) {
    global $_class;
    $element->attributes['_root']['class'][] = $_class;
    $_class = ($_class == 'odd') ? 'even' : 'odd';
  }
  return $render;
}, 10, 2 );
3

Hi,

It looks a bit complicated to me :wink:

Unless you really need to set these exact class names for some purpose I don’t know, you can directly style your posts by targeting your even/odd posts with :nth-child() CSS selector:

.some-wrapper-selector .etc .the-post-selector:nth-child(even) {
  /* your CSS... */
}
.some-wrapper-selector .etc .the-post-selector:nth-child(odd) {
  /* your CSS... */
}
4

Unfortunately, I can’t do that because I also need to use a first-type-of selector in my styles, and it’s not allowed to use two selectors at the same time:

.class:nth-child(odd):first-type-of {...

but my solution works and is really simple, although it took a ton of time to get to it (no examples and sparse Bricks documentation for the programmer)

5

Then use additional rules to style specific elements differently if needed:

.class:nth-child(odd) { }
.class:nth-child(even) { }
.class:first-of-type { /* First */ }
.class:nth-of-type(2) { /* Second */ }

Or explain us what you need to achieve and we can find the right set of rules.

Using PHP as a workaround is definitely not healthy and it adds complexity which you’ll probably regret one day :wink:

6

What you showed in the sample style definition will not work as I described. Your code defines each of the styles with the OR operator, I need with the AND operator. That is, for example, the first element of type AND even, where the evenness is to be counted within elements of the same type. In your case, the selection conditions are counted independently. One is not a subset of the other, if you know what I mean.

In addition, my example above is heavily simplified for the forum, in reality the logic is a bit more complex.

Well, and finally, I absolutely disagree that using PHP within the mechanisms offered by WP (hooks/filters) is wrong or against the rules.

7

My example was… an example. Just adapt it :wink:
Maybe it would be clearer with only “child” pseudo classes or only “of-type”, but it is actually the same in posts query, since all items have the same “type”.

The first odd element is always number 1, and the first even element is 2, so it IS working, you don’t even need AND.
But if you don’t explain exactly what you need, of course my answers won’t suit you.

Just wanted to share good practices… PHP is not meant for styling, and adding a semantic class that means odd/even is a shame since CSS can target odd/even items :wink:

Anyway, if you’re happy with your own solution, everything is OK.