How To Use Customizer To Add Custom CSS Styles To WordPress

Sometimes you may find yourself needing to add Custom CSS to your WordPress site. You can use the CSS editor to customize the appearance of any WordPress.com site. It works by allowing you to add your own CSS styles, which allows you to override the default styles of your Theme. In this article, we will show you how to add custom CSS to your WordPress site without editing any theme files.

 

Adding Custom CSS Using Theme Customizer

Since WordPress 4.7, users can now add custom CSS directly from the WordPress admin area. This is really easy and you’ll be able to see your changes with a live preview instantly. First of all, head over to the “Themes » Customize” page. This will launch the WordPress theme customizer interface.

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

The tab will slide to display a simple box where you can add your own custom CSS. As soon as you add a valid CSS rule, you will be able to see it applied to your website’s live preview pane. You can continue adding as much custom CSS code as you want 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! Remember, any custom CSS that you add using the theme customizer is only available with that particular theme. If you would like to use it with another theme then you will need to copy and paste it into your new theme using the same method.

 

Adding Custom CSS Using A Plugin

Another method to add your own custom CSS to your site is to use a plugin. This is particularly useful for users who are not yet using WordPress 4.7 or later versions. The first thing you need to do is install and activate the Simple Custom CSS plugin. Upon activation simply go to “Appearance » Custom CSS” and write down or paste your custom CSS.

Don’t forget to press the ‘Update Custom CSS’ button to store your CSS. You can now view your website to see the custom CSS in action. An advantage of using this method is that your custom CSS will be available even when you change your theme.

If you found this guide helpful, follow us on Facebook and Twitter for the latest WordPress news, tips and walkthroughs.

 

Tagged

, , , ,