How to and How Not to Add Custom CSS to Your WordPress website

This subject is more programming oriented than most other articles on this site, however adding custom CSS to your WordPress website can make it stand our from the crowd. Because many WordPress websites use the same themes, it would be quite nice if you could add some unique experience to it. Or maybe you just don’t like a certain part of the theme your WordPress website is using and you want to remove or restyle it. Whatever your reason is for adding custom CSS to your WordPress website, after this article you’ll know exactly how to and also important, how not to add custom CSS to your WordPress website.

What is CSS anyway?

CSS stands for “Cascading Style Sheets” and is used to add all the style to a website. Every modern website uses CSS, because it would be very nonuser-friendly if they wouldn’t. Let me give you an example. A website without CSS looks like the image below.

image-no-css

As you can see this is not really eye-catching.

If you don’t know any CSS right now, then before you read this article I suggest you take a look at the free codecademy course, it is where I started and it’s very hands-on. And don’t worry, CSS is probably one of the easiest programming languages you can learn, so everyone should be able to learn at least the basics within a day or two.

So now we got that out of the way, let’s move on to how to apply custom CSS on your WordPress website.

Applying custom CSS styles to your WordPress website

With basic CSS knowledge and the right tools you can easily make your WordPress website look unique with CSS. Although there are many ways to add custom CSS to a WordPress website, I will show you the best way to do it (in my opinion). Some themes will have their own section where you can add custom CSS, if your theme has an options panel with a text area in which you can add custom CSS, I suggest you put your custom CSS code there. However assuming your theme doesn’t have this functionality I suggest you use a plugin to do the job, which will have the same outcome.

Adding custom CSS with a plugin

To add custom CSS with a plugin, go to the “Plugins -> Add New” page in your WordPress dashboard. Just type in “custom CSS”. At the top you’ll see two different plugins, one is for CSS and JS, if you want to add custom JS (JavaScript) you’re free to do so, but we’ll only be covering the CSS part in this tutorial.

custom-css

So we’re going to install the “WP Add Custom CSS” plugin for this tutorial.

Configure to the WP Add Custom CSS menu and simply fill in what you want to change. Let me give you an example. In this tutorial I’m using the Twenty Seventeen WordPress theme on a site for demo and tutorial purposes. The default color of the menu items of the Twenty Seventeen theme is black, I’m going to give it a blue color.

So to do this I first check how to select the menu items. I do this with the inspector tool which Google Chrome has, by clicking right mouse-button and “inspect”.

Here we see the color and the selector the menu items use for the Twenty Seventeen WordPress theme. Now I just copy the selector part and paste it into the text area of the custom CSS plugin we just installed. Now I’m going to change the color to blue. I’m always using the free Adobe color wheel to get the correct color codes. You can find this tool here.

I put in the color in the text area like in the image below and saved it.

And the result:

custom-css-blue

The color magically changed to blue. Of course this is just an example, you can change many things besides color, like margins and font sizes, basically anything style related.

Now you know how to add custom CSS to your WordPress website, I’ll also show you how not to add custom CSS to your WordPress website.

How Not to Add Custom CSS to Your WordPress Website

So there is also a bad way to add custom CSS to your WordPress website. Actually there are a couple of bad ways to do it and I will go over them in this section of the article. So the first way that I advise you not to add custom CSS with is via the “Appearence -> Editor” section in your WordPress dashboard. Yes the CSS wil take effect, but when your theme updates it will all be gone and you have to do it all over again. What you’re doing when adding custom CSS in the editor is modifying a file in the theme itself, so when the theme updates, the file will be the same (or different depending on what the theme author updated) as it was before you added your custom CSS. This also brings us to the next way of how not to add custom CSS .

The second way not to add CSS to your WordPress website is editing the style sheet by opening the style sheet file directly from within the theme folder of the theme that is currently active and adding your  CSS. The reason this is a bad way to add CSS is again, that the file will be overwritten when an update occurs. The update will erase all the changes you’ve made and you can start all over again.

So I hope this article informed you enough on how to and how not to add custom CSS to your WordPress website. If so, like this article and share it on social media so other WordPress users can benefit from it. If you know another way of adding custom CSS to your WordPress website, feel free to leave a comment below.

 

2017-09-17T20:37:44+00:00

About the Author:

Joshua
WordPress developer and founder of Hostsonny

Leave A Comment