Categories
WordPress

How To Edit CSS in WordPress (Without Any Plugins)

There are 2 primary ways of managing and editing CSS in WordPress without plugins. They are:

The Theme Editor in WordPress
The Theme Editor in WordPress

Using the Theme Editor, which lives under the main “Appearance” Menu in the WordPress Dashboard.

Additional CSS in WordPress
Additional CSS in WordPress

Utilizing Additional CSS, which also is navigable from the “Appearance” menu; however, it lives 1 level deeper. The full path to get there is — Appearance > Customize > Additional CSS.

Editing CSS in WordPress With Theme Editor

Most WordPress websites have themes, and therefore, each theme will have its own associated styling, code, design, layout, etc. In many cases, the CSS code will be tied to a file called style.css.

When you enter the theme editor, WordPress will display a list of files related to your theme on the right panel. “style.css” or similar, should be one of them. Also, note that you could have more than 1 CSS file, but for the most part, the “main” one would be style.css.

an overview of how a wordpress theme editor looks like
An overview of how a WordPress theme editor looks like, with a focus on CSS files

To add or tweak existing CSS code, go to any of those files, and make the adjustments you want. Once satisfied, save your changes by hitting the “Update File” button.

update file button in wordpress theme editor
Update File button in WordPress theme editor

Few Items To Consider and Know While Editing CSS Directly Within WP Theme Editor

Working with the Theme Editor means you’re making core code changes. In the wrong hands, or even accidentally making a mistake could mean that a site breaks. With that in mind, consider the following points — for when making amends to your CSS.

  • Know what you’re doing. And even if so, ensure you always take backups of your site and all of the files you plan to tinker.
  • If your theme updates, any CSS edits you made to any of the theme editor files would get erased.
  • There isn’t a perfect way to see if your code alterations yielded the desired results without saving them first, and then testing them on the site. Ideally, you should be able to preview the changes first before saving them — kind of like using Inspect Element.
  • The code improvements you make here will most likely, by default, be sitewide. Sure, you can go crazy with custom codes, but on a simplistic level, it would be sitewide. For example, if you change the color of your h1 to red, it will probably change it everywhere on your site, on all the URLs.
  • If possible, work with a child theme.

Because of a few drawbacks mentioned here, leveraging the Additional CSS method might be more within your expectations if you only intend to add code instead of modifying existing — as the name suggests.

Editing CSS in WordPress With Additional CSS

One of the most significant benefits of working with Additional CSS is that you can view what your code does first, before saving it — a con we observed in the previous method. There is a preview panel on the right that allows you to see your changes live. See the example screenshot below.

how additional css looks like in wordpress
How additional CSS looks like in WordPress. This is for the twenty twenty theme, but it should give context.

A second advantage it has over the first one is that your code remains, even if you update your theme. Although, if you pick another theme for your site, your Additional CSS will get removed, which is still better than having it removed with every theme update like the Theme Editor method.

You May Also Want to Check Out:

Final Say

As we know by now, getting to the places from where you can make CSS edits in WordPress isn’t difficult. The complexity arises because of having the technical know-how of what changes are to be made, backups, and other nuances.

Depending on how large the site is, in size (number of URLs), and or revenue, it might even make sense to hire a professional as that comes with some accountability of work.

Expert Resources for Additional Reading