Themes

WordPress use custom CSS – Easy Way

Customize your website with CSS Sometimes you may find yourself needing to add Custom CSS in your WordPress site. Perhaps it’s because you’re following a tutorial on WPBeginner. If using FTP is too confusing, then there is an easier way to add CSS on your site. In this article, we will show you how to add custom …
Ninetheme

Customize your website with CSS

Sometimes you may find yourself needing to add Custom CSS in your WordPress site. Perhaps it’s because you’re following a tutorial on WPBeginner. If using FTP is too confusing, then there is an easier way to add CSS on your site. In this article, we will show you how to add custom CSS to your WordPress site without editing any theme files.

Video Tutorial

If you don’t like video tutorials or want to move at your own pace, then continue reading the instructions below.

Method 1: Adding Custom CSS Using Theme Customizer

Since WordPress 4.7, users can now add custom CSS directly from WordPress admin area. This is super-easy and you would be able to see your changes with a live preview instantly.

Head over to Admin  » Appearance  » Customize page.

wordpress customize css

This will launch the WordPress theme customizer interface.

You will see your site’s live preview with a bunch of options on the left pane. Click on the Additional CSS tab from the left pane.

wordpress addiotinal css in customizer

The tab will slide to show you a simple box where you can add your custom CSS. As soon as you add a valid CSS rule, you will be able to see it applied on your website’s live preview pane.

wordpress preview css in customizer

You can continue adding custom CSS code, until you are satisfied with how it looks on your site.

Don’t forget to click on the ‘Save & Publish’ button on the top when you are finished.

Note: Any custom CSS that you add using theme customizer is only available with that particular theme. If you would like to use it with other themes, then you will need to copy and paste it to your new theme using the same method.

Note: This article was taken from Wpbeginner site for the sake of our customers. 

Leave a Reply

Your email address will not be published. Required fields are marked *

Archives