How to Add Custom CSS to Your WordPress Site: 3 Methods Explored
There’s more than one way to add custom CSS to your WordPress site. You’ll see how in this article.
In this Weekend WordPress, I’ll explain the strengths and weaknesses of three different methods so you can decide which suits you best, and let you get on with customizing your site.
Continue reading, or jump ahead using these links:
- Finding the Design Elements You Want to Customize
- How WordPress and CSS Work Together
- Method #1: Editing Your Theme’s style.css File
- Method #2: Using a Child Theme to Edit CSS
- Method #3: Using a Plugin to Edit CSS
Finding the Design Elements You Want to Customize
Once you’ve isolated a part of your theme that you’d like to change (for example, the post title), you’ll need to determine the CSS properties applied to it so that you can make the appropriate changes. Fortunately, that process isn’t complicated.
CSS uses selectors to determine which design declarations to apply to a specific part of your website. Usually, this is done by specifying a “class” for the specific element. However, CSS can also be used to define the layout for an entire element (for example, the “<body>” tag) or an element based on its ID.
Fortunately, popular browsers allow you to see which selectors and which declarations are applied to an element on the page with just a few clicks. In Google Chrome, for example, you simply highlight a specific portion of the document and then right-click, as shown below.
Select Inspect Element from the drop-down that appears and you’ll see the design information in the window on the right. You can see an example of that below.
Those items highlighted in red show you the specific design descriptors that apply to the text you had highlighted. For example, the “font-size” element tells you that the font displayed in that highlighted text is sized at 13 pixels (“13px”). The descriptors are surrounded in curly braces by the selectors. The name of the relevant style sheet file is displayed just to the right of the selectors.
Once you’re armed with all of that information, modifying the design is easy. For example, if you want to change the font from 13px to 14px, you simply search your style sheet file, displayed just to the right for those selectors (“#plugin-info .block-content”) and change the “13px” to “14px.”
You can do the same thing in Firefox, just highlight a specific portion of the page, right-click on it, and then select Inspect Element from the menu that appears.
How WordPress and CSS Work Together
It’s a given that no two WordPress themes are created equal. So, keep in mind that your WordPress theme might not comply 100% with what you read in the following sections.
That said, it’s more than likely that the CSS used to present your WordPress site is located in a file called style.css. This is a common name for a stylesheet for any type of website, not just a WordPress website.
If you look at that file, you’ll find that it includes comprehensive stylistic ‘instructions’ for your theme. It’s beyond the scope of this tutorial to cover CSS syntax in complete detail, but if you want to delve deeper into it, we recommend you start with W3Schools’ course here.
With that out of the way, let’s move on to the aforementioned three methods for editing CSS!
Method #1: Editing Your Theme’s style.css File
There are two ways to access your theme’s style.css file.
One way is to do so from your WordPress administration dashboard. On the left-hand navigation bar, highlight the Appearance option. A fly-out menu should display several more options. At the bottom of that menu, you’ll see the Editor option. Click on that.
Once you’re on the Editor page, you’ll see a list of files on a vertical bar on the right-hand side of the page. Scroll down that list of files. You’ll see style.css at the bottom of the page.
If you click on that Stylesheet option, the style.css file will be loaded and displayed in the middle of the screen. You can use that screen to edit the file to make changes to your site’s design, but there’s a better way to do it (more on this in a moment).
The other way to find the stylesheet is to browse through the operating system of your hosting provider and locate the file in the theme folder. The exact location will vary depending on your hosting provider. In the example shown below, the name of the website (in our case thecare) is a folder under the public_html folder. Since WordPress is installed for that site, you can see the wp-content folder under thecare. Underneath the wp-content folder is another folder called themes, which is where all of the WordPress themes are installed. Since that site uses a theme called Newsletter, the correct style.css is located in the newsletter-parent folder.
At this point, you might be asking yourself: “Why is there a newsletter-parent and a newsletter-child folder?” That’s a very good question, and it’s about to be answered.
Method #2: Using a Child Theme to Edit CSS
If you’ve downloaded an awesome theme and want to make some changes to it, you should do so with a child theme, as opposed to editing the main (or parent) theme.
Why? Because developers can often update themes for bug fixes and design changes. If you make changes to the main theme and then install an update, you’re going to overwrite your hard work.
On the other hand, if you use a child theme to make CSS changes, only the parent theme will be updated. All of your changes in the child theme will remain.
Some professional theme developers are aware of the importance of child themes and will include one for you. Then, you can just update that child theme as much as you want without worrying about parent theme updates overwriting your changes.
If you have a theme that doesn’t include a child theme, it’s easy to add one. You can find instructions to do that in our comprehensive guide to creating a child theme.
Method #3: Using a Plugin to Edit CSS
The most convenient way of editing your site’s CSS is arguably via a plugin.
One of the main advantages to using a plugin is similar to that of using a child theme. If you update the theme, your changes won’t be overridden because they’re stored separately from the theme’s files. The other advantage, of course, is that you won’t have to bother creating a child theme.
Here are a couple of great plugins to use for modifying CSS:
Simple Custom CSS
Simple Custom CSS is one of the most popular options. It’s been installed more than 100,000 times and has received a five-star rating.
Child Theme Configurator
Last, but certainly not least, is Child Theme Configurator. This is a solution that enables you to customize the layout of your website with a child theme.
The plugin also optimizes your design strategy. If you’ve worked with CSS for any length of time, you know that sometimes the overall structure of your stylesheets can get cumbersome. Child Theme Configurator assists you in that it properly allocates your stylesheets so for optimal performance.
Child Theme Configurator has been downloaded more than 40,000 times and enjoys a 4.8 star rating.
The bottom line is this: Whatever functionality you’re trying to create, it’s probably already been created by someone else who’s willing to provide it to you, either free of charge or for a reasonable fee. It might be best to save some time and just go with a solution that’s already been produced for you.
If you’re comfortable with coding, create a child theme and dig into style.css. But if you prefer to leave those well alone, however, there are plenty of plugins available, and chances are they’ll cater to your needs reasonably well.Tags: