How to Add Custom CSS to Your WordPress Website
There sure are lots of interesting ways you can craft a specific look and feel for your website — if that is what you want. Sometimes, having a limited set of choices to pick from is much easier and, probably, more productive. If you’re using WordPress, the content management system that controls two-thirds of the CMS market, you can decide how involved you want to be in crafting the appearance of your website.
The first level of customization is usually the theme. For some, it might be the last level, too, because a good theme can easily create an appearance that’s appropriate for the website’s role. So if you’re in the restaurant business, for example, you can choose a food and restaurant theme for your website, and be done with it. Or, if you have an IT startup, you can settle for a great tech WordPress theme.
Each theme comes with some customization options. You might be able to pick the page layouts, for example, or the look of certain elements on the page. But if you’re looking to make some changes beyond those that come with the theme, using custom CSS would be a good way to go. Here are the three ways you can do it.
The most convenient way to add custom CSS to your website is to use the Customizer. Find the “Appearance” option in the dashboard menu. Hover over it, and you’ll see the “Customize” button. Click on it to get into the Customizer.
Once inside, you’ll have access to different customization options, depending on the theme and plugins you have installed. Right there at the bottom will be the “Additional CSS” option.
Click on it, and you’ll enter the area where you can add all the custom CSS you want. You’ll be able to see the effects of every alteration you make in real-time, but they won’t go live until you press the “publish” button.
The WYSIWYG nature of the Customizer might be its strongest benefit, but it’s not the only one. It comes with WordPress as a core feature, so you can use it right out of the box, without any additional tinkering with plugins. You’ll also get a pretty basic check to ensure your syntax is okay.
The problem with adding custom CSS this way is that it’s all tied to your theme. If you want to switch to another one, the custom CSS won’t follow. At least not on its own, that is — you can always copy it over to your new theme.
The Additional CSS field in the Customizer isn’t the only place where you can add custom CSS to your WordPress website. If you want to make lots of changes using hundreds of lines of code, your theme’s stylesheet might be a good place to do it.
Editing the stylesheet is an advanced operation, and not only because it implies that you understand CSS well enough to be able to add hundreds of lines of code when customizing the website. The main problem with editing the stylesheet is that every time you update your theme, the edits you’ve made will be deleted.
The way you go around this issue is by creating a child theme. The best way to understand what a WordPress child theme is would be to think about it as a layer you create over the regular — parent — theme. The changes you make to this layer will stay the same even when you update the parent theme.
So if you want to add custom CSS to your website, you need to create a child theme first. Then, navigate over to the Theme Editor, find the stylesheet.css file, and unleash your custom CSS code.
If you want to add custom CSS that will survive a complete change of the theme, for example, neither the Customizer nor the stylesheet editing will cut it. But you can still make changes you can carry over to a different theme using a custom CSS plugin such as the Simple Custom CSS plugin.
After you’ve downloaded and installed the Simple Custom CSS plugin, you’ll have two ways to access it. To get to the plugin’s administration screen, you can navigate to the appearance option of the main menu, and then choose Custom CSS from the submenu. You can add the custom CSS in the window, and click on the “Update Custom CSS” button to save the changes.
It’s possible to use Simple Custom CSS from the Customizer, too. After you navigate to the Customizer — Appearance > Customize — click on the “Simple Custom CSS” tab and you’ll get to the plugin’s customizer section. There, you’ll see the preview of all the changes you make before saving them.
Let’s Wrap It Up!
One of the best things about WordPress is how much freedom it gives you when it comes to customization of your website. But if you’re not able to find every single customization option you need among the many themes you can download and install, you don’t have to worry. You can make the changes you need by adding custom CSS. With three different methods you can use to do it, you’re bound to find one that’s as convenient as you need it to be.
