What is a body class and why do I need one?

The Events Calendar, Events Calendar PRO and many of our other plugins expect themes to follow a number of standard practices. If they don't, then problems can surface and potentially break the functionality of your calendar.

In this post we're going to look at body classes, which are something we expect themes to implement and which are important for your calendar.

What is a body class?

In a typical website, almost every page is an HTML document and can be divided into two elements - the head and the body. The start of the body element looks something like this:

<body>

You can see this if you use your web browser to view the web page source or, if you are familiar with your browser's developer tools, you can use those to check it out, too.

The above example actually shows exactly what - typically - we don't want to see on a WordPress site. It would be very unusual indeed for the opening tag of the body element to be so simple. Ordinarily, we would like to find that it looks something more like this:

<body class="home blog page-template-index-php">

See the extra "class" information there? That's a good indicator that the theme implements body classes.

What if they are missing?

If there are no body classes then numerous things can break, including pagination and the general presentation of your event pages.

The good news is that adding body class support to a theme is a relatively easy thing to do (and is documented in the WordPress Codex - see here). If you feel comfortable tweaking your theme's templates to add this function, then go right ahead and see if it helps with any problems you have been experiencing.

With that said, should you be using a theme written by someone else - perhaps a commercial theme you have purchased a license for - and you wish to continue updating it in the future, it is well worth making contact with the theme author (or support team) and asking that they add body class support.

Apart from benefiting other users of the theme, it will make life a lot easier in the future when you next need to update.

I do have body classes but am still hitting problems

If you are hitting problems when you view event pages (such as pagination not working, or a spinner icon appearing and never going away) but have checked your theme to ensure it supplies body classes, it may still be worth taking a moment to look again.

On your main events page, for instance, compare the body classes you see with this sample taken from a fully functional test site:

<body class="tribe-events-uses-geolocation tribe-filters-closed custom-font-enabled events-list events-archive tribe-theme-twentytwelve tribe-events-page-template">

The exact range of class names you see will vary depending on numerous factors, but the key thing to note is that - certainly within event views - you should see more than one class name prefixed tribe-.

If you don't see any tribe- classes (but do see some other classes) then it's probable that your theme, while providing its own custom body class implementation, is not actually using WordPress's standard body_class() function – again leading to breakages.

If this is the case then once again it is well worth talking with the theme author/support team and requesting that they implement body classes according to standard WordPress conventions.

We hope this helps to provide some insights and, as ever, if you encounter technical difficulties within your calendar pages please don't hesitate to let us know via our help desk!