Prelude Lite is ready for the next release of WordPress version 4.7 which includes a custom CSS editor built into the theme customizer by default. This is not part of the theme, but rather it’s part of WordPress. The idea behind this new feature is to allow the end-user to make simple custom CSS changes to their theme with a live preview. There are of course pro’s and con’s to this new feature, but I thought I would give you a bit of a preview.
I recently wrote an article about this new feature in WordPress 4.7, which I titled it as “Using the Custom CSS Editor in WordPress” and takes you through a basic tutorial of how it works, but also gives you some insight on alternative options to using this editor.
Getting Started
If you plan to use the built-in customizer, this tutorial will guide you through the steps.
- Go to Appearance >> Customize >> Additional CSS
- Before you begin adding code, you will see a notice. Once you cick in that window, the notice disappears so that you can begin adding your own CSS code:
- If you need Help, you can click on the black icon with the question mark in it:
Adding Custom Code
Let’s do an example customization to our Prelude Lite theme by changing the Site Title background and font.
When you have the Additional CSS tab open in the customizer, click in this box area to begin adding code:
When the notice disappears, we will type in (or paste in) code like this:
#site-branding {
background-color: #;
}
#site-title { font-family: fantasy; font-size: 2.5rem; font-weight: 500; line-height: 1; }
As you write your code and complete your code, you should see the right window pane give you a live preview of your custom changes as they happen.
NOTE Please note that the above example is only for demonstration purposes. This theme already has settings to change the colour and basic font management for this site title. But if you need more than what the theme offers, you can use the method above.
Alternatives to this Method of Custom CSS
I can understand the core team’s reasoning behind adding this capability to the customizer, but it’s not for everyone. If you are making small simple changes, then I can see it working out for you. However, if you need to get into anything more complex, or on a larger scale of custom CSS changes, then you should consider using either a plugin or a child theme.
- Plugin - For the plugin method, I recommend checking out “Simple Custom CSS” which is very popular and one I use on some of my theme demo sites.
- Jetpack Users - If you are a Jetpack user, then you are already set because it has it’s very own custom CSS feature that you can enable and use.
- Child Theme - If you plan to make a lot of CSS changes and/or perform other types of theme file modifications, then the child theme method is the best solution.