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

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. 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.