How to add custom CSS to your WordPress website
You need to add custom CSS to your WordPress website, but simply didn’t know how? There is a solution even if you are a low-tech person!
Use the child theme to edit CSS
If you have downloaded a theme for your website and want some changes to it then you are advised to do it using a child theme. Many WordPress developers often update themes for design changes and bug fixes.
This is an easy yet effective way to add custom CSS to WordPress and using this method you will get a chance to see the changes you made as a preview.
With the updated version of WordPress, you can simply add custom CSS WordPress from the admin section.
On the other hand, some professional developers of themes are aware of the child theme’s importance so generally, they include the child theme with the main theme.
How to add custom CSS through the WordPress dashboard?
- Navigate to Appearance > Theme Editor.
- Select a child theme to edit, from the upper right corner.
- Select Stylesheet (style.css) to edit and paste the code at bottom of the file.
- Save the changes.
Use plugins to add custom CSS to WordPress
This is regarded to be the most convenient way to add custom CSS to WordPress websites.
Here are several plugins that will help you to add custom CSS to WordPress.
Simple Custom CSS and JS
It is a plug-in that is used to add custom CSS to WordPress that will meet the needs of the developers. This plug-in has several features like customized control, syntax highlighter, user-friendly interface, and many more.
Custom CSS and JavaScript
This is another useful WordPress plugin that allows the developer to use customized CSS to the entire website and also to individual elements of the web page. This plugin is available in many languages making it stand out from other plug-ins.
AccessPress Custom CSS
AccessPress Custom CSS enables the developer to add other custom code such as PHP, HTML, or just plain text. This plugin enables you to use customization on specific elements of your webpage such as widget areas, the title of the post or pages, the content of the post or pages, tags, and many other areas.
Post-Page specific custom CSS
If you are looking for a plugin that will enable you to preview your changes before publishing the website then this is the solution for you. This plug-in enables a custom CSS manager on the admin section to add custom CSS code snippets to the WordPress website.
This plugin offers several features such as live preview, user-friendly interface, uninstall process, and the main significant feature is that no configuration is needed to set up this plug-in
Child Theme Configurator plugin
If you feel exhausted with the manual way of creating a child theme in WordPress don’t worry, you are not alone. Especially customizing the parent theme by finding out individual CSS classes from parent style.css is more technical for a WordPress beginner. Fortunately, Child Theme Configurator is one plugin that helps to create and customize child themes in WordPress.
Editing CSS through WordPress Customizer
Instead of using the Theme Editor, try this. Log in to your WordPress backend and click Appearance > Customize to open the theme customization screen. You’ll see a live preview of your website, with options on the left to customize elements like the colors, menus, or other widgets.
At the very bottom of this menu, you should find the Additional CSS box.
Click to open it. You’ll be taken to a new screen with a code input box and a few instructions. The Additional CSS screen includes syntax highlighting, just like the Theme Editor, along with validation that lets you know if your code is wrong.
Any code you write automatically appears in the preview area on the right unless it has an error (though you can choose to publish it anyway).
When you’re done working, you can publish your code, schedule when it will take effect, or save it as a draft to work on later. You can even get a preview link to share with others.
As you can see, the Additional CSS page is in many ways more powerful than the Theme Editor, and much more suited to adding code than messing with core files.
The one downside is that way of adding custom CSS, should you switch themes, anything you’ve written will be erased. Make sure to back up your CSS before moving to a new theme or you might end up losing a lot of work.
Conclusions
If you are a beginner or low-tech person, use plugins. When you gain experience, you can use other methods to add custom CSS to your WordPress site. Though you can contact a website development agency to get professional WordPress development services.
