Styling Community Events Pages

Sometimes the default styling of Community Events needs to be customized to fit a particular theme. There are two main methods for writing CSS that only targets Community Events pages: using CSS only, or using a combination of CSS and PHP.

• CSS Only: Body Classes
• CSS and PHP: Template Tags

CSS Only: Body Classes

Any correctly-made WordPress theme will make use of the WordPress Core function body_class(), which allows plugins and themes to add custom CSS classes to the HTML body tag.

Community Events adds the following class names to the body of Community Events pages:

• .tribe_community_edit: This class is only used on Community Events submission pages.
• .tribe_community_list: This class is only used on Community Events “My Events” pages.

☝️ For a quick example of using these classes effectively, here’s a bit of example code that would make the Event Title label text on the Community Events submission form red:

body.tribe_community_edit .events-community-post-title label {
  color: red;
}

CSS and PHP: Template Tags

The above method — using HTML body classes — allows you to easily write custom CSS for Community Events pages with just CSS. No PHP is required.

You could use PHP to print CSS directly onto Community Events pages, though. There are a number of reasons why one might want to do this, and these same methods could be used to print JavaScript onto Community Events pages, too, so they’re worth describing.

The two main template tags you’ll want to be aware of in this sort of situation are as follows:

• tribe_is_community_edit_event_page(): Returns true only if the Community Events submission page is currently being viewed.
• tribe_is_community_my_events_page(): Returns true only if the Community Events “My Events” page is currently being viewed.

You could use these template tags to print CSS or JavaScript onto Community Events pages with a PHP snippet like the following, which hooks into WordPress’ wp_head action to print CSS if you’re on either the submission page or the “My Events” list page.

<?php
/**
 * Adds CSS or JS to the top of Community Events' submission and "My Events" pages.
 */
function teckb_events_community_css() {
 
  if ( ! tribe_is_community_edit_event_page() && ! tribe_is_community_my_events_page() ) {
    return;
  }
?>

<style>
.insert-your-custom-css-here {
    background: black;
    color: blue;
}
</style>

<script>
console.log( 'You can also insert JavaScript, although this may be best in the wp_footer hook' );
</script>

<?php
}
 
add_action( 'wp_head', 'teckb_events_community_css' );