Are you looking to add custom CSS to wordpress posts and pages? If you are not a pro-webmaster and are not comfortable using FTP for this exercise, there is a much easier alternative to add CSS to your wordpress site. This post will take you through the process on how to add custom CSS to your wordpress blog or site without tampering with or editing the theme files
Method 1: Use Theme Customizer to Add Custom CSS to WordPress
With WordPress 4.7, users are now able to add custom CSS from the WordPress admin area itself. This is quite simple and you should be able to see your changes instantly using the live preview option
Go to Themes » Customize page.
This will open up Launch theme customizer interface in WordPress
You will now be able to see your site’s or blog’s live preview instantly by utilizing the options which you will find on the left hand side pane. Go ahead and click on the tab named Additional CSS from the pane.
The tab will slide and you will see a simple box. This is where you will be adding your custom CSS snippet. Once you add a legitimate CSS rule, you will see the changes instantly via the site’s live preview pane.
You can add the custom CSS in this box to your satisfaction. In order for the website to show the changes post custom CSS addition, ensure that you click on the ‘Save & Activate’ button which you shall find at the top of the left pane.
Important Note: Any custom CSS which you will be adding via theme customizer will only be available for that specific theme.
If you want to add the custom CSS with other themes, you will then be required to copy and paste the custom CSS codes to the new theme by following the method explained above.
Method 2: Use a Plugin to add Custom CSS to WordPress
This is the most common method for those who are not using wordpress 4.7 or a later version
All you need to do is just install a plugin
- Install Simple Custom CSS plugin
- Activate the plugin.
Once activated, head over to Appearance » Custom CSS and add, amend or paste the custom CSS.
Just like the first method, ensure that you press the button named ‘Update Custom CSS’ to save your custom CSS.
Once done, you will be able to see the changes on the live website
Important Note: Unlike the first method, the advantage of adding custom CSS with this method is that the CSS snippet codes will be available in other themes even after you change your theme.
The 2 methods explained above are highly recommended for beginners. Webmasters, pro bloggers and advanced users can also explore the possibility of adding custom CSS directly by editing the code of their themes.
However, it is not recommended to add custom CSS snippets into the parent theme. If you do so, you will lose all the CSS changes you made if you update your wordpress theme, by mistake, without saving the custom changes.
The ideal way is to use a child theme but many beginner bloggers do not want to create a child theme since apart from adding CSS snippets, they do not have any other use for that child theme
We hope this article has been successful in explaining how to add custom CSS to wordpress. Feel free to let us know your queries, if any