Want to try editing WordPress CSS but don’t know where to start? Using CSS styles, you can edit the look of your website globally or on certain pages. Add colors, separate certain elements, design layouts, and fundamentally change the look of anything in your WordPress theme.
If you want to get more familiar with the WordPress development environment, or just want more control over how your site looks, you need to know how to add CSS in WordPress (and how to change what’s already there).
By editing your theme and including your own additional CSS, you will be able to optimize every visual element on your website. Today, we’ll take a closer look at it.
What is CSS editing?
CSS stands for Cascading Style Sheets and it is the most popular web language besides HTML. The two complement each other because CSS is used to style HTML elements. HTML provides the foundation for the look and feel of the website, while CSS is used to further style it.
But even if you’re not a web designer or developer, you can opt for a bit of CSS because you can use it to move or style elements on your site, or make small aesthetic changes to the theme to suit you better.
WordPress and CSS
In WordPress, CSS is a bit different. It is controlled by themes, which consist of template files, template tags, and of course CSS style sheets. While generated by your theme, all of them can be edited by you.
Template files split parts of your website into sections (such as header.php or archive.php), and template tags are used to call them and other content in the database. The files are actually mostly composed of PHP and HTML, but you can add CSS if needed.
What you really need is stylesheet or style.css. To change the look of your website, you need to know how to add and edit code in this file.
How to Customize Your WordPress Theme with CSS
If you want to customize the theme and use CSS to change the look of your website, you need to add your own code or edit the code you already have. There are many ways to add CSS without touching any theme files, but to change existing theme code, you must visit your website’s stylesheet.
When you make these changes, you should know one thing: any edits you make to style.css, functions.php, or other theme template files will be removed when your theme is updated. In general, you shouldn’t make changes to your site directly in the editor without using a child theme.
A style sheet is like a “list of instructions” for your website, styling it exactly and what to do with your CSS code. This is where you do a lot of editing, but we’ll also show you how to access other theme template files such as header.php and footer.php.
There are two ways to access a WordPress site’s stylesheets: through the WordPress dashboard or through an FTP client. We will introduce these two methods separately.
Is it inconvenient to do this yourself? Consider hiring a WordPress developer to handle that step for you.
Edit WordPress CSS in the Dashboard
The easiest and most convenient way to access CSS style sheets is in the WordPress dashboard. No need to install an FTP program or code editor. You can edit any file directly with built-in syntax highlighting and function documentation.
You should always back up your WordPress site before making any major edits to the core files. If you’re new to CSS, it’s easy to accidentally make mistakes that can ruin the look of your website, and it can be hard to figure out how to revert your changes.
Once the backup and subthemes are done, log in to your backend. You can find the editor by going to the menu and clicking Appearance > Theme Editor.
You should see a popup warning you not to edit these files directly. Don’t worry, just click “I understand”. Using child themes and backing up your site is just a warning before making any major changes. Follow these steps and you’re safe to edit.
Edit theme files directly
What if you don’t have access to the theme editor or prefer to work via FTP? It’s easier to use the backend editor, but some themes or plugins may disable it. If this is the case, you need to connect to your website via FTP.
FTP or File Transfer Protocol allows you to remotely access and modify a website’s files. The first thing you need to do is download FileZilla or any other FTP client.
Next, you should contact your host and ask for your FTP credentials (host, port and username/password, if applicable). If your host has dashboards, you can find them by logging in.
Once you have them, fire up an FTP client and enter that information. If it doesn’t work, try putting “sftp://” before the URL in the host part.
How to Add Custom CSS in WordPress
If you don’t want to edit the existing CSS code and just want to add your own styles, I highly recommend using one of the following methods: the WordPress customizer or using a dedicated plugin.
On the one hand, CSS code added through one of these methods is easier to access and use. If you want to modify it later, you don’t need to worry about putting the new CSS in the wrong place or forgetting where to add it.
Also, CSS added via one of these methods will not be lost when your theme is updated (although if you change the theme it may still disappear).
This means you don’t need to use a child theme, if something goes wrong all you have to do is remove the CSS you just added.
Note that you should still keep backups of your website, as some people have reported losing their CSS occasionally during major updates. However, this method is much more reliable than editing the theme files directly.
While you can add code to style.css and call it a day, if you don’t want to create child themes, make major edits to existing CSS in your theme, and possibly end up removing all the work, then it’s best to use additional CSS in the WordPress customizer options or install plugins.