Anil Ankola

This is a really simple way to add body class and is especially useful if you are creating a theme or website.

Add Custom Body Class

Use this plugin to add a custom class in the HTML body tag.

syedkamruzzaman

Add your own CSS classes to specific Pages, Posts, or Custom Post Types—without editing theme files. 
Add custom <code><body></code> classes—safely prefixed—on any Page, Post, CPT, or WooCommerce view (Shop, Cart, Checkout, My Account) with zero theme edits.
I created Custom Class Add On Page as a simple way to manage <code><body></code> classes with a safe <code>ccaop_</code> prefix. Choose the target (Page, Blog page, Single Post, CPT archive/single, or a specific CPT item), save, and the class is injected via the <code>body_class</code> filter. Clean code, lightweight implementation, and solving real problems are the focus. Collaboration and feedback are welcome.
Highlights 
– Add classes to: a single Page, the Blog (Posts) page, all Single Posts, CPT Archive, all CPT Singles, or a specific CPT item. 
– Safe auto-prefix (<code>ccaop_</code>) prevents conflicts. 
– WooCommerce-aware: Shop (product archive), Cart, Checkout, and My Account are supported. 
– Clean admin UI with a table listing every rule you’ve created (class + location) and a delete action. 
– Activation redirect: after activation, you’re taken straight to the settings page. 
– Lightweight: uses the <code>body_class</code> filter only—no front-end bloat.
<ul>
<li><a href="https://syed-kamruzzaman.com/#contact" rel="nofollow ugc">Need Help?</a></li>
<li><a href="https://syed-kamruzzaman.com/" rel="nofollow ugc">About Author</a></li>
</ul>
<h3>Video Tutorial</h3>
<iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/n6D3Ya_6A8o?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe>
<h3>⚡ What you can configure</h3>
<ul>
<li>Enter a custom class name (auto-saved as <code>ccaop_{your_class}</code>).</li>
<li>Choose where to apply it: Page / Post / Custom Post.</li>
<li>For Page → pick any page (Blog/Posts page is intentionally excluded here; use Post → Blog page).</li>
<li>For Post → choose Blog page (posts index) or All single posts.</li>
<li>For Custom Post → choose the CPT and target (Archive, All single, or Specific item).</li>
</ul>
<h4>Usage</h4>
<ol>
<li>Go to Dashboard → Class Option.</li>
<li>Type your class name (e.g. <code>hero</code>, saves as <code>ccaop_hero</code>).</li>
<li>Select Page / Post / Custom Post, then pick the exact target.</li>
<li>Click Save. Visit the selected view and inspect <code><body></code>—you’ll see your class.</li>
</ol>
<h3>⚡ Features</h3>
<ul>
<li>Ready to use—no coding needed</li>
<li>Auto-prefixed classes to avoid collisions</li>
<li>Page / Post / CPT (archive, single, specific item) targets</li>
<li>WooCommerce Shop, Cart, Checkout, My Account support</li>
<li>Rule list with delete action</li>
<li>Lightweight & fast, theme-agnostic</li>
<li>Works with cached sites (no dynamic output buffering)</li>
</ul>
<h3>WooCommerce Notes</h3>
If you select the Shop page under Page, the plugin detects it as the product archive and adds your class on Shop views correctly. 
Similarly, Cart, Checkout (including endpoints like order-pay, order-received) and My Account are handled.

Custom Class Add On Page

Add safely-prefixed custom  classes to Pages, Posts, CPTs, and WooCommerce views—no theme edits required.

Add Custom Body Class vs Custom Class Add On Page