How to Add Custom CSS to Your WordPress Website in Different Ways

WordPress offers some cool features to its users. Recently, one of our users asked us to modify the sidebar of their website, it was easy, but the problem occurred when the user didn’t find an editor option to edit the stylesheet.

Well, you should know that to alter the design of your website, you require custom CSS to override the existing design code in the WordPress theme.

Most of the people get confused when they don’t see the code editor, which might not be available because of some security reasons.

In this tutorial, you’re going to learn different ways to add custom CSS to your WordPress website. Everyone knows that WordPress offers its built-in customizer, but people neglect it.

Some web developers might believe in editing the core stylesheet file. Well, if you want to add custom CSS, you need to add it somewhere else than the original CSS file.

I will also explain the procedure to edit the main style.css file using cPanel.

Use the Built-in Customizer

WordPress never stops surprising its readers. If you play a little bit with the WordPress admin panel, you can quickly discover an option to add an additional CSS.

If not, follow these steps.

Step 1

Go to Appearance and click on the customize option.

How to Add Custom CSS to Your WordPress Website in Different Ways

Step 2

You can see many options to update your website’s settings, the best part is that you can see the home page of your site.

How to Add Custom CSS to Your WordPress Website in Different Ways

If you scroll down, you can see an option “Additional CSS.” Click to open.

Step 3

If you haven’t added any custom CSS before, you can see a message to give you an idea about CSS and how you can use it.

Close it and see a box to add your CSS to modify any specific element of your website. You can see the live demo of the code you add.

How to Add Custom CSS to Your WordPress Website in Different Ways

After your final touch, click Publish showing at the top-left corner. Your design gets saved.

Use a WordPress Plugin to Add Custom CSS

No doubt that plugins are the saviors of millions of WordPress users, it’s because non-techie people want something user-friendly, where they can copy and paste the code.

Follow the steps.

Step 1

Go to Plugins>>Add New and search forSimple Custom CSS plugin, once you find it, click Install and activate it.

How to Add Custom CSS to Your WordPress Website in Different Ways

Make sure; you clear the website and browser cache after plugin’s activation.

Step 2

After activating, go to Appearance>>Custom CSS, and you can see a box to add custom CSS on this page.

How to Add Custom CSS to Your WordPress Website in Different Ways

Paste the code you have copied and click on the Update Custom CSS button.

Isn’t that simple?

Congrats, you have learned two different ways to add Custom CSS from your WordPress admin panel. Now, you need to learn the cPanel method.

Use cPanel to Edit the Main CSS File

You may have already read an article on editing the stylesheet using cPanel. If not, keep an eye here.

To modify the design of a WordPress website, you need to edit the style.css file of its theme, and you should know where to locate it.

You need to open the file manager>>public_html>>wp-content>>themes>>theme name and search for style.css.

The location may vary depending on the WordPress theme you use. In most of the themes, you can find the style.css file in the main folder, but some web developers/designers prefer to have a different CSS folder.

How to Add Custom CSS to Your WordPress Website in Different Ways

Once you find the file, right-click to edit.

A new tab appears to you, where you can add your custom CSS.

NOTE: I hope you know what you’re doing.

It’s essential to backup your whole website and its database before making any changes.

Which Method is the Easiest One

Everyone has a different choice to accomplish the same task. Majority of people might choose to use the built-in WordPress customizer, but some might think about using a plugin.

Well, if you can accomplish something without a plugin, you should avoid using any.

It’s possible that you don’t have access to your WordPress admin panel, in such a situation, you require to access the stylesheet file using cPanel.

Conclusion

You should know that a small CSS alteration can rupture the layout of your whole website, it’s vital to understand before you do something.

I remember breaking my website by copying and pasting a CSS code. You should understand the CSS code, you’re going to use. Always have the backup.

Check out these top 3 WordPress hosting services:

HostArmada
$2.49 /mo
Starting price
Visit HostArmada
Rating based on expert review
  • User Friendly
    4.5
  • Support
    4.5
  • Features
    4.5
  • Reliability
    4.5
  • Pricing
    4.0
IONOS
$1.00 /mo
Starting price
Visit IONOS
Rating based on expert review
  • User Friendly
    4.5
  • Support
    4.0
  • Features
    4.5
  • Reliability
    4.5
  • Pricing
    4.3
Ultahost
$2.90 /mo
Starting price
Visit Ultahost
Rating based on expert review
  • User Friendly
    4.3
  • Support
    4.8
  • Features
    4.5
  • Reliability
    4.0
  • Pricing
    4.8

How to Disable PHP Execution to Improve Website's Security Using cPanel

This how-to guide will explain about restricting others from executing any malic
3 min read
Max Ostryzhko
Max Ostryzhko
Senior Web Developer, HostAdvice CTO

How to Add Google Fonts to Your WordPress Website Without a Plugin

This is a how-to guide consisting of the code editing of the WordPress website t
3 min read
Arvind Singh
Arvind Singh
Hosting Expert

How to Add Custom Code to Header and Footer Areas of a WordPress Website

The tutorial will have two methods of adding the custom code to the header and f
3 min read
Arvind Singh
Arvind Singh
Hosting Expert

How to Edit the CSS for your WordPress Site Using the cPanel Hosting Control Panel

As you know, the design of a WordPress website is controlled by
4 min read
Avi Ilinsky
Avi Ilinsky
Hosting Expert
HostAdvice.com provides professional web hosting reviews fully independent of any other entity. Our reviews are unbiased, honest, and apply the same evaluation standards to all those reviewed. While monetary compensation is received from a few of the companies listed on this site, compensation of services and products have no influence on the direction or conclusions of our reviews. Nor does the compensation influence our rankings for certain host companies. This compensation covers account purchasing costs, testing costs and royalties paid to reviewers.
Click to go to the top of the page
Go To Top