How to Conditionally Apply CSS with jQuery Based on Body Classes in WordPress

Learn how to execute CSS styles conditionally in jQuery, depending on the active body classes in WordPress. Perfect for multilingual websites!
---

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Execute CSS inside jQuery only if body class exists

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Effectively Using jQuery with CSS in WordPress for Multilingual Sites

In multilingual WordPress websites, it's common to change styles based on the active language. If you want to hide or display specific elements in your menu depending on the active language, you may be wondering how to elegantly achieve this using jQuery. Let's explore the problem and how we can effectively solve it.

The Problem

When working with languages in WordPress, the body class changes to reflect the active language. You might want to hide certain menu items if a specific language is active. The challenge is to execute CSS rules using jQuery based on whether a certain class (for example, translatepress-ru_RU for Russian) is present in the body tag.

Here's what you're trying to achieve:

Check if the body class corresponds to an active language.

If so, apply the CSS display: none; to hide specific menu items.

If not, show the items as usual.

You might have already attempted a solution similar to this:

[[See Video to Reveal this Text or Code Snippet]]

However, it appears that this approach didn't work for you. So, let's break down a more effective solution.

A Better Solution: Using CSS Instead of jQuery

While the jQuery method you tried can work, there is a simpler and more efficient way to achieve the desired result directly with CSS. Here’s how:

Step 1: Use the Existing Body Class

Instead of using jQuery to manipulate the CSS after the page has loaded, you can leverage CSS’s ability to conditionally apply styles based on the presence of body classes. Here's the CSS rule you'll need to add to your stylesheet:

[[See Video to Reveal this Text or Code Snippet]]

Step 2: How It Works

Targeting the Menu Item: -menu-item-17728 targets the specific menu item you want to hide.

CSS Rule: display: none; hides the menu item when the condition is met.

This method has several advantages:

Efficiency: Directly applying CSS is faster than manipulating elements with JavaScript/jQuery after page load.

Simplicity: This method requires less code and is fully responsive to changes in body class.

Conclusion

By placing the CSS rule directly in your stylesheet, you can effectively hide and show menu items based on active language without the need for complex jQuery scripts. This not only enhances the performance of your WordPress site but also makes your code cleaner and easier to maintain.

If you ever find yourself needing to manipulate styles conditionally based on active classes, remember that CSS can often do the work for you. Happy coding!