How to Add a Custom Body Class to Specific Pages Using Astra Pro

Want to apply unique CSS styles to specific pages on your WordPress site?
The cleanest way is to add a custom class to the <body> tag — so you can target those pages precisely with CSS.
By following the steps below, you’ll be able to add a custom body class to any page (or group of pages) using Astra Pro’s Custom Layouts feature — no coding required.

Overview

WordPress already adds some body classes automatically (like page-id-42), but sometimes you need a
clean, meaningful class like special-page that you control yourself.
Astra Pro’s Custom Layouts feature lets you inject a small JavaScript snippet into specific pages,
which adds your custom class to the body at load time.

Workflow:

[Astra Pro → Custom Layouts] → [JavaScript snippet] → [Injected via wp_head hook] → [Body class added on DOMContentLoaded]

Step 1. Open Custom Layouts in Astra Pro

1. Log in to your WordPress admin dashboard.
2. Go to Appearance → Astra Options.
3. Find the Custom Layouts module and click Settings.
4. Click Add New.

If you don’t see Custom Layouts, it may need to be enabled first.
Go to Appearance → Astra Options → Astra Addons and toggle Custom Layouts on.

Step 2. Configure the Custom Layout

You’ll now see a new post editor screen. Fill in the following:

1. Add a Title for your own reference (e.g., Body Class - Special Pages).
2. In the editor, click the Code tab and paste the following snippet:

<script>
document.addEventListener('DOMContentLoaded', function() {
    document.body.classList.add('special-page');
});
</script>

Replace special-page with whatever class name you want to use.

Step 3. Set the Hook Settings

Scroll down to find the Layout Settings panel and configure:

Layout → Hook
Action → wp_head
Priority → 10

Important: Even though the script is injected inside <head>,
it won’t run until the DOM is fully parsed — because we wrapped it in
document.addEventListener('DOMContentLoaded', ...).
This means document.body is guaranteed to exist when the class is added,
and it fires earlier than wp_footer, avoiding any potential flash of unstyled content.

Step 4. Set Display Conditions

Still in the Layout Settings panel, find Display On and select the pages
where you want the body class to appear.

You can choose from conditions like:

Specific Page — target one or more individual pages by name
All Pages — apply to every page on the site
Front Page — homepage only
Page Template — all pages using a specific template

You can add multiple pages at once in a single Custom Layout,
which is much more efficient than creating one layout per page.

Step 5. Publish

Once your hook settings and display conditions are set, click Publish in the top right corner.

Step 6. Verify It’s Working

Visit one of the pages you selected in Display On.
Right-click anywhere on the page and select Inspect (or press F12).
In the Elements tab, find the <body> tag.
Confirm your custom class appears in the class list:

<body class="home page-template-default ... special-page">

Note: Do not use View Page Source to verify —
that shows the raw HTML before JavaScript runs, so the class won’t appear there.
Always use Inspect Element to see the live DOM after JavaScript has executed.

Now Use It in Your CSS

You can now target those pages specifically in your CSS:

/* Only applies on pages with the special-page body class */
body.special-page .site-header {
    background-color: #f0f4ff;
}

body.special-page h1 {
    font-size: 2.5rem;
    color: #1a1a2e;
}

Add this to Appearance → Customize → Additional CSS or your child theme’s stylesheet.

Troubleshooting

Class not appearing? Make sure you’re checking with Inspect Element, not View Source.
Still not working? Clear your browser cache and any site caching plugins, then reload.
Using Cloudflare? Purge the Cloudflare cache for the page as well.
Wrong pages getting the class? Double-check your Display On conditions in the Custom Layout.

Conclusion

You now have a simple, reliable way to add a custom body class to specific WordPress pages
using Astra Pro — without touching functions.php or creating custom page templates.

Process Summary:
Custom Layouts → JavaScript snippet → wp_footer hook → Display conditions → Custom body class ✅

This approach is especially useful when you need to apply unique styles to a group of pages
without affecting the rest of your site. Clean, targeted, and easy to manage.