Custom Class Add On Page
Add safely-prefixed custom classes to Pages, Posts, CPTs, and WooCommerce views—no theme edits required.
Plugin info
Maintenance & Compatibility
Maintenance score
Actively maintained • Last updated 82 days ago
Is Custom Class Add On Page abandoned?
Likely maintained (last update 82 days ago).
Compatibility
Similar & Alternatives
Explore plugins with similar tags, and compare key metrics like downloads, ratings, updates, support, and WP/PHP compatibility.
Description
Add your own CSS classes to specific Pages, Posts, or Custom Post Types—without editing theme files.
Add custom 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 classes with a safe ccaop_ 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 body_class 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 (ccaop_) 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 body_class filter only—no front-end bloat.
Video Tutorial
⚡ What you can configure
- Enter a custom class name (auto-saved as
ccaop_{your_class}). - Choose where to apply it: Page / Post / Custom Post.
- For Page pick any page (Blog/Posts page is intentionally excluded here; use Post Blog page).
- For Post choose Blog page (posts index) or All single posts.
- For Custom Post choose the CPT and target (Archive, All single, or Specific item).
Usage
- Go to Dashboard Class Option.
- Type your class name (e.g.
hero, saves asccaop_hero). - Select Page / Post / Custom Post, then pick the exact target.
- Click Save. Visit the selected view and inspect
—you’ll see your class.
⚡ Features
- Ready to use—no coding needed
- Auto-prefixed classes to avoid collisions
- Page / Post / CPT (archive, single, specific item) targets
- WooCommerce Shop, Cart, Checkout, My Account support
- Rule list with delete action
- Lightweight & fast, theme-agnostic
- Works with cached sites (no dynamic output buffering)
WooCommerce Notes
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.
Installation
Minimum Requirements
- WordPress 5.8 or greater
- PHP 7.2 or greater
- MySQL 5.0 or greater
Automatic Installation
- In your WordPress dashboard, go to Plugins Add New.
- Search for Custom Class Add On Page.
- Click Install Now and then Activate.
You’ll be redirected to the settings page.
Manual Installation
- Upload the plugin folder to
/wp-content/plugins/. - Activate the plugin from Plugins in your dashboard.
- Go to Class Option in the admin menu.
Updating
Automatic updates should work seamlessly. As always, back up your site before updating.
Frequently Asked Questions
No. It only appends your custom class to the <body> element via WordPress’s body_class filter.
Yes. Add as many mappings (class location) as you need. Each shows up in the table where you can delete them later.
By design, the Blog page is managed under Post Blog page to avoid confusion with static pages.
Yes—Shop (product archive), Cart, Checkout (and its endpoints), and My Account are supported.
Your input is sanitized and auto-prefixed with ccaop_ (e.g. container ccaop_container) to keep it safe and unique.
Review feed
Changelog
1.0.0
- Initial release: add custom classes to Pages, Posts, and CPTs; WooCommerce-aware; rule list; activation redirect.




