After reading this tutorial, you will be able to implement WordPress CSS customization easily. The methods to edit CSS may vary from one theme to another. Therefore the techniques described include editing code using the Additional CSS option, editing the code from the Theme Editor and using plugins.
All instructions explained in this tutorial include screenshots, making it easy for all users to follow them.
Important: This is not a CSS coding tutorial but a tutorial showing you how to add custom CSS in WordPress. The tutorial is directed to users with a basic idea of CSS programming, although in the last section, you can find a plugin that allows you to edit CSS in a visual way.
Editing CSS from the WordPress customization screen (Additional CSS):
The first method explained in this tutorial is the most conventional: Editing WordPress CSS from the Additional CSS panel shown in the customization screen.
When editing the CSS using this technique, your edition will remain even after updating your theme without the need of a child theme (Yet, using a child theme is always recommended). Of course, this edition will be removed if you change your theme.
To begin, login to your WordPress dashboard and on the left menu, move your mouse cursor over Appearance and press the Customize option as shown in the screenshot below (Appearance>Customize).
Once in the customization screen with a live preview of your site, scroll down the left menu to find the Additional CSS button and press it.
You will see an empty box where you can type your code; you can edit your site CSS.
Once you finish editing your CSS, press the Publish button to apply changes.
How to edit CSS from the WordPress dashboard:
You also can edit your CSS by modifying the .css files through the theme editor.
When using this technique, it is better to use a child theme and save a backup of your files.
To begin, login to your WordPress dashboard and on the left menu, move your mouse pointer over Appearance and then press Theme File Editor as shown in the following image (Appearance>Theme File Editor).
On the right column (Theme Files) find the Css file you want to edit. Some themes contain a file named custom.css; if your theme includes this file, that’s where you need to place your custom css code. Otherwise, edit the available CSS file according to your need.
Once edited, remember to press the Update File button to apply changes.
That’s how to edit your theme files from the dashboard; of course, you also can update the files through an FTP client like Filezilla.
How to edit WordPress CSS using a plugin:
This section shows how to edit your WordPress CSS using a plugin. In some cases, a theme may not support CSS by default; in such cases, a plugin may help.
To begin, login to your WordPress dashboard and on the left menu, move your mouse cursor over Appearance and then press the Add New option (Plugins>Add New).
In the plugins installation screen, use the search field and type “css editor”. When available plugins show up, press the Install Now button of the SiteOrigin CSS plugin, as shown in the screenshot below.
Once installed, press the Activate button to enable the plugin.
After installing the plugin, on the dashboard left menu, press Appearance and then press Custom CSS (Appearance>Custom CSS).
You will see an empty box where you can add your CSS code; after editing your CSS code, press the Save CSS button to apply changes.
That’s how you can edit your CSS code in WordPress using a plugin.
There are alternative plugins you can use:
- Blocks CSS: CSS Editor for Gutenberg Blocks: This plugin allows you to edit CSS blocks from the Gutenberg blocks editor.
- Visual CSS Style Editor: This plugin allows you to add your custom CSS without coding. You can edit elements visually by clicking them, including colors, sizes, positions, fonts, etc.
- Simple CSS: This CSS editor includes a live preview in the customizer. You can apply custom CSS to specific posts or pages through a metabox.
- Advanced CSS Editor: This plugin allows you to add different custom CSS codes for different devices (Computer, mobile and tablets) using the live customizer. The plugin also allows you to minify your CSS, optimizing it for search engines (SEO).
- Custom CSS Pro: This CSS editor also includes real-time live preview through a simple user interface.
- Simple Custom CSS and JS: This tutorial allows you to add both custom CSS and JS. This plugin doesn’t modify your theme files and allows you to export your code and keep it even after changing your theme.
You can install all plugins mentioned above by typing their name on the search field in the plugins installation screen.
Conclusion:
As you can see in the instructions above, editing or adding your custom WordPress CSS code is pretty simple and can be done by any user by following a few steps as described previously.
Users must consider when editing CSS that the custom code may affect the site performance; minifying the CSS code is always a good practice, and there are additional plugins to do it for you automatically.
Users can always remove the custom added CSS, but when it’s done through the dashboard theme edition option, it is recommended to make a backup of the file to edit.
Remember, a theme update may rewrite your changes, always try to find the custom.css file when present.
This article includes a list of plugins you can use; the market offers additional plugins which were not mentioned, and you can explore until finding the one fitting your needs.
Thank you very much for reading this article explaining how to edit WordPress CSS. I hope it was useful. Keep following LinuxHint for more WordPress tutorials and tips.
