When re-theming a website, there are two ways to make the change:
- Build the new theme behind the scenes, on a development copy of the site … get everything looking perfect, and then swap out the site, or
- Make the changes incrementally, page by page
I wanted to use option 2 for this redesign, since the refresh didn’t just involve changing some font and color settings – it requires rebuilding content on most of the website’s pages, and I wanted to start pushing some of the changes live as soon as possible.
To do this, I needed a way to be able to have pages (and other content types) exist in one of the following two states (and if you’re familiar with how WordPress works, you’ll understand why this is tricky!) …
- Show the current (soon-to-be-old) header and navigation, existing font and colors set in the theme settings, etc.
- Show the new header and navigation, and use a set of updated font and color settings that will be updated in the theme settings once the refresh is complete.
To do this, I created a separate author that I can assign refreshed pages to, one by one, as I update them.
Then for pages with this author assigned, I have:
- Overridden the header with the new one
- Loaded an additional CSS stylesheet with the style overrides from the redesign
- Displayed an announcement bar giving some context about why these pages look different
Currently about half way through these updates, using this system, and it’s working so far 🙂
PS. At WordCamp US 2025, I saw a demo of Theme Switcher Pro, a plugin that packages up a more streamlined version of this functionality. I’m looking forward to using this on the next WordPress site I have to re-theme.
