by
3 Ways to Add Custom CSS to Your WordPress Site
By choosing WordPress as your website platform, you owe it to yourself to master a few basic skills. One of those skills is how to add custom CSS to your website.
Why master this skill? For as easy as WordPress makes it to customize your website’s design, there will come a time where you need to use CSS to make more precise changes.
Or, if you want to add new features to your site from the Code Snippets library, knowing exactly where to paste custom styles will greatly speed the process up.
This tutorial won’t teach you how to write CSS but will show you 3 different places to add custom styles. To learn more about writing CSS, do a Google search or browse the MD archives.
Recommended
1. Add Custom Styles to Your Child Theme’s style.css file
Due to the nature of CSS, things can get messy very quickly. That’s why I recommend you pick one place to store all of your CSS in order to keep things as simple as possible.
If you use a custom child theme on your site, consider writing your custom styles into its style.css file.
To keep the number of file requests (HTTP requests) on your site down and help your site load faster, keep all of your custom styles in this one file.
After all, it’s better to load one long CSS file then make your visitor’s web browser download dozens of stylesheets.
To add styles to your child theme’s stylesheet, follow one of the below steps:
- Connect to your site’s FTP server (see tutorial) and navigate to
/wp-content/themes/your-child-theme-name/style.css. - OR go to WP Admin > Appearance > Editor > style.css
BONUS: If you’re a Marketers Delight customer, you can get a head start by downloading the starter child theme from your account area.
2. Add Live Preview CSS to the Customizer
A fun way to add custom CSS to your site is from a relatively new feature in WordPress.
By going to WP Admin > Customizer > Additional CSS you can easily paste your styles into the left-hand panel.
The cool thing about this is that as you write your CSS, your site will update on the right to show you a live preview of your changes.
Once you’re happy with those changes, click the “Save” button to publish them on your site.
This approach is great if you like to see instant feedback and is conveniently located in your WordPress admin dashboard.
The Customizer prints the CSS as an inline style, meaning that instead of loading an extra file like your child theme, custom styles will print directly to your page’s source.
From a speed standpoint this is nice because your site isn’t tasked to load another file—your styles will read straight from the HTML document.
Apart from the potential sloppiness of printing inline CSS to the <head>, inline styles can be harder to overwrite from a CSS file.
This can potentially cause a headache if you’re trying to adjust these styles in the future. However, if you make sure to keep all of your custom styles in this one place, you shouldn’t run into much trouble.
3. Use the Simple Custom CSS Plugin
The third and final way to add your own styles to your site is to install the free Simple Custom CSS plugin.
Think of this plugin as an enhanced version of the native WordPress Editor with syntax highlighting (makes the code easier to read) and other useful features.
You may not like the idea of installing another plugin to your site, but the author’s claim that this plugin will not impact your site’s performance.
Just like the Customizer, all of your custom styles are printed inline to your site’s <head>—so no need to load another file for your custom styles.
Closing Remarks
As I said at the beginning of this tutorial, keeping all of your custom styles in your site’s child theme is the best way to stay organized.
While this does add an extra HTTP request to your overall page load (you can compress with a cache plugin), it keeps all of your custom styles in the same place as your other custom code, like functions and templates.
If you can’t access your site’s FTP or a security plugin has disabled the WordPress Editor, the Additional CSS Customizer panel or the Simple CSS plugin are great alternatives.
How do you add custom styles to your site? Do you have any good resources you’ve used to learn CSS on your own? Share your thoughts in the comments, I’d love to hear from you!