Will You Still Need a Child Theme With WordPress 4.7?

WordPress 4.7 is slated to arrive in early December 2016. While a lot of new features will roll out with the latest version of WordPress — the new Twenty Seventeen default theme, thumbnail previews for PDF uploads, and more — it’s the custom CSS editor added to the WordPress Customizer that caught my eye.

The question this new feature raises is this: can WordPress users stop using child themes now that CSS customization is built right into the WordPress core?

I took WordPress 4.7 beta release 3 for a spin and tried out the CSS editor so that I could answer this question. I’m happy to report back that the answer is, maybe.

To get the full scoop, read on. I’ll explain the purpose child themes serve, show you how the CSS editor built into Customizer performs, and help you decide if WordPress 4.7 is the version that will finally let you stop worrying about using a child theme.

Let’s get to it.

Why is Using a Child Theme Recommended?

Anyone who knows anything about WordPress development recommends using a child theme if you plan to tinker with your WordPress theme, and we’re no exception:

Child themes allow you to add custom code to a WordPress theme while simultaneously protecting that custom code from being overwritten the next time your theme is updated. If you don’t use a child theme but modify your theme files directly instead, then the next time you update the theme all of your changes will be lost.

So, how does the custom CSS editor in WordPress 4.7 play into the equation?

As soon as you update to WordPress 4.7 you will have the option to add custom CSS to your WordPress website using the custom CSS editor in the WordPress Customizer. In theory, if you only use a child theme to edit CSS you could just do away with your child theme entirely.

However, before you run off with that idea, we need to check two things:

• The experience of editing CSS with the custom CSS editor in the WordPress Customizer must be as good or better than the experience of using a child theme.
• The way custom CSS is loaded must be at least as efficient as the way child theme CSS is loaded.

A quick walk through the custom CSS editor will help us answer both of these questions, so let’s do that now.

Using the Additional CSS Menu in the WordPress Customizer

The new custom CSS editor can be found by going to Appearance > Customize, and then selecting the Additional CSS option from the Customizer menu.

Clicking on the Additional CSS menu item opens up a new menu with a text area in which you can type custom CSS.

The custom CSS editor works quite nicely. Pressing tab creates an indent rather than jumping to the next field. So you can actually indent your CSS properly for easier reading. In addition, all CSS edits are rendered automatically. In other words, the Additional CSS feature is a live CSS editor — no refreshing, your changes are previewed immediately as you type them.

Additional CSS Menu: User Experience

So how does this user experience offered by the Additional CSS Customizer menu compare to the experience of using a child theme to edit CSS?

Frankly, there’s no comparison. The Additional CSS Customizer menu is a hands-down winner in due to three factors.

1. Using the custom CSS editor in the admin area is just easier.

Editing CSS in a child theme involves the use of an FTP client and local text editor or the file editor built into WordPress. Both of these options offer a far less polished experience.

2. Using the custom CSS editor is safer.

Editing a child theme often involves making edits to the live site. On the other hand, the Additional CSS menu keeps those edits safely in the confines of the Customizer so that your changes won’t be seen by users until you hit Save and Publish.

3. Using the custom CSS editor is faster.

The live preview feature built into the custom CSS editor will speed up your development work since you don’t have to wait for page refreshes to view the effect of each change.

It’s clear that the experience of using the Additional CSS menu in the WordPress Customizer is a vast improvement over using a child theme to add custom CSS, but what about the way the custom CSS is loaded?

Additional CSS Menu: Custom CSS Loading Mechanism

Suspecting that the custom CSS would simply be inlined in the head of the web page HTML, I added a comment to the custom CSS to make it easy to spot. Sure enough, when I viewed the page source code I found the custom CSS right where I expected to find it: inlined just before the closing head tag.

The fact that the custom CSS is added to the head of the website HTML has at least two implications:

• No additional HTTP requests are required to fetch the custom CSS. This is in contrast to CSS added to a child theme which does require an additional HTTP request unless the file is combined with other resources.
• The custom CSS will not be cached but will have to be downloaded, processed, and rendered by the browser on every page load.

What this means is that the method used to load the CSS added to the Additional CSS menu is ideal for relatively small amounts of CSS — a few dozen or even a hundred lines of CSS will load just fine this way. However, this method is not ideal if you’re going to be writing hundreds or thousands of lines of CSS to customize your theme.

Inlining CSS into the head of an HTML document is a double-edged sword.

1. It removes the CSS as a render-blocking resource and eliminates an extra HTTP request — both great things.
2. It increases the size of the HTML document and means that user browsers won’t cache the custom CSS — both not-so-great things.

If we’re talking about just a little CSS, then this arrangement is perfectly fine and may even produce a modest boost in overall site performance. However, if we’re talking about loads of CSS, then this method is not perfectly fine and should be avoided.

Who Can Stop Using a Child Theme With WordPress 4.7?

Let’s pull together everything we’ve learned to draw some conclusion.

Here’s the bottom line. Whether or not you can stop using a child theme when WordPress 4.7 rolls around depends on what you’re using child themes for. There are generally three types of child theme users, and only one of these three types of users will be able to stop using child themes when WordPress 4.7 rolls out.

1. The Developer: Keep Using a Child Theme

This type of user uses child themes to create custom page templates, implement custom functions, add JavaScript and jQuery, and write custom CSS. This sort of user will need to keep using a child theme since the custom CSS editor can’t be used to create page templates or write anything other than CSS.

2. The Website Builder: Keep Using a Child Theme

This type of user often uses one basic parent theme that they know quite well along with hundreds or thousands of lines of CSS and JavaScript to create a wide range of websites. This type of user will also need to keep using child themes. The custom CSS editor does not provide a way to add custom JavaScript, nor is the CSS loading mechanism the ideal way to load hundreds or thousands of lines of CSS.

3. The Theme Tweaker: Can Choose to Stop Using a Child Theme

This type of user writes a few dozen lines of code to make minor styling adjustments — a little padding here, a new font size there, a little margin over here, and so forth. This type of user is a perfect candidate to discontinue the use of child themes and use the new custom CSS editor to make minor styling adjustments.

Wrapping Up

When WordPress 4.7 arrives like an early Christmas present during the first week of December there will several new features worth checking out. Not least among these is the new Additional CSS menu added to the Customizer.

This new live CSS editor makes it easier than ever to add custom CSS to any WordPress website, and users who use child themes purely for minor CSS edits will be able to drop that practice and use this new core feature instead.

What do you think about the new Additional CSS menu in the customizer? Exciting new core feature or frivolous toy? Let us know what you think in the comments section below!

Tags:

• child themes
• wordpress 4.7