Add Custom CSS in Wordpress
Add Custom CSS to your Website
CSS stylesheets are a critical part of any website that affect the look and feel of the website as well as user experience. All the Wordpress themes have their own stylesheets. However, making changes to the original stylesheet is not recommended since it can break your website. You must instead add extra css to your website using other methods to make sure that your site functions as expected.
It is not difficult to add extra css to your website since the Wordpress customizer allows you to add CSS with ease which can override the settings in the theme stylesheet. There are also some plugins and website builders that allow other safer methods to add extra css to your website and change its look and feel according to your need.
CSS means Cascading Style Sheets. It has an important role in web design.You can use CSS to change the appearance or modify particular elements in various parts of your website. For example, you can change the default font for headings on your website by applying some extra css or if you need you can change the background color of the header or sidebar widget with extra css. If you are a new user, making changes via the FTP might be difficult for you but be assured that there are more ways to modify CSS.
There are mainly two easy ways to add custom css to your website. You can either make changes inside the existing stylesheet. However, this is not the recommended method since changes will be lost while making updates to your theme and it can also break your site. The other method is to add extra css to your website using either a plugin or through the customizer. You also have additional choices if you are using a page builder or a theme with a full site editor. However, in this post, we will discuss how to use additional CSS on your website to customize its look using the customizer or a plugin for inserting codes.
Add Custom CSS with Customizer
The customizer in Wordpress is an excellent tool for stylizing your website and customize various parts of it. In most of the popular Wordpress themes, there are additional features to customize the size, color and overall look of parts like header, footer and sidebars that you will not need to add your own CSS. If you are using Astra (free or Pro) or the GeneratePress theme, they are loaded with features to make your task easier and you can easily customize each and every part of your website. However, the need for additional CSS may still arise and that’s why you have the option for additional CSS in the customizer so that you can make customizations according to your need.
Diagnose and Recover from a Drop in Website Traffic/Impressions
To add custom CSS, you will need to go to Appearance > Customizer in Wordpress dashboard. At the bottom inside the customizer, you will find settings for additional CSS. Click on it and then add the additional CSS inside the box. Save and publish the changes by clicking on Publish. Now, go to the front end if the changes are showing. Clear all website cache if changes do not reflect at the front end. This is how you can easily add custom css to your website using the customizer.
Disable Author & Date Archives in Wordpress
Add Custom CSS with a Plugin
If you do not want to make changes inside your theme, you can instead use a plugin to make CSS modifications. When you add extra CSS using the customizer, the changes apply to only the theme and will be lost when you change the theme. However, there are some changes like @font face rules or other similar font related changes that do not depend on a particular theme. Such changes can also be applied using a plugin and will stay in place even when you change the theme.
The WP Code lite plugin allows you to add code snippets including html, CSS, JS and PHP to your website and apply them sitewide or on specific pages. You can also use the CSS hero plugin to make sitewide CSS changes.
Install WP Code Lite on your Wordpress website and then start adding snippets. Add a custom snippet and then select CSS snippet for the snippet type. Add the snippet inside the box and save. You can apply the snippet site wide and it will remain there even if you change the theme.
.png)
CSS hero is an advanced CSS plugin for Wordpress that you can manage to change the look of your website and play with CSS just as you need. The plugin is equipped with several advanced features and can be purchased for $29. If you want a free option, wp code lite would be enough. However, with CSS Hero, you can make changes by just highlighting an area of the website.
.png)
Conclusion:
Hope this article helped you learn how to add extra css to your website. You can add it manually to your website using the customizer or using a plugin. Adding CSS can be essential in several scenarios. However, you must avoid editing the stylesheets directly and instead use either the customizer or a plugin to edit CSS. You have two excellent options in the form of wp code lite and the CSS Hero plugin. With CSS hero you have additional flexibility since even if you do not know the css class of the element you are trying to change, it will not stop you. CSS Hero will automatically highlight the CSS class of the element you are trying to edit and allow you to make changes easily.
Suggested Reading:
Remove Proudly Powered by Wordpress from Footer
Manage Comments in Wordpress with WP CLI
How to Disable Default Wordpress Sitemap