No theme is perfect. Sometimes you may need to tweak the WordPress theme or its settings to make it perfect. Although you can directly edit a WordPress theme from Dashboard, this is not recommended as any small change or error may cause serious problems on the site. Even for web developers, using the online editors is bad practice in general, any incorrect PHP code can break our live WordPress site. Creating a child theme for WordPress is a workaround, but not an easy way. That’s the reason why so many WordPress themes have a CSS editor. In the absence of a Custom CSS functionality, you can also install a WordPress plugin if you like to edit CSS of the theme for your WordPress site. Check out following tutorial to add custom CSS to WordPress themes using a plugin. To extend the functionality of our WordPress site or theme, we may need to install all kinds of plugins. Too many plugins however take much of database space and thus slow down our sites. What’s worse, some of them may have security vulnerabilities. And now a new feature with WordPress 4.7 provides us a even better solution.
On December 6, 2016, WordPress 4.7 was released with a lot of new & exciting features. For example, we have an easier way to embed PDF into WordPress posts & pages now. Uploading PDFs will generate thumbnail images automatically. As a result you can more easily distinguish between all your documents. Meanwhile you can also add the PDF thumbnails previews and pictures into WordPress articles just like adding new media files to them.
How to add custom CSS to WordPress themes directly without plugins?
You can now add extra CSS to WordPress sites without the need of a child theme or plugin. You can add additional CSS to WordPress from the Customizer directly if your site is running on WordPress 4.7 or later. Log on your WordPress Dashboard as administrator, go to Appearance >> Customize >> Additional CSS. You can then customize CSS or add your own CSS in the box. Once you typed in the CSS code in the editing area, you will see how the appearance and layout of your site changes instantly without saving the code first. Thanks to the live preview of custom CSS, you can work quickly without any page refreshes or saving the changes in the middle. After the preview, you can make further changes until you are satisfied with the result. Finally hit the Save & Publish button to save the changes of the CSS code and make it effective on the production site.
Bonus tips about WordPress custom CSS & Additional CSS editing
Currently WordPress custom CSS or the Additional CSS feature allows you to customize the appearance and layout of your site with code. The changes are theme specific and are not global with the current version of WordPress at the time of writing this article. That’s to say, separate CSS will be saved for each of your WordPress themes, and you can not make use of the CSS changes for tweaks for WordPress plugins at this moment.
Nice Post. Thanks for sharing this tutorial how to add custom css to wordpress.