Add a custom class for special feature events/productions

What would the desired output look like? Can you give an example in HTML?

<div class="wp_theatre_event special NFF">..</div> where special and NFF come from {{categories}}.
Or with [wp_events class={{thema}}] would give <div class="wp_theatre_event name_of_thema">..</div>

I have added two extra fields, ‘thema’ and ‘ism’ (in English it would be ‘theme’ and ‘icw’ (for ‘in collaboration with’), but now I can only add them as an extra div inside the wp_events div:

<div class="wp_theatre_event">
  <div class="wp_theatre_prod_thema">Documentaire</div>
  <div class="wp_theatre_event_date">eventdate</div>
  <div class="wp_theatre_event_time">eventtime</div>
  <h3><div class="wp_theatre_prod_title"><a href="permalink">title</a></div></h3>
  <div class="wp_theatre_prod_ism">Stichting Otherwise</div>
  <p class="wp_theatre_prod_excerpt">excerpt</p>
</div>

If I could make it like <div class="wp_theatre_event Documentaire">..</div> I would be able to adjust the looks of wp_theatre_event itself (things like borders, background,…) , which is now impossible.

Suppose you have a list of events and you would like to give the shown categories a different background color (like green for stand up comedy, red for drama, …). It would actually work better with extra fields, with categories you would get a ul inside of class, or you would have to adjust the code to prevent that. But on the other hand that would be an extra field to fill likely containing the same info as categories has.

So for short a way to add a custom field as class to an event (or production) would be helpful, but I think a possibility to add the different categories as classes would even be better.

You can do this yourself with a little bit of code in your functions.php.

You need to use the wpt_event_classes filter.
Something like this (not tested):

function my_wpt_event_classes($classes,$event) {
  foreach($event->production->categories() as $categorie_id) {
    $cat = get_category( $categorie_id );
    $classes[] = $cat->slug;
  }
  return $classes;
}
add_filter('wpt_event_classes','my_wpt_event_classes');

adding that gave the following:

Warning: Missing argument 2 for my_wpt_event_classes() in /home/moviewnl/domains/moview.nl/public_html/wp-content/themes/filmhuis/functions.php on line 6

Fatal error: Call to a member function categories() on a non-object in /home/moviewnl/domains/moview.nl/public_html/wp-content/themes/filmhuis/functions.php on line 7

Maybe this works better:

add_filter('wpt_event_classes','my_wpt_event_classes',10,2);

As I wrote before, it’s untested! You may still need to have some knowledge of PHP and the WordPress API to make it work for you.

Hi Jeroen,

the above worked fine adding a {{thema}} and {{ism}} to every production, but with version 10.2 (maybe 10.1, I’m not sure) for every event with an empty (production) {{ism}} field I get:
<div class="wp_theatre_event_ism"><div class="wp_theatre_prod_ism"></div></div>
For events with a value for {{ism}} I get (as suspected):
<div class="wp_theatre_event_ism">'t Venster</div>
Before I got an empty div with only the wp_theatre_event_ism class for events.

Because I use CSS wp_theatre_event_ism:not(:empty)::before, wp_theatre_prod_ism:not(:empty)::before to add the ‘I.s.m.’ before the value, I now get single I.s.m. for events without a {{ism}} value.

Do you have an idea how this happens? For now I’ll just remove the {{ism}} from the displaycode.

Can I see this in action somewhere?

Sure, see for example the hiden, public page https://moview.nl/test
I’ve added the code in the page (adjusted so it will not be rendered).
It’s basically a testpage used for testing configs of theater

I think that if you change:

#content .wp_theatre_prod_ism:not(:empty)::before, #content .wp_theatre_event_ism:not(:empty)::before {
content: "I.s.m. ";
}

to just:

#content .wp_theatre_prod_ism:not(:empty)::before {
content: "I.s.m. ";
}

everything looks fine again.

However, it think would be better to use the wpt_production_ism filter to prepend your text with ‘i.s.m.’.

Jeroen

I thought the same at first, but with events with an ism code there is no div.wp_theatre_prod_ism, only a div.wp_theatre_event_ism with the content.

Adding it within the filter would be better indeed, now the I.s.m. is no content (you can’t search for it, because it is styling). But by using CSS I can use a different abbr for the English page (In collaboration with, aka I.c.w.). Doing that in functions would be more of a challenge, I think.
And in that case the function should also check if the tag has content or not. But now it works generally, making a div for every field in the code, with possible empty divs.

You can also use the wpt_event_ism_html filter to write your own HTML.
I will however release an update that changes the html output back to the old situation.