How to Override Aurora's Site Width on a Specific Page

Last updated: May 18, 2026

Aurora controls content width through a CSS custom property, --site-width, set globally from the Customizer. Because it is a CSS variable, you can override it on any specific page or template with a single declaration, without changing the global setting.

Overriding on a Specific Page

WordPress adds a body class to every page in the format page-id-{ID}. Use it to scope the override:

.page-id-42 {
    --site-width: 1000px;
}

Replace 42 with your page ID (found in the URL when editing the page in WP Admin) and 1000px with the width you want.

Overriding on a Page Template

If you use a custom page template, WordPress adds a body class based on the template filename. For a template called page-wide.php, the class is page-template-page-wide:

.page-template-page-wide {
    --site-width: 1600px;
}

Overriding on All Single Posts

.single-post {
    --site-width: 860px;
}

Overriding on Archive Pages

.archive {
    --site-width: 1400px;
}

How It Works

Aurora applies --site-width to the .site-container and .footer-container elements via max-width: min(var(--site-width), 100vw). Overriding the variable on a parent element (like body or a body class) cascades down to those elements automatically. No need to target them directly.

Add these rules to Appearance → Customize → Additional CSS or your child theme stylesheet. To change the global site width for all pages, use the Site Width setting in the Customizer instead.

#custom-css #advanced #code-required

Previous ← How to Disable Aurora’s Drop Cap on Specific Posts

Next How to Add a Custom Body Class Based on Category →

How to Override Aurora’s Site Width on a Specific Page

Overriding on a Specific Page

Overriding on a Page Template

Overriding on All Single Posts

Overriding on Archive Pages

How It Works

Make your blog stand out

Getting Started with Elementor

Aurora WP Theme: Every Feature, Layout, and Option Explained

The best WordPress theme for blogs: Aurora