• Get In Touch
January 19, 2018

How To Use Customizer To Add Custom CSS Styles To WordPress

Using Wordpress? Get our lightening fast Wordpress Optimised Hosting.
Get Wordpress Hosting

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.

Using Wordpress? Get our lightening fast Wordpress Optimised Hosting.
Get Wordpress Hosting

Share this Article!

Related Posts

5 Website Hosting Solution Trends for 2022 and Beyond

5 Website Hosting Solution Trends for 2022 and Beyond

Looking for the right web hosting solution for your website can be an intimidating task. Options nowadays are more diversified than ever, and each year brings new developments in the web hosting market. If you have no clue of what to look out for, you can find yourself overwhelmed with the choices. Hence, you must […]

64 Content Marketing Statistics Demonstrating the Power of Content

64 Content Marketing Statistics Demonstrating the Power of Content

Content marketing continues to be one of the most valuable tools for today’s online businesses. With content, you can improve your chances of reaching your target audience, boost your search engine standing, and even unlock new opportunities for sales. The more content you produce, the more you can strengthen your domain authority, demonstrate your thought […]

53 User Experience Stats for 2022

53 User Experience Stats for 2022

User Experience (UX) is one of the most crucial factors to consider in web design. As the number of websites and applications in the world today continues to accelerate, businesses are under more pressure than ever to impress customers straight away. If a user visits your website and finds slow-loading pages, clunky navigation, or errors, […]

How to increase the memory limit in WordPress

How to increase the memory limit in WordPress

Do you need to increase the memory limit in WordPress? Getting an error about memory Exhausted? The memory limit is one of the most common WordPress errors as the default limit of memory in WordPress is only set to 64mb! But there’s good news! The Memory Exhausted error is one of the easiest to fix […]

All in One WordPress Migration Vulnerability

All in One WordPress Migration Vulnerability

A vulnerability has been discovered in the “All In One WordPress Migration” WordPress plugin. All versions earlier than, and including 6.97 contain a vulnerability which allows Cross-Site Scripting (XSS). With over 2 million active installations, this vulnerability has the potential to be high impact, however, this is lessened by the nature of the vulnerability, which […]