Updated: October 2019
There are no affiliate links on PagePipe.
WordPress released core version 4.7 in early December 2016. The default Twenty Seventeen theme included a new Customizer CSS editor. The new editor allows the removal of child themes and related plugins. This helps your site load a little faster – every little bit counts.
Before then, using child themes added custom code to WordPress themes. You edited CSS in a child theme with the WordPress file editor. It protected custom code from being overwritten by theme updates. Without a child theme, updating caused loss of code changes.
The custom CSS editor is in Appearance > Customize. Then select the “Additional CSS” option from the Customizer menu. That opens up a live CSS editor — no refreshing. Preview your changes immediately as you type. The live preview feature speeds up web work. There’s no waiting for page refreshes to view each change.
The “Additional CSS” menu keeps the edits safe in the confines of the Customizer. Your changes aren’t seen by users until you press Save and Publish. You can only edit CSS (not PHP or JS).
Child themes allow JS and PHP modification. So this doesn’t mean the extinction of child themes. But for most, it’s an opportunity to squeek out a little more speed. We do extreme performance optimization. We favor using the Customizer over a child theme.
“Additional CSS” is inlined before the closing head tag. This means no extra HTTP requests to fetch the custom CSS. Inlining CSS into HTML header removes CSS render-blocking. It also eliminates an extra HTTP request — both great things for speed. “Additional CSS” also does code syntax highlighting and error checking. Nice.
A child theme requires an extra HTTP request – unless combining by concatenation. Read more about minification plugins.
“If the external CSS resources are small, you can insert those directly into the HTML document, which is called inlining. Inlining small CSS in this way allows the browser to proceed with rendering the page.” – Google
From our past experiments with hand-coded sites, we agree with Google. This technique produces the fastest loading pages. Eliminating a child theme – by inlining custom CSS – produces a small boost in mobile site performance.
So, theme updates won’t wash away custom CSS – but that’s true only up to a point. If you change your theme (rather than just updating the theme), all the code added in the “Additional CSS” area disappears. Then it’ll all be gone.
Tom Usborne, the developer at GeneratePress, has a free plugin called “Simple CSS.” It’s a nice CSS editor – complete with code syntax highlighting to help you. It keeps all additional CSS safe from any theme updates and replacements. It works with all themes but Simple CSS is included as a standard feature with GeneratePress premium theme. With this plugin, you can also apply CSS only to one specific page. Navigate to your page or post in the Dashboard and look for the “Simple CSS” metabox.
NOTE: Don’t confuse this GeneratePress’ plugin offering with Simple Custom CSS plugin: 300,000+ active installs, 204k zip file, all-time downloads: 1,336,559, retention rate: 22 percent (average).
Active installs: 70,000+
Zip file size: 136k
And it also opens up a new area in the Customizer where you can view your CSS changes live. This code saved by the plugin doesn’t disappear if the theme is changed.
Site owners can stop using child themes. Opportunities for CSS customization is in WordPress core.
Need to preserve your WordPress functions.php file changes besides the style.css file, here’s our tip use:
Add code snippets to your site. No need to edit your theme’s functions.php file again!