Learn to Add Custom CSS to your WordPress Website

Learn to Add Custom CSS to your WordPress Website

If you’re a beginner who wants to add Custom CSS to the WordPress Website, perhaps this article is a good step-wise guide if you want to save time on watching all the video tutorials.

Adding Custom CSS gives a great touch to the whole look of the WordPress. It could be added by either using a theme customizer or a plugin without the need to edit any theme files.


1. Adding Custom CSS Using Theme Customizer

This is super easy as it comes with a live preview to view your changes.

Step 1: Head over to the Customize page under Themes.

Step 2: It will open a customizable user interface with a bunch of options on the left pane and a live preview.

Step 3: Now select the Additional CSS tab from the left pane.

Step 4: After clicking on the tab, a simple box will show up, just add a valid CSS rule inside the box For Instance,

Add h1 {color: green ;}

Now see the applied change through the live preview pane.

Step 5: Try adding more CSS code the same way.

Step 6: Finally, ‘Save & Publish’ it when you are finished.

Remember,

1. The changes applied will cover all the widget areas while it could be added on specified widgets as well after selection.

2. The changes will only be available for a particular theme. The same method could be used when applying on other themes


2. Adding Custom CSS Using a Plugin

This requires you to install a plugin who aren’t using WordPress 4.7 and onward.

Step 1: First install a Simple Custom CSS Plugin by clicking on the plugin file ‘wp-custom-css.zip’ under add new plugins area in WordPress.

Step 2: Now activate the plugin and go to the appearance menu. 

Step 3: Now click on the Custom CSS and add the desired custom CSS.

Step 4: Finally, press the ‘Update Custom CSS’ button to save it.

Remember,

1. This method is for beginners only as experienced users can add custom CSS directly to their themes.

2. This will apply to all the themes, unlike theme customizer.

One more method is to add custom CSS by using the CSS Hero plugin which enables the user to edit everything on the site without the need of writing a single line of code.

Conclusion

The two methods are highly useful for WP Beginners. However, implications may apply for using certain code to add custom CSS. An easier mode would be to switch to child theme mode as it is easily understandable but many users don’t prefer this mode.

Researcher and Content Writer at e-Syndicate Network. A constant learner. Learning and growing every day. Salman has over 5 years of experience in the fields of Digital Marketing, Content Writing, Brand and Business Development.