Something new is coming to WordPress 4.7 that is due to be released in just over a month from the writing of this article. It’s something that is making many people shrug with puzzlement and a question of…why are they doing this? Trust me, it even makes me wonder what is wrong with the priorities of the core WordPress development team. Sure there’s going to be several new things in 4.7, but why this…
Custom CSS Editor
The Custom CSS Editor is the item of focus here and is one of many new features they plan to incorporate into WordPress; related to the continuous growth of the “customizer” that seems to be getting everything added, including the kitchen sink. They keep adding more and more to it. Of course, this doesn’t mean that the customizer is getting better, it means that it’s getting more complicated and bloated with so many things many users don’t want. It adds more confusion, more complexity, more conflict with theme options and settings, all within a small side column of nested tabs (sections).
How does the team over at wordpress.org describe this new “amazing” feature?
Custom CSS with live previews – Ever needed to hide or tweak the look of something in your theme or from a plugin? Now you can do it with CSS and live preview the results while customizing your site. CSS can be a powerful tool; you may find that you won’t need the theme editor or child themes anymore.
In the upcoming WordPress 4.7, a new customizer section is being added is labeled “Additional CSS“.
If you click the tab, you are greeted with a blank window pane with a short description of what users can do.
Note When you click inside the pane and begin typing CSS code, or if you paste code, that description disappears.
Clicking the help icon (the question mark ?) displays a short explanation of what CSS is with a link to a help document on the Codex.
The Additional CSS pane is more like a text area than an editor.
WPTavern (a blog site dedicated to WordPress news) wrote an article about the new Custom CSS editor, which brings up some interesting points that users should be aware of.
- Unlike Jetpack’s Edit CSS module, the editor in the customizer lacks line numbers, colored text, and other conveniences.
- Changes are theme specific and are not global — although this is acceptable because custom CSS changes usually refers to a theme being used. However, if you add CSS for plugins, guess what, you will lose it if you change the theme; means installing a CSS plugin.
- The custom CSS pane area is also too small to manage larger or more complex CSS. It means that you will still need to install a custom CSS plugin - This is my addition to make people aware of.
Another article by WPTavern back on October 12 was about this very feature and how the days of creating child themes may be over. Attention getting I’m sure, but the reality of ending the use of child themes is premature at best because they normally are not used just for custom CSS changes, they are used for modifying theme files, or perhaps creating an actual child theme that established a completely different look and style to your website. The article also goes on to describing that before (and at present), to make custom CSS changes, you have to create a child theme.
Info The good news of course for anyone familiar with my themes from Shaped Pixels, I include a bonus child theme so that you just simply install it and you are ready to go!
I can understand what they are referring to because many people are usually told to create a child theme to make custom CSS changes to a theme. I would never suggest or recommend that, but rather give them the option to install a very popular plugin called “Simple Custom CSS” into their site and make all their CSS changes with this far better solution than what is being proposed and integrated into the WordPress core customizer. Even if you don’t use this plugin, anyone who uses Jetpack has a built-in Custom CSS feature to do just the same, and in some ways, better!
The article also mentions that this new custom CSS editor could lay the groundwork for possibly removing the Theme file editor from core at some point in the future. All I have to say to this is YIKES!
Getting Ready for the New Theme called Twenty Seventeen
One important attribute for WordPress 4.7 is a new default theme called Twenty Seventeen. A much better theme compared to past themes, but with the advent release of WP 4.7 and it’s new Custom CSS Editor, you will be able to customize Twenty Seventeen and any other theme with this new customizer feature.
Let’s Customize Twenty Seventeen with the new Custom CSS Editor
Even though Twenty Seventeen is not officially out yet, I have it installed on my local test site. So let’s use this as a demonstration on how the Custom CSS Editor works by changing something. For example, let’s change the Site Title from the default white colour to a light blue.
- Go to Appearance >> Customize >> Additional CSS
- In the field, we will add the code from the theme that styles the site title and then we will change the colour using HEX colour values. In our case, the colour we will use is #c6d5e2
- When you make changes in this pane with custom CSS, you will see the preview window change with what you do.
- Click on the “Save & Publish” button at the top.
This is the result of our custom CSS changes:
Is the Custom CSS Editor a Bad Feature to Have?
I will be honest that there may be some people who will like the Custom CSS Editor in the customizer and may find it useful for their needs if they only have a few modifications that they would like to do for their theme.
However, in my opinion, I believe it will become more of a hassle and simply get in the way of making custom CSS changes easier than what this method offers. There are other alternatives that are far better than what this gives you, for example:
- For CSS “only” changes, you will have greater flexibility with a plugin like “Simple Custom CSS“, a plugin that has over 300,000 installs, and 117 five-star ratings!
- For anyone who uses Jetpack, it has it’s own Custom CSS capability with great features like colour coding
- If you are using a Child Theme, not only can you use the child theme’s own stylesheet, you can modify other theme files.
For all my theme users and customers, I always introduce the theme with a list of recommended plugins, one being the Simple Custom CSS solution. I will still continue to recommend that one, Jetpack (if used) as the alternative, but if you are using a child theme, then I recommend using the stylesheet that comes with it.