How to Add Custom CSS in WordPress (3 Ways)

Do you want to add some custom CSS to your WordPress website? In this post, we’re going to learn how to add custom CSS code in WordPress.

WordPress gives us the freedom to design our site the way we want. WordPress themes offer several customization options through which you can edit your site’s design. Again, you can use page builders to further customize each element of your site. Still, if you need to add custom CSS code to achieve more granular styling control, you can do it. You can add your custom CSS code to achieve the design you wanted.

If you have a design in mind and you want to apply it through CSS code, you can certainly do that. In this post, we’re going to see three methods through which you can add custom CSS code in your WordPress website. 

Why do you need to add custom CSS in WordPress

One might normally ask if page builders and themes give you methods through which you can customize your web pages, why would you want to add custom CSS codes. There are actually several reasons behind this. Before we dive into the real tutorial, let’s understand why many developers or WordPress users might want to add custom CSS codes in their site.

• Design tweaks without additional tools: Small changes like adjusting padding, changing font sizes, or modifying colors can be done quickly without needing another tool.
• Unique branding: Custom CSS helps match the website’s design perfectly to a brand’s colors, fonts, and overall style way beyond what most themes offer by default.
• Override theme defaults: Sometimes a theme’s settings don’t let you customize everything you want. Custom CSS lets you override those default styles exactly how you want.
• Quick fixes: Sometimes a design might look broken after a theme or plugin update. If you have a complex site with several plugins, it might be difficult to fix it normally. A little CSS code might help fix the issue.
• Animation and effects: There are many page builders that offer you some amazing animation effects. However, you can apply your own animation effects using custom CSS code. If there’s a particular animation or effect that you want to apply that your page builder isn’t providing you with, you can do it by adding your custom CSS code.
• Custom layout adjustments: Sometimes you want specific pages or sections to look a little different — custom CSS lets you target those specifically without needing a new template.
• Lightweight changes: Instead of installing a full plugin for something simple (like hiding an element), you can often solve it with one or two lines of CSS.

So as you can see, while you get a heap of customization options from your page builders, custom CSS code still has its uses.

How to add additional custom CSS in WordPress

Now let’s get to the main portion of this article, how to add custom CSS in WordPress. There are a few ways of adding additional CSS code in your WordPress website. We will talk about three of these methods.

Adding CSS code through theme Customizer

First up, you can add your CSS code through your theme customizer. Most of the popular WordPress themes give you the ability to add custom CSS code to your site. However, there might be some themes that might not give you this feature. In order to demonstrate this, we’re going to use the Blocksy theme and add a little CSS code to our WordPress website.

As you know Blocksy is quite a popular WordPress theme. So, let’s see how you can add your custom CSS code using the Blocksy theme customizer.
First, navigate to Appearance > Customize from the WordPress admin dashboard. Once the customizer opens up, scroll down and click on the “Additional CSS” tab.

This will open up a section where you can add your own CSS code. We are using a starter site, and it already has some CSS code added here. But we can also add our own code as well. For example, let’s take a look at the image on our site.

Now let’s add some box shadow to our image. To do this we are going to add the following CSS code:

.single .entry-content img {
    box-shadow: 0 0 10px rgba(0,0,0,2);
}

Don’t forget to publish the changes. After adding this code, we get the following result:

As you can see we have successfully added the box shadow on our image. This is how you can add your custom CSS code to your WordPress website.

👉 Also Learn: How To Change WordPress Login URL and Boost Security

Adding CSS code using a plugin

If you don’t want to add your CSS code through the theme customizer, then there’s another way. You can also use a plugin for this purpose. Many WordPress users prefer this method as the code in the theme customizer will go away as soon as you change the theme.

Again, if you’re using a theme that doesn’t provide the additional CSS feature, you can use a plugin for that. Take the Twenty Twenty-Five theme as an example. It uses the Full Site Editing and we did not find the usual additional CSS option like the other themes where it used to be. In this case we can use a plugin for easier workflow.

So, to do this, we’re first going to install the plugin. Navigate to Plugins > Add Plugin and search for the plugin called “Simple Custom CSS and JS”. Install and activate this plugin.

This plugin has over 600k active installations with very good ratings.

After you’ve installed and activated the plugin, it will be added to your WordPress admin dashboard. Click on it, then click on the “Add CSS Code” button to add CSS code.

The plugin allows you to choose the linking type of your file, where on the page you want to insert the code, where in the site you want this code, etc. There are some additional and advanced features that allow you to preview the changes introduced by your code, choose the URL where your code will be applied, minify the CSS codes, etc. For those advanced features, you need to get the pro version of the plugin.

Luckily for us, the free version is enough. So we want to apply the same box shadow effect to our blog images. First we are going to give a name to our code, basically explaining the purpose of the code, then we’re going to add the code and click on the “Publish” button. Let’s take a look at the example.

After adding this code, we checked if it had taken effect, and surely enough, it did. Now if you know how CSS works, you can easily use this plugin to add your own custom CSS code to your WordPress website.

👉 Video: How to Add Custom CSS in WordPress

Adding CSS code by editing the theme file editor

There’s another way to add CSS code to your WordPress website, but this is a bit risky. To do this, you have to access the theme file editor. This can be found in the Appearance > Theme File Editor from the WordPress admin dashboard area. Once you click on this option, it’s going to give you a heads up.

This is not the recommended way of adding CSS code to your site, especially if you don’t have experience with it. But it is possible to edit the style.css file from here and add in your own CSS code. Different themes have different layouts, the screenshot you see above is the theme file of the Blocksy Child theme. It looks simple enough, and might be easier to add the CSS code, but that might not be the case with other themes. So be careful when adding CSS code through the theme file editor.

Conclusion

Adding your own custom CSS to your WordPress website can have a great effect. If there’s a specific design that you have in your mind, and you achieve it through your own CSS code, then you certainly can do it. In this article we’ve shown you three methods of adding your own CSS code to your WordPress website. You can use any one of these methods, but be careful of the theme file editing process as it might break your site if done improperly.

So that brings our tutorial to an end. We hope that you managed to learn how to add custom CSS in WordPress. If you have any questions, you can comment down below and we will try our best to answer.