This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

How to Add Custom CSS in WordPress Themes

Published on March 7, 2018 - Content Updated on December 8, 2021

5 Min Read
wordpress custom css

The theme is the backbone of a WordPress website. There are thousands of WordPress themes available on the internet, both free and premium. You can use any theme to build your website which suits your business or interest. These WordPress themes are built on W3C standards which allow developers to customize the CSS. Makers of these themes are also available on forums to give you support when it comes to customization. They are active in updating the themes on the community suggestions and feedback.

Why do You Want to Edit CSS?

You choose the colors, font-families, font-sizes, background and many other things of your interest. Sometimes, your client demands the changes in theme. These changes include alignment settings, width, and height of the page, and headers and footers. In short, you make these changes to give your website a neat look.

You can edit the CSS directly from your WordPress administrator (WP Admin) account. Alternatively, you can do it by using plugins. Let us check both the ways out.

Using WP Admin

Every theme must have a style.css file. With this method, you can inspect and make changes at Style.css of the theme.

What do you need to edit CSS?

You need a few of the important things to edit the CSS of your WordPress theme. These items are listed below:

  • Web browser
  • A text editor
  • Administration access to WordPress administration panel
  • Basic development knowledge
  • FTP (File Transfer Protocol)

Where you find CSS file?

Use your website admin account to access your WP Admin and then go to Appearance -> Editor. The first window appears to you is your style.css file. All the basic CSS to edit your WordPress theme is available there. Some heavy content themes contain other CSS files too. These files can be seen on the left hand side under the heading of templates on the same screen.

WP Admin Appearance

How to Customize CSS with UI?

With the new version of WordPress, you can also customize your styling through the Theme Customize option. This option can be found at Appearance -> Customize. Mouse over on your theme and go to the Live Preview option.

WP Admin

This customization is probably easy for the non-developers. Mostly all the themes allow you to customize this way, but those themes that won’t allow such customization have their own respective ways. You can see the access to change the following styling from the Customize option in the image below.

WP Admin Customize view

Using Plugins

This is a smart way of playing with CSS. Mostly people do not want to take the risk of editing the style.css, so they use third-party plugins to write their own CSS. This will help them in staying more secure with the main code of the theme as the default CSS will be there. If anything goes wrong, you just disable the plugin.

Lets discuss the plugins which can help you customize WordPress theme CSS.

1. Visual CSS Style Editor

This plugin has multiple features, including visual drag and drop. With the help of this plugin, you can see the changes before saving it. This is helpful in cases where you are not sure with the results. This will appear under the side menu as YellowPencil. You can find this plugin here for free.

This plugin lets you edit CSS styling live and from the editor settings you can also choose any specific page or apply changes to the entire site.

Visual CSS Style

While editing the CSS, you can see the changes being applied instantly which gives you a better idea of what will be the end result.

Visual style css builder

It also comes with a built-in editor where you can write your custom CSS code.

CSS editor

2. Simple Custom CSS

This plugin runs under an active author who have tested it with the latest versions of WordPress. The features of this plugin include a simple interface, beautiful code syntax and much more. You can find this plugin here.

Simple Custom CSS Plugin

3. SiteOrigin CSS

This plugin is developed for both advanced and beginner level developer, meaning it has a variety of tools that can be used as per your own level of experience. You can find this plugin here.

After installing and activating the plugin from your WP dashboard, navigate to Appearance and click on Custom CSS to open the plugin settings page.

siteorigin editor

This is a coding mode where you can write your custom CSS to customize your site. It also has an option for a visual editor, which can be launched by clicking on the eye icon located at top right.

siteorigin visual editor

Through visual editor; you can apply CSS in real time and see the end result instantly.

There are many other plugins available on internet and WordPress repository. I found these 3 plugins to be the best ones for editing your WordPress theme CSS. I hope you know that one plugin from these three is enough for you. You can share your favorite plugins which helped you to write custom CSS in the Comments section below.

Cloudways is the best WordPress cloud hosting you can get

All your CSS customization won’t impress if you have a WordPress hosting which provides you with poor performance. This is why I think you should check Cloudways out. Our VMAN optimization technology, based on Varnish, Memcached, Apache, and Nginx, provides you with 50% faster page load times. This means your customization will be served faster to your viewers.

Too good to be true? Well, start a free trial from the banner below and experience the fastest managed WordPress hosting experience on the planet.

Share your opinion in the comment section. COMMENT NOW

Share This Article

Customer Review at

“Beautifully optimized hosting for WordPress and Magento”

Arda Burak [Agency Owner]

Ibad Ur Rehman

Ibad Ur Rehman is a WordPress Community Manager at Cloudways. He likes to explore the latest open-source technologies and to interact with different communities. In his free time, he likes to read, watch a series or fly his favorite Cessna 172SP in X Plane 11 flight simulator.

×

Get Our Newsletter
Be the first to get the latest updates and tutorials.

Thankyou for Subscribing Us!

×

Webinar: How to Get 100% Scores on Core Web Vitals

Join Joe Williams & Aleksandar Savkovic on 29th of March, 2021.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!