Are you looking to tweak the design of your site and add custom CSS with ease?
To be honest, adding custom CSS to WordPress isn’t everyone’s cup of tea, especially for beginners. WordPress makes it super easy to craft a professional website with popular WordPress themes and WordPress page builder plugins.
However, there can’t be a perfect website design in one shot; we need to keep trying to change certain design aspects to make the website more accessible and user-friendly.
If you’re a beginner, adding custom CSS can be tricky, as it’s not ideal for a beginner to edit the stylesheet of your WordPress theme without prior knowledge of coding. We would never suggest making changes in your site’s parent theme; instead, you can use the child theme to make changes in the custom CSS.
To reduce the hassle of adding custom CSS the right way, we have featured two easy and effective ways to help you add custom CSS to WordPress. Whether you have any prior coding knowledge or not, these listed methods will help you add custom CSS to WordPress without any hassles.
So let’s dive into the details.
WordPress Custom CSS- Two Easy & Effective Ways to Add Custom CSS in WordPress (Step by Step)
We’ll cover two different methods; in the first method, we’ll be using a WordPress plugin, and in the second method, we’ll add custom CSS using WordPress Customizer.
Let’s get started here with the first method.
1. Adding Custom CSS to WordPress Using Free Simple CSS Plugin
One of the easy and effective ways to add custom CSS is to use a WordPress plugin like Simple CSS. The Simple CSS is a robust free theme that enables you to add custom CSS to WordPress easily without any hassles. A simple CSS plugin was developed by the developers of a popular WordPress theme called GeneratePress.
This plugin gives you a robust admin editor along with a live preview editor to help add custom CSS in WordPress. What’s more, the plugin even allows you to add custom CSS to your specific WordPress posts and pages. This plugin adds an easy-to-use meta box to help you add custom CSS on your sites’ posts and pages.
Let’s have a look at some of the features of this plugin:
- Fully-featured admin CSS editor
- A robust CSS meta box to add CSS in specific posts/pages
- Comes with a dark and light themes editor
- It provides a real-time preview module that enables you to preview the changes you’re making.
Now let’s have a look at the steps to add custom CSS in WordPress.
Step #1: Install & Activate Simple CSS Plugin
First of all, you need to install and activate the Simple CSS plugin on your WordPress website. Navigate to your WordPress Dashboard >> Plugins >> Add New and then search for “Simple CSS”. Once you locate the plugin, click on the “Install Now” button.
After the installation of the plugin, make sure you activate it right there.
Step #2: Configure the Settings
Now you need to navigate to WordPress Dashboard >> Customize >> Simple CSS. Here you can easily add the custom CSS you want; the best part is that it will show a live preview of the changes you’re making.
However, if you want the full editor, navigate to Appearance >> Simple CSS, and it will open up the full editor. This editor’s code will be identical to the above one in the Simple CSS area of your WordPress customizer. You can add the custom CSS here and then click on the “Save CSS” button to save the changes you made.
The plugin also enables you to add custom CSS to your specific WordPress posts and pages on your website. To add custom CSS to any specific post/page, open the post/page in the WordPress editor; you will be able to see a “Simple CSS” below the WordPress editor.
You can add any custom CSS to the post and page you’re editing without any hassles. Once you’re done, click on the “Update” button to make the changes live.
This is how you can use the Simple CSS plugin to add custom CSS to your WordPress website easily.
2. Adding Custom CSS to WordPress Using the WordPress Customizer
WordPress 4.7 enables you to add custom CSS directly from the WordPress dashboard without using any third-party plugin. This method is super-convenient if you’re looking to add some custom CSS to your website.
To add custom CSS using WordPress Customizer, navigate to the WordPress Dashboard >> Appearance >> Customize. This will launch the WordPress Theme Customizer on your screen. Here you will be able to see the live preview and many options in the left panel of your screen. Now you need to click on the Additional CSS tab from the left pane.
Once you click on it, you will see a simple box where you can easily add custom CSS without any hassles. Right after adding a valid CSS, you will be able to see the preview on the right side of the screen. Here you can continue adding the custom CSS code until your goal is accomplished. Once you’re done, don’t forget to click on the “Save & Publish” button to make the changes live.
Note: Please keep one thing in mind: any custom CSS you add using the WordPress theme customizer will only be applicable to your current theme. If you want to use the same custom CSS with other themes, you need to copy and paste the custom CSS following the same steps listed above.
Conclusion:
So this is our step-by-step walkthrough to help you add custom CSS to your WordPress website. Adding custom CSS to your WordPress site can potentially help change your site’s design and style to make it more accessible and user friendly.
You can choose either of the methods listed above for adding custom CSS to WordPress. If you’re wanting to add a few custom CSS codes, go with the WordPress Theme Customizer method. Otherwise, you should go with the Simple CSS plugin to easily add custom CSS to your WordPress site without any hassles.