The perfect theme does not exist.
There are themes with few options to customize it, others with tons of options. But there will be always that particular string in that specific page that you need to make blue! Why? I don’t care, I love blue, so it must be blue!
What happens if you don’t know how to change it? You ask for support on a forum, on wordpress.org or on the theme author’s support desk.
Somebody gives you the code needed to make the tweak and says to add it in your custom CSS field or file… custom what?
Well, today you will learn what custom CSS is and how to use it in WordPress.
The legendary custom CSS
Since I have been a support technician for 2 years, I have sent a lot of custom CSS to customers to find that, many times, they don’t know what custom CSS is and where to add it.
A custom CSS is CSS code, few lines or many, needed to make a particular tweak in a specific scenario. Here is an example of a line of CSS code:
p a { color: #0000FF; } /* This code makes blue all the links inside paragraphs */
The CSS is a code, so it needs to be added in a file, named what-you-want.css.
How to use custom CSS in WordPress
There are three standard ways, and potentially infinite non-standard ways, to add custom CSS in WordPress themes.
I’m going to analyze the official ways first.
Use a child theme
This is the best option, always! I’m not going to explain here how to create a child theme, but you can find a lot of tutorials searching on Google, here is the official WordPress tutorial.
Once you have created your child theme, you now have its style.css file.
This file only has the child theme details, so you can add code anywhere after the details, include more files in it, or anything else you want to do.
Use a plugin
If you want, there are also some plugins to add custom CSS code. It works like the themes custom field, but you need to install a plugin, such as WooDojo.
You can find a tutorial about how to use WooDojo to add custom CSS here.
Edit: WooDojo has been retired, you can find other plugins on WordPress.org!
Add the custom CSS in style.css
Every theme comes with a style.css file bundled into it. In this file you will find the theme details, such as theme author, theme name, version, etc.
After the header, usually, there’s the theme CSS, that is the code that makes the them looks like you see it. Without this code, you will see a long list of text without any design.
The first option you have, is to add your custom CSS at the very end of this file.
Never add it at the start or in the middle, or on the first line after the second block of code, or anywhere. Always at the end, because you do not want your custom CSS to be overridden by the theme default CSS.
Non official: Use the custom CSS field
This is not an official way to add custom CSS, not all themes have this field.
If your does not have it, feel free to skip this section.
Usually theme developers add this field in their theme options to allow advanced users to tweak the theme and add customizations. Also, if you ask for support in their help desks and they send you some CSS code, they will probably ask you to add the code in the custom CSS field in the theme options.
Non official: Use the custom.css file
This is not an official way to add custom CSS, not all themes have this file.
If your theme does not have it, feel free to skip this section.
Some theme developers include a file named custom.css in their themes. For example, WooThemes does it.
You can use this file to add your own custom CSS and customizations, usually it is an empty file, or it only has some information about how to use it. Feel free to add your code anywhere in that file.
How to find the style.css file?
Ok, now you know where to add the custom CSS, but how do you find and edit the style.css or custom.css files?
You can do it the easy way or the hard way.
The easy way
Edit the style.css file directly from your admin dashboard. Go to Appearance > Editor. You will see a list of files on the right side of the page. You will find the style files at the end of this list.
In this screenshot you can see an example using the theme Mystile which has both style.css and custom.css files.
Just click on the file name and a text editor will open. Write or paste your code in the file and save it.
The hard way
Using your favourite FTP client, eg. FileZilla, connect to your website and navigate to the folder wp-content/themes/your-theme-name/. Inside this folder you will find the style.css file.
Download it to your desktop, edit it adding custom CSS, and upload it again online overriding the existing file.
Conclusion
The last thing you have to do is to refresh the website and enjoy the new awesome style of your website.
If you do not see any difference, then probably it’s a cache issue, just refresh the page hitting CTRL+F5 (also more than once). If this does not fix it, the custom CSS is probably overridden by some other code for which I can’t help you unfortunately because I’m only a developer, not a clairvoyant, I can’t know which theme are you using or what code are you adding.
Feel free to write me if something is not clear, you can catch me on Twitter!
Happy tweaking!
P.S. I’d like to thank Maria for her great work on this post, and her kindness in helping me to improve my skills!
Leave a Reply