Tweak your WP theme, how to add custom CSS
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!
Thank you for sharing your knowledge. I am relatively new to web design and am currently working on a site for a woman selling handmade soy candles.
I am using the Mystile theme and am having an issue with images. My concern is when you select “product” – select one of the items, it then goes to another page where the image of the produce is huge. I can’t figure out how to make it look less distorted.
One more item the client wants is a maple leave to appear beside the shopping cart.
Your help with this would be much appreciated. Again, thanks for sharing your knowledge it has helped me a lot.
Hi Marie,
you need to change the image settings in WooCommerce > Settings > Products > Display.
Saving changes does not automatically update all previously uploaded product imagery. To update old images WordPress needs to regenerate the thumbnails. There’s a great plugin which does just that – Regenerate Thumbnails.
https://wordpress.org/extend/plugins/regenerate-thumbnails/
If this still does not fix distorted images, you should contact the theme author and ask him for some CSS code for his theme.
Thank you for the shortcode for # of products displayed. I’ve been researching for how create multi product pages for a single link or a drop down that allows the customer to select the number of products to view. Is there anything in documentation? I did not find a source.
Hi Tina,
this is not something included in the core of WooCommerce, but i’m sure there are free plugins to add it on wordpress.org.
“needs to be added in a file, named what-you-want.css..”
really? This is bullshit. You can’t just name stylesheet anything you want. Why don’t you explain how the theme linked to this new stylesheet?
Hi Tim,
I didn’t explain it because I didn’t say to create a file. That part you mention is just explaining what CSS is and where usually you put it.
If you read through the article you will find this about the
custom.cssfile:Nice Sharing.
Nowadays, in modern themes, we don’t need to go to style.css pages but we can easily paste the css code in the themes custom css boxes which are given to us.
Hi Yasar,
Yeah I know. I personally don’t like to use the Custom CSS box because when you change theme you lose it with no way to get it back unless you switch theme again.
With files instead you still can access via FTP or with the WP Editor.
I’m regular to blogging and I actually appreciate your content. The article genuinely peaks my interest. I’m going to bookmark your web page and maintain checking for new details.