← All posts

SCSS Partials in WordPress: Split and Reuse with Scripts Organizer

scripts organizer

One long stylesheet gets harder to maintain with every section you add, and every page loads all of it, even the parts it never uses. SCSS partials in Scripts Organizer let you split that file into small pieces (header, main, widget, footer) and choose which pieces each code block loads. You write each style once, reuse it wherever you need it, and give each page only the CSS it uses.

The starting point: one long SCSS file

Most sites start with one code block that holds everything. That works until you want a different header on one page and the same footer everywhere. Then you either copy code or add overrides.

Our example is a code block called Theme Home with the language set to SCSS and Create file checked. It holds four sections:

// theme

// Header
header#masthead {
    background: red;
}


// Main
#content{
    background-color: blue;
}


// Widget
aside.widget-area {
    background: yellow;
}


// Footer
.site-footer{
    background-color: orange;
}

Each comment already marks a section that could stand on its own. Those sections become our partials.

Create one SCSS partial per section

A partial is a named piece of SCSS that you write once and load into any code block. If you fix something in the partial, every block that loads it gets the fix.

  1. Go to the SCSS partials screen and click Add New. You get the Add New SCSS Partial screen.
  2. Enter a title (for example Header), paste the header section into the editor and click Publish.
  3. Do the same for Main, Widget and Footer.

The Main partial, for example, contains only this:

// Main
#content{
    background-color: blue;
}

Load partials in the right order

Partials are compiled in the order you list them. That matters as soon as partials depend on each other.

  1. Open the code block (Theme Home).
  2. Under SCSS Partials Manager, click Show. It is set to Hide by default.
  3. In Load partials, add Header, Main, Widget and Footer in that order.

Keep the order in mind. If you have a variables partial and a mixins partial, put the variables first, then the mixins, then the rest of your code. Anything you write in the code block's own editor is compiled after the partials, so it can use their variables and mixins.

The code block needs at least a comment to compile

If the code block's editor is completely empty, nothing gets compiled and your partials don't show up on the site. The compiler needs something in the main file, and a comment is enough. That's why our code block keeps just this:

// theme

Click Update and the partials compile into the stylesheet.

You also don't need to re-save the code block every time you change a partial. We changed the Footer partial to:

// Footer
.site-footer{
    background-color: black;
}

We saved the partial only, and the footer on the front end turned black. The partial's edit screen also lists the other SCSS Partials and the Code Blocks, so you can move between them quickly.

Load a set of partials only on the home page

Partials alone don't limit where CSS loads. The code block's conditions do that, so you can keep page-specific styles off every other page.

  1. In the Theme Home code block, set Trigger location to Conditions.
  2. Under Template, choose Page, Post.
  3. In Select Page/Post, choose Home.
  4. Click Update.

The styles now load on the home page. On the checkout page, none of them apply.

Reuse partials on another page with a different combination

This is where partials save you work. The checkout page needs its own header but the same main, widget and footer styles. You don't need to copy any code.

  1. Open (or create) a second code block, Theme Checkout, and target the checkout page with the same condition settings.
  2. Set SCSS Partials Manager to Show.
  3. In Load partials, add Main, Widget and Footer, and leave Header out.
  4. Add at least a comment in the editor. We first saved it with an empty editor and nothing changed, which is the compile rule from above.
  5. Click Update and reload the checkout page.

The checkout page now gets the blue main area and the shared styles, but not the red home page header. You can add styles that only the checkout page needs directly in this code block's editor. They compile after the partials.

Who is this for

  • WordPress developers with one large custom stylesheet who want to split it into files they can maintain and reuse.
  • Site builders who need different styles on different pages, like a separate header on checkout, without copying CSS between blocks.
  • Anyone who writes SCSS variables and mixins and needs them loaded in a fixed order before the rest of the code.

FAQ

What is an SCSS partial in Scripts Organizer? It's a named piece of SCSS that you create once under SCSS partials. Any SCSS code block can then load it. When you save a change to a partial, the code blocks that load it pick up the change without being re-saved.

Does the order of partials matter? Yes. Partials compile in the order they appear in Load partials. Put variables first, then mixins, then everything else. The code in the code block's own editor always comes after the partials.

Why don't my partials show up on the site? The code block's editor is probably empty. The compiler needs something in the main file to run, and a single comment like // theme is enough.

Can different pages load different partials? Yes. Create one code block per page (or per condition) and add only the partials that page needs. In the video, the home page loads Header, Main, Widget and Footer, and the checkout page loads only Main, Widget and Footer.

Get Scripts Organizer → dplugins.com

Related posts