{"id":254881,"date":"2025-10-09T20:32:55","date_gmt":"2025-10-09T20:32:55","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/custom-class-add-on-page\/"},"modified":"2025-10-09T21:04:40","modified_gmt":"2025-10-09T21:04:40","slug":"custom-class-add-on-page","status":"publish","type":"plugin","link":"https:\/\/twd.wordpress.org\/plugins\/custom-class-add-on-page\/","author":23376165,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"1.0.0","stable_tag":"1.0.0","tested":"6.8.5","requires":"6.7","requires_php":"7.2","requires_plugins":null,"header_name":"Custom Class Add On Page","header_author":"Syed Kamruzzaman","header_description":"Add custom CSS classes to specific pages, posts, or custom post types. The class is auto-prefixed with \"ccaop_\".","assets_banners_color":"cddaf3","last_updated":"2025-10-09 21:04:40","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"https:\/\/wordpress.org\/plugins\/custom-class-add-on-page\/","header_author_uri":"https:\/\/syed-kamruzzaman.com\/","rating":0,"author_block_rating":0,"active_installs":0,"downloads":189,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.0.0":{"tag":"1.0.0","author":"syedkamruzzaman","date":"2025-10-09 21:04:40"}},"upgrade_notice":{"":"<p>N\/A<\/p>"},"ratings":[],"assets_icons":{"icon-256x256.png":{"filename":"icon-256x256.png","revision":3375979,"resolution":"256x256","location":"assets","locale":""}},"assets_banners":{"banner-772x250.png":{"filename":"banner-772x250.png","revision":3375979,"resolution":"772x250","location":"assets","locale":""}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.0.0"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":3375979,"resolution":"1","location":"assets","locale":""},"screenshot-2.png":{"filename":"screenshot-2.png","revision":3375979,"resolution":"2","location":"assets","locale":""},"screenshot-3.png":{"filename":"screenshot-3.png","revision":3375979,"resolution":"3","location":"assets","locale":""},"screenshot-4.png":{"filename":"screenshot-4.png","revision":3375979,"resolution":"4","location":"assets","locale":""},"screenshot-5.png":{"filename":"screenshot-5.png","revision":3375979,"resolution":"5","location":"assets","locale":""}},"screenshots":{"1":"Settings screen\u2014add a class and choose where it applies","2":"Page\/Post\/CPT selectors (conditional dropdowns)","3":"Rules table with locations and delete action","4":"Example: class added to <code>&lt;body&gt;<\/code> on the front end","5":"WooCommerce Shop page with custom body class"},"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[20098,21495,1794,234314,286],"plugin_category":[45],"plugin_contributors":[248985],"plugin_business_model":[],"class_list":["post-254881","plugin","type-plugin","status-publish","hentry","plugin_tags-body-class","plugin_tags-custom-class","plugin_tags-custom-post-type","plugin_tags-page-class","plugin_tags-woocommerce","plugin_category-ecommerce","plugin_contributors-syedkamruzzaman","plugin_committers-syedkamruzzaman"],"banners":{"banner":"https:\/\/ps.w.org\/custom-class-add-on-page\/assets\/banner-772x250.png?rev=3375979","banner_2x":false,"banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/custom-class-add-on-page\/assets\/icon-256x256.png?rev=3375979","icon_2x":"https:\/\/ps.w.org\/custom-class-add-on-page\/assets\/icon-256x256.png?rev=3375979","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/custom-class-add-on-page\/assets\/screenshot-1.png?rev=3375979","caption":"Settings screen\u2014add a class and choose where it applies"},{"src":"https:\/\/ps.w.org\/custom-class-add-on-page\/assets\/screenshot-2.png?rev=3375979","caption":"Page\/Post\/CPT selectors (conditional dropdowns)"},{"src":"https:\/\/ps.w.org\/custom-class-add-on-page\/assets\/screenshot-3.png?rev=3375979","caption":"Rules table with locations and delete action"},{"src":"https:\/\/ps.w.org\/custom-class-add-on-page\/assets\/screenshot-4.png?rev=3375979","caption":"Example: class added to <code>&lt;body&gt;<\/code> on the front end"},{"src":"https:\/\/ps.w.org\/custom-class-add-on-page\/assets\/screenshot-5.png?rev=3375979","caption":"WooCommerce Shop page with custom body class"}],"raw_content":"<!--section=description-->\n<p>Add your own CSS classes to specific Pages, Posts, or Custom Post Types\u2014without editing theme files.<br \/>\nAdd custom <code>&lt;body&gt;<\/code> classes\u2014safely prefixed\u2014on any Page, Post, CPT, or WooCommerce view (Shop, Cart, Checkout, My Account) with zero theme edits.<\/p>\n\n<p>I created <strong>Custom Class Add On Page<\/strong> as a simple way to manage <code>&lt;body&gt;<\/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.<\/p>\n\n<p><strong>Highlights<\/strong>\n- Add classes to: a single Page, the Blog (Posts) page, all Single Posts, CPT Archive, all CPT Singles, or a specific CPT item.\n- Safe auto-prefix (<code>ccaop_<\/code>) prevents conflicts.\n- WooCommerce-aware: Shop (product archive), Cart, Checkout, and My Account are supported.\n- Clean admin UI with a table listing every rule you\u2019ve created (class + location) and a delete action.\n- Activation redirect: after activation, you\u2019re taken straight to the settings page.\n- Lightweight: uses the <code>body_class<\/code> filter only\u2014no front-end bloat.<\/p>\n\n<ul>\n<li><a href=\"https:\/\/syed-kamruzzaman.com\/#contact\">Need Help?<\/a><\/li>\n<li><a href=\"https:\/\/syed-kamruzzaman.com\/\">About Author<\/a><\/li>\n<\/ul>\n\n<h3>Video Tutorial<\/h3>\n\n<p>[youtube https:\/\/youtu.be\/n6D3Ya_6A8o?si=OU_93zwxyfCF8HSU]<\/p>\n\n<h3>\u26a1 What you can configure<\/h3>\n\n<ul>\n<li>Enter a custom class name (auto-saved as <code>ccaop_{your_class}<\/code>).<\/li>\n<li>Choose where to apply it: <strong>Page \/ Post \/ Custom Post<\/strong>.<\/li>\n<li>For <strong>Page<\/strong> \u2192 pick any page (Blog\/Posts page is intentionally excluded here; use Post \u2192 Blog page).<\/li>\n<li>For <strong>Post<\/strong> \u2192 choose <strong>Blog page (posts index)<\/strong> or <strong>All single posts<\/strong>.<\/li>\n<li>For <strong>Custom Post<\/strong> \u2192 choose the CPT and target (<strong>Archive<\/strong>, <strong>All single<\/strong>, or <strong>Specific item<\/strong>).<\/li>\n<\/ul>\n\n<h4>Usage<\/h4>\n\n<ol>\n<li>Go to <strong>Dashboard \u2192 Class Option<\/strong>.<\/li>\n<li>Type your class name (e.g. <code>hero<\/code>, saves as <code>ccaop_hero<\/code>).<\/li>\n<li>Select <strong>Page \/ Post \/ Custom Post<\/strong>, then pick the exact target.<\/li>\n<li>Click <strong>Save<\/strong>. Visit the selected view and inspect <code>&lt;body&gt;<\/code>\u2014you\u2019ll see your class.<\/li>\n<\/ol>\n\n<h3>\u26a1 Features<\/h3>\n\n<ul>\n<li>Ready to use\u2014no coding needed<\/li>\n<li>Auto-prefixed classes to avoid collisions<\/li>\n<li>Page \/ Post \/ CPT (archive, single, specific item) targets<\/li>\n<li>WooCommerce Shop, Cart, Checkout, My Account support<\/li>\n<li>Rule list with delete action<\/li>\n<li>Lightweight &amp; fast, theme-agnostic<\/li>\n<li>Works with cached sites (no dynamic output buffering)<\/li>\n<\/ul>\n\n<h3>WooCommerce Notes<\/h3>\n\n<p>If you select the <strong>Shop<\/strong> page under <em>Page<\/em>, the plugin detects it as the <strong>product archive<\/strong> and adds your class on Shop views correctly.<br \/>\nSimilarly, <strong>Cart<\/strong>, <strong>Checkout<\/strong> (including endpoints like order-pay, order-received) and <strong>My Account<\/strong> are handled.<\/p>\n\n<!--section=installation-->\n<h4>Minimum Requirements<\/h4>\n\n<ul>\n<li>WordPress 5.8 or greater<\/li>\n<li>PHP 7.2 or greater<\/li>\n<li>MySQL 5.0 or greater<\/li>\n<\/ul>\n\n<h4>Automatic Installation<\/h4>\n\n<ol>\n<li>In your WordPress dashboard, go to <strong>Plugins \u2192 Add New<\/strong>.<\/li>\n<li>Search for <strong>Custom Class Add On Page<\/strong>.<\/li>\n<li>Click <strong>Install Now<\/strong> and then <strong>Activate<\/strong>.<br \/>\nYou\u2019ll be redirected to the settings page.<\/li>\n<\/ol>\n\n<h4>Manual Installation<\/h4>\n\n<ol>\n<li>Upload the plugin folder to <code>\/wp-content\/plugins\/<\/code>.<\/li>\n<li>Activate the plugin from <strong>Plugins<\/strong> in your dashboard.<\/li>\n<li>Go to <strong>Class Option<\/strong> in the admin menu.<\/li>\n<\/ol>\n\n<h4>Updating<\/h4>\n\n<p>Automatic updates should work seamlessly. As always, back up your site before updating.<\/p>\n\n<!--section=faq-->\n<dl>\n<dt id='will%20this%20change%20my%20site%E2%80%99s%20html%20structure%3F'><h3>Will this change my site\u2019s HTML structure?<\/h3><\/dt>\n<dd><p>No. It only appends your custom class to the <code>&lt;body&gt;<\/code> element via WordPress\u2019s <code>body_class<\/code> filter.<\/p><\/dd>\n<dt id='can%20i%20add%20multiple%20rules%3F'><h3>Can I add multiple rules?<\/h3><\/dt>\n<dd><p>Yes. Add as many mappings (class \u2192 location) as you need. Each shows up in the table where you can delete them later.<\/p><\/dd>\n<dt id='why%20can%E2%80%99t%20i%20see%20the%20blog%20%28posts%29%20page%20under%20%E2%80%9Cpage%E2%80%9D%3F'><h3>Why can\u2019t I see the Blog (Posts) page under \u201cPage\u201d?<\/h3><\/dt>\n<dd><p>By design, the Blog page is managed under <strong>Post \u2192 Blog page<\/strong> to avoid confusion with static pages.<\/p><\/dd>\n<dt id='does%20it%20support%20woocommerce%20pages%3F'><h3>Does it support WooCommerce pages?<\/h3><\/dt>\n<dd><p>Yes\u2014Shop (product archive), Cart, Checkout (and its endpoints), and My Account are supported.<\/p><\/dd>\n<dt id='will%20my%20class%20be%20exactly%20what%20i%20type%3F'><h3>Will my class be exactly what I type?<\/h3><\/dt>\n<dd><p>Your input is sanitized and auto-prefixed with <code>ccaop_<\/code> (e.g. <code>container<\/code> \u2192 <code>ccaop_container<\/code>) to keep it safe and unique.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>1.0.0<\/h4>\n\n<ul>\n<li>Initial release: add custom classes to Pages, Posts, and CPTs; WooCommerce-aware; rule list; activation redirect.<\/li>\n<\/ul>","raw_excerpt":"Add safely-prefixed custom  classes to Pages, Posts, CPTs, and WooCommerce views\u2014no theme edits required.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/254881","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=254881"}],"author":[{"embeddable":true,"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/syedkamruzzaman"}],"wp:attachment":[{"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=254881"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=254881"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=254881"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=254881"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=254881"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=254881"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}