Skip to content

How to Add Custom CSS to Your WordPress Site with Ease

Custom CSS

We’ll show you how to add custom CSS to your WordPress site without altering any theme files in this article.

Method 1: Using Theme Customizer to Add Custom CSS

Users can now upload custom CSS directly from the WordPress admin area since WordPress 4.7. This is quite simple, and you’ll be able to see your changes in real time with a live preview.

To begin, navigate to the Customize page under Themes.

This will take you to the WordPress theme customizer.

On the left pane, you’ll get a live preview of your site along with a number of options. From the left pane, select the Additional CSS tab.

The tab will drop down to reveal a basic box in which you can enter your custom CSS. You can see a valid CSS rule in action on your website’s live preview pane as soon as you add it.You can keep adding custom CSS code until you’re happy with the way your site looks.

When you’re finished, remember to click the ‘Save & Publish’ button at the top.Note that any custom CSS you add to a theme using the theme customizer is only available with that theme. If you want to use it with different themes, simply copy and paste the code into your new theme using the same way.

Method 2: Using a Plugin to Add Custom CSS

Only the currently active theme’s custom CSS can be saved using the first method. You may need to copy and paste your own CSS to the new theme if you change the theme.

This solution is for you if you want your custom CSS to work independent of which WordPress theme you’re using.

The first step is to download and activate the Simple Custom CSS plugin. Simply navigate to Appearance ยป Custom CSS after activation and put down or paste your custom CSS.Remember to save your modifications by clicking the ‘Update Custom CSS’ button.

You can now see the modified CSS in action on your WordPress website.

Adding CSS to the theme vs. Using a Custom CSS Plugin

Beginners should use both of the strategies indicated above. Advanced users can also directly edit their themes’ CSS.

Adding custom CSS snippets to your parent theme, on the other hand, is not encouraged. If you update the theme without storing your custom changes, your CSS changes will be lost.

Using a child theme instead is the best option. Many beginners, on the other hand, do not wish to build a child theme. Aside from adding custom CSS, many newcomers have no idea how they’ll use the child theme.

You can keep your custom CSS separately from your theme by using a custom CSS plugin. This way, you can effortlessly swap themes while keeping your own CSS.

The CSS Hero plugin is another wonderful option to apply custom CSS to your WordPress site. Without writing a single line of code, you can alter practically every CSS style on your WordPress site with this fantastic plugin.