Native module · Custom CSS
SGEN's real Custom CSS editor, built into your site.
SGEN ships a real Custom CSS editor inside the platform: a dedicated Custom CSS screen under Appearance where you write site-wide style overrides in a syntax-highlighted, line-numbered code editor, give each snippet a title, then organize, activate, and prioritize them from a populated management list. Active snippets inject site-wide into every public page's head, theme-independent, so they survive a theme switch instead of vanishing with the active theme.
It is a native screen, not a plugin to install. A dedicated Custom CSS screen under Appearance, with a real code editor, a managed snippet list, a status workflow, and a priority cascade.
Illustrative admin UI. Demo snippets, not product telemetry.
Native module · Custom CSS
Write it once. It lives on a real screen.
Custom CSS is a site-wide override manager with four parts that work together: a real editor, an organized list, a cascade control, and live site-wide injection. Four jobs, one native screen.
A real editor, not a paste box
Write your CSS in a syntax-highlighted, line-numbered code editor with lint markers and a per-snippet Title. The editor is CodeMirror with a CSS mode, so selectors, properties, and values color as you type.
A managed snippet list
Every snippet lives in a populated, searchable list with Active, Inactive, and Trash status, live status counts, bulk actions, and per-snippet Author, Created, and Modified metadata. The list-management you already know from posts, applied to your CSS.
A priority cascade
Give each snippet a Priority from 1 to 20 so multiple stylesheets cascade in a controlled order, not one undifferentiated box. A base override at priority 1, a campaign tweak at priority 10, both live, both in order.
Goes live site-wide
Active snippets inject into every public page's head, theme-independent, so the same overrides apply across your whole site and survive a theme switch. Change a snippet's status and it goes live across every page.
ACTIVEINACTIVEDRAFTheadGlobalPriority 1 to 20
Native module · Custom CSS
A native screen that survives a theme switch.
SGEN ships custom CSS as a native screen in the platform, so it is theme-independent and there is nothing to install. Snippets store at the platform level, not inside the active theme, so switching themes never wipes your overrides. The screen is always present, with a real editor, a managed list, and a priority cascade, included on every plan. Here is how that compares, as of June 2026.
| As of June 2026 | WordPress "Additional CSS" | Code-snippet plugin (e.g. WPCode) | SGEN Custom CSS |
|---|---|---|---|
| What it is | A textbox in the theme Customizer | A separate plugin you install | A native screen in the platform |
| Survives a theme switch | No, tied to active theme | Yes, database-stored | Yes, platform-level, theme-independent |
| On modern block themes | Often gone or hidden | Yes | Always present |
| Code editor | Plain box | Varies | Syntax-highlighted CodeMirror |
| List, status, priority | None, one box | Plugin-dependent | List, Active / Inactive / Trash, Priority 1 to 20 |
| Cost | Free | Free tier, Basic from $49/yr | Included in the platform |
Theme-independent storageCodeMirror editorPriority cascade 1 to 20
Native module · Custom CSS
A real code editor, with a settings rail.
SGEN gives every snippet a real manage form, not a single paste box. A left main card with a Title field and a CodeMirror CSS editor, line-numbered, with a lint gutter and the placeholder /* Add your CSS here */. A right settings rail with a Status toggle, a Priority input from 1 to 20, and the primary submit. On an edit, the rail adds a Delete Permanently link and an audit block: Author, Created, and Modified.
One screen. A code editor, a status workflow, a cascade control, and audit metadata, set point-and-click.
Native module · Custom CSS
Activate, deactivate, trash, and bring it back.
SGEN runs every snippet through a real status workflow. Toggle a snippet off without deleting it, trash one and bring it back later, and find any snippet by title. Bulk activate, deactivate, or trash from Action For Selected, and a confirmation modal asks before any destructive action. The list-management you already know from posts, applied to your CSS.
Native module · Custom CSS
Cascade by priority. Live across every page.
Two real differentiators in one screen. Give each snippet a priority and multiple stylesheets cascade in a controlled order, a base override at priority 1, a campaign tweak at priority 10, both live, both in order. Active snippets inject into every public page's head, wrapped in a style block, theme-independent, via the platform's snippet printer. Custom CSS pairs with its Custom Codes, the site-wide HTML and scripts sibling, adjacent in the Appearance sidebar under a shared "Custom Code" umbrella, one for site-wide CSS, one for site-wide HTML and scripts.
Priority 1ACTIVE
Header spacing fix
Global · head
Priority 10ACTIVE
Brand button overrides
Global · head
Every public pagehead
1
2
3
4
5
6
7/* priority 1 */ style { .site-header { padding: 18px 0; } } /* priority 10 */ style { .btn-primary { background: var(--brand-red); } }
2
3
4
5
6
7/* priority 1 */ style { .site-header { padding: 18px 0; } } /* priority 10 */ style { .btn-primary { background: var(--brand-red); } }
Native module · Custom CSS
Frequently asked questions about Custom CSS
Is this the same as the WordPress Customizer's Additional CSS box? +
It fills the same need, site-wide custom CSS, but it is a native screen in the platform, not a textbox tied to your active theme. It does not vanish when you switch themes and it is always present, including on modern block themes. You get a real code editor, a snippet list, a status workflow, and a priority cascade instead of a single box.
Will my CSS survive a theme switch? +
Yes. Snippets are stored at the platform level, theme-independent, not in the active theme, so changing themes does not remove them. That platform-level storage is why your overrides keep applying through every theme switch.
Do I need a plugin to add custom CSS? +
No. Custom CSS is one of the 23 native modules, on every plan. There is nothing to find, vet, install, or license, you open the Custom CSS screen under Appearance and start writing.
Where does my custom CSS apply? +
Site-wide. Active snippets inject into every public page's head, so overrides apply across your whole site. For styling a single page or block, use SG Builder block styles instead, Custom CSS is the site-wide override manager.
How do priority and status work? +
Each snippet has a Status, Active, Inactive, or Trash, and a Priority from 1 to 20. Active snippets emit, inactive ones stay saved but do not emit, and trashed ones can be brought back. Priority controls the cascade order when multiple snippets are active.
Is there anything Custom CSS does NOT do? +
It is a site-wide CSS override manager, not a per-page styler and not a full theme editor. For single-page or single-block styling, use SG Builder block styles, and to edit your theme's own template files, use the Theme Editor. Custom CSS is for site-wide style overrides that load in the head.
Included in your plan
A real Custom CSS editor, native on every plan. From $39/mo.
Custom CSS is one of the 23 native modules included in every plan. From $39/mo, billed annually, or $47 monthly, and the free Sandbox lets you add, organize, and activate CSS snippets on unlimited staging sites before you pay anything.
From $39/mo, billed annually. $47 monthly. 2-week trial, cancel anytime. Every module included.