The 4 places for adding custom CSS to WordPress sites — The Templace

Ok, so recently I wrote an article (it’s actually the previous one in the block at the bottom of this one) where I explained the 3 methods for adding Javascript code snippets to an Elementor site — though two of them also work with Elementorless, standard WordPress websites. This article today will be all about the stylish brother in the front-end family, CSS, you know the one that dictates how your website is going to look to your end users. And what you will learn today is where to add it on your site.

So, let’s get to it, shall we?

What is CSS?

Just like the last article, let’s define first what CSS is. So, if we go by Mozilla’s definition:

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.

Simple definition, couldn’t have worded it better myself. And what they say there is pretty much all you need to know: “how elements should be rendered on screen”. With this language, you have the ability to make a website responsive, add colors, change fonts, modify the layout, and in general fine-tune a website’s visual presentation.

CSS in WordPress

With the introduction taken care of, I have to point out that WordPress, even though it just started out as a blogging platform, has always had that development part in mind, which makes adding custom CSS easy. Right after or during the installation process of WordPress on your site, a process that is different depending on the hosting platform (sometimes it’s more user-friendly with your host taking you through it and other times it is you who is more in control having to look the application and installing it), you have to select a theme. This is where the files that make up your site live.

1. The traditional theme editor way

See, when you’re building a site the traditional way, you create a structure of files in your host like index.php, about.html, etc. These files are then referred by the browser in one way or another to display your content to your audience. In WordPress, you can access them by going to the Appearance tab on the left panel, then clicking Theme Editor.

When it comes to CSS, all themes usually have a file called style.css, stylesheet.css, or something like that. This is the one you’re after. It’ll look probably like this:

All the styles you want to add, classes, IDs or elements you want to target can be written there. Then, you’d have to click the blue “Update File” button.

An issue I have with this method is that, after updating the file, you also have to update the pages or posts where you want the change implemented in order to view it. So for instance, if you’re adding custom CSS to an element on the home page, you then have to open that page and click on the “Update” button. It’s a little bit annoying in my opinion having to update things twice so to speak, though you may not have a problem with that.

2. The advancement of WordPress

The good thing about WordPress is that it keeps on updating itself to stay with the new trends in web development and design. And with this, I’m not only talking about the themes and plugins, but the actual version of WordPress. That’s why sometimes when you log in, you see a message at the top saying something like “WordPress 5.7.2 is out. Update now!” — While some may find this thing of having to update everything tiring (more so with themes plugins that have new versions regularly), it is actually pretty good because the updates are usually intended to keep your site performing at the very top.

This whole updates thing that I’m talking about brings me to the version 4.7 of WordPress, an update which brought about the capability of editing CSS using the Customizer. If you closely at the image above, you will notice there is a message that reads:

There’s no need to change your CSS here — you can edit and live preview CSS changes in the built-in CSS editor.”

The last part of that message is also linked to the Additional CSS tab of the Customizer, which is for you guess it, adding custom css to WordPress. As I mentioned, you can access by clicking on the link or by going to Appearance > Theme Editor > Additional CSS. It’s your choice how you get there, but it looks something like this:

Before I move on, I do have to make the note that editing or adding custom CSS in either of these two places is heavily theme-reliant. What I mean by this if you decide to switch themes all of these CSS implementations will be deleted. So, if you’re dead set on making the theme change, it is very recommendable to save your CSS changes in a file on your computer or a folder of your host, so you can then place them back on should you need to.

3. Elementor’s Global CSS is the way

When Elementor first came into the fray, into the world of WordPress, it was just a simple page builder not unlike Siteorigin’s page builder, WPBakery/Visual Composer, Thrive Architect, and others. However, with time, the team has done a major share of upgrades to turn it into something more. One of the first big changes in my opinion was when they introduced forms. A lot of people then realized they wouldn’t have to install a form plugin unless they truly needed it.

Another huge upgrade was when they introduced the theme builder and the theme style settings. When this version was launched, using a theme — even those super popular like OceanWP, Astra, etc — actually became redundant when you had the chance to build each of the parts of one on your own. I even have an article which details the reasons for going with a lightweight theme like Hello.

Also, this version gave users the capability of adding custom CSS using Elementor’s own interface. By clicking the hamburger menu icon at the top of Elementor’s left panel, you can see a button that says Site Settings. Clicking on it will open a panel like the one you see in the following image:

At the bottom of it, you can see very clearly and similar to the Customizer a tab that says Custom CSS. There, you will have an editor to add your CSS code which is going to be applied to the entire site. The only difference with this method is that it isn’t theme-dependant. So, it doesn’t matter if you have the Hello theme installed and then you want to change to GeneratePress, the CSS rules you added via this method will stay there. It’s actually the one I regularly use to build my websites out.

4. Like always, there’s a plugin for that

And staying on the trend of not having your changes removed when you change or update the theme, adding custom CSS to WordPress via a plugin is also a thing. Obviously at the very core of it, Elementor is also a plugin, but with the powerhouse it has become, I consider it more than just a plugin. What I’m talking about here is specific plugins dedicated only for you to write CSS on them. The two most popular are:

• 4.1 — CSS Hero: This one is like a more visual CSS editor, as the CSS gets added to the site while you’re using it, but you don’t actually have to write a single line of code.
• 4.2 — Simple Custom CSS: This one is more traditional. With Simple Custom CSS, a new sub-tab is opened on your Appearance tab called Custom CSS. Clicking on it, will present a screen like the one you see below:

Final Words

That’s all for this article. I hope that you’ve learned the various methods for adding custom CSS to your website. And remember, if you’re not keen on doing so with one of the theme-based ways because you can’t say for sure that you will not change themes in the future, go with one of the dedicated plugins or write it all on Elementor’s Global CSS.

Originally published at https://thetemplace.com.