Put small style changes, such as colours, spacing and hidden elements, in the new Additional CSS box in the Customizer. Larger changes belong in a child theme, and every change should be written down.

A small box with a real job

WordPress 4.7 was released yesterday. Among its changes is a new section in the Customizer called Additional CSS: a box where style changes can be typed, previewed and saved.

CSS is the code that controls how a site looks: colours, fonts, spacing, what sits where. Most sites need a few small adjustments to their theme's choices.

Until now, those adjustments often went into the theme's own stylesheet, a file that every theme update replaces.

Which is why so many sites either lose their changes when the theme updates, or never update the theme at all.

Why theme files are the wrong place

Every theme lives on the server as a set of files. Updating swaps those files for the developer's new versions, so anything typed into them is lost.

Developers know this, so an edited theme tends to be left alone. The update notice sits in the dashboard for months.

Some of those skipped updates fix security problems or keep the theme working with newer versions of WordPress. A theme that cannot be updated slowly turns into a liability.

What belongs in the new box

The fourth needs care. Hiding something with CSS removes it from view, not from the page: it still loads, and hiding the wrong thing on small screens can take away something phone visitors needed.

How the box behaves

Changes appear in the Customizer's preview as they are typed, so the effect can be checked before anything is published.

What is saved is stored in the database, not in the theme's folder, so updating the theme leaves it untouched.

It is tied to the active theme, though. Switch to a different theme and the CSS stays behind with the old one, which is usually right, since it was written for that theme.

Changes too big for a box

The box is for style. It cannot move the phone number into the header, change what a template displays or add a feature.

Those belong in a child theme, which contains nothing but your alterations and relies on the original theme for everything else. The original then updates without touching them.

Code that adds something regardless of design, such as tracking for analytics, belongs in a small plugin, so that it survives even a change of theme.

A very long list of rules in the box is also a sign. If it runs to hundreds of lines, it is really a child theme that has not been made yet.

Moving existing changes out of the theme

A site with an edited theme can move to the new arrangement, but the edits have to be found first.

A developer can set the site's theme files beside an untouched download of the same release and list every difference.

Style changes go into the box, template changes into a child theme, and features into a plugin. Then the theme can update, on a copy of the site first, with the two versions compared page by page.

A worked example

A granola maker sells granola and muesli to grocery stores, and directly through a WordPress store built on a commercial theme three years ago.

Its first developer changed the theme's teal buttons to the brand's burnt orange, enlarged the ingredient lists on product pages and hid the author line on recipe posts, all inside the theme's stylesheet.

The theme's update notice had been showing for more than a year, because the web company maintaining the site knew an update would undo those changes. One of the skipped versions fixed a security problem.

This week the web company moved the fourteen lines of changes into the Additional CSS box on a copy of the site running 4.7, applied the theme update there, and compared every page with the live store.

Everything matched. The live store gets 4.7, the CSS and the theme update together in the first week of January, once the Christmas gift boxes have shipped.

Write down what was changed

CSS rules are terse, and a year later nobody remembers why a line exists. Add a short comment above each rule saying what it does and why.

Keep a simple change log alongside: the date, the change, who made it and where it lives, whether in the box, a child theme or a plugin.

The next developer, or the next redesign, then starts from a list instead of from guesswork.

The rest of 4.7

The release also brings Twenty Seventeen, a new default theme that can play a video in its header, and previews of PDF files in the media library.

For developers, it adds content endpoints to the built-in REST API, which let other applications read and update a site's content.

As a major version, it waits for someone to click update on most sites. On a busy shop in December, that click belongs on a copy first.

The counter-case

A custom theme built only for your site, which no outside developer will ever update, can safely hold changes in its own files, as long as each one is recorded.

A site whose theme or a plugin already offers a custom CSS option need not move everything this week. The rule is to keep style changes in one known place, not three.

And a redesign is not a job for the box at all. Everywhere else, small style changes go in Additional CSS, bigger ones in a child theme, and every change gets written down.

Before the next theme update

  1. Update a copy of the site to 4.7.
  2. List every change made inside theme files.
  3. Move style changes into Additional CSS.
  4. Put template changes in a child theme.
  5. Comment each rule with its purpose.
  6. Update the theme on the copy and compare.
  7. Update the live site in a quiet week.

Step two decides whether the rest can happen at all. Until someone knows which theme files were edited, every update is a gamble, and never updating starts to look like the safe choice.

Testing a change on a copy before customers meet it is the same discipline as in coupon codes that stack when they should not.

Frequently asked questions

What is the Additional CSS box?

A section of the Customizer, new in WordPress 4.7, where style changes can be typed, previewed and saved. The rules are kept in the database, out of reach of theme updates.

Why not edit the theme stylesheet?

Because updating the theme replaces its files, and anything typed into them disappears. Sites with edited themes often stop updating, which leaves security fixes uninstalled.

What changes belong in the box?

Colours, font sizes, spacing, hiding an unused element and small fixes for plugin clashes. Moving content or changing templates needs a child theme instead.

Does the CSS follow me to a new theme?

No. It is tied to the theme that was active when it was saved, which suits most sites, since those rules were written for that theme.

How do I move existing theme edits?

Have a developer compare the theme files with an untouched download to find every change, move each to the box, a child theme or a plugin, then update on a copy first.

Why write down every change?

Because CSS rules are terse and nobody remembers their purpose a year later. A comment on each rule and a simple change log save guesswork at the next update.

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.

Theme update waiting for months?

Tell us which theme you use. We will find the edits inside it and move them somewhere updates cannot reach.

Start a Conversation