Nov 25, 2019
How to Add Custom CSS to WordPress
Did you ever want to change certain aspects of your website’s appearance but simply didn’t know how? There is a solution – you can add custom CSS (Cascading Style Sheet) to your WordPress site!
In this article, we’ll be discussing all that you need to know about CSS and how to use it to modify your website’s overall look.
What is CSS?
CSS is a style sheet language that modifies the look of your website’s basic structure, written in HTML. CSS allows you to assign different properties – such as color, size, layout, and display – to the HTML tags.
You can tailor the default look of certain WordPress themes as well. So, if you want to create your desired design and look, you can add custom CSS to your WordPress site.
Adding WordPress Custom CSS via Plugins
One of the more easy ways to implement custom CSS to WordPress is through the use of plugins. There are plenty to choose from, so let us overview the most popular ones and see how they work. All of the tools we use in this guide can be easily installed via Plugins -> Add New section of your WordPress dashboard.
One of the most popular WordPress custom CSS plugins among the community, Simple Custom CSS lets you implement your own styles or override your current theme’s CSS. The values you set here will persist even if you change your theme.Once activated, the tool will be available via Appearance -> Custom CSS section. Using it is really simple – simply enter any values that you need in the editor and save the changes!
If you want to see the changes, all you need to do is to refresh your website.
WP Add Custom CSS is another great tool that you can use to implement WordPress custom CSS.Once installed, it will appear in its own dedicated section of your dashboard. Through it, you may apply CSS to the whole website.
The convenient part is that you’ll also have a CSS editor under each post. Thus, you can apply different CSS rules for individual posts if needed.Just like with the previous plugin, all of the changes can be viewed by refreshing your browser.
SiteOrigin CSS is a user-friendly and interactive tool to add WordPress custom CSS.Once installed, the tool will be available in the Appearance -> Custom CSS section.This plugin features a convenient editor interface where you can choose any part of your site and edit it using in-built tools or by adding code manually.
Adding WordPress Custom CSS with Theme Customizer
No matter what WordPress theme you use, you can tweak CSS with the built-in theme customizer. Navigate to Appearance -> Customize section of your dashboard, scroll down to the bottom of the page and click Additional CSS.This will open an in-built tool that will allow you to add any CSS code. It is easy to use and lets you view both mobile and tablet versions of your site.Congratulations! You now know how to apply custom CSS in WordPress without any plugins.
Adding WordPress Custom CSS Using a Child Theme
Another option is to create a WordPress child theme – it allows you to modify the parent theme without any risk of breaking your live site.
If you’re not sure what you want to do yet, you can test your custom CSS out on the child theme first. That way you’ll be allowed to experiment to your heart’s content.
Troubleshooting Common WordPress Custom CSS Issues
Sometimes, you might run into small hiccups when adding custom CSS to WordPress. Let’s quickly overview some of the most common problems and see how we can tackle them.
Changes Are Not Appearing
WordPress custom CSS may fail to appear due to cache.
If you’re using any caching plugin, there’s a good chance that some resources are cached and delivered from temporary storage to increase speed and lower resource usage. Simply clear your WordPress cache, or disable such plugins for a moment.
Last, but not least, some web-hosting providers, such as Hostinger, offer a server-side built-in caching to help your WordPress site perform better. You can disable it from the Cache Manager on your hPanel.
Misspelled CSS Syntax
Spelling errors are quite easy to overlook and can often prevent WordPress custom CSS from displaying properly. If you fail to see any changes from appearing and you’re sure that it’s not cache, using a CSS validator can be really useful. Simply paste your CSS and run the tool. It will show any mistakes or typos and even point to which line has them.
Too Many Choices
Sometimes it is possible to go a little overboard with WordPress custom CSS. By adding two or more references to a selector, it’s possible to cause a conflict.
This is a common occurrence when calling out a new stylesheet on top of an existing one. If you’re trying to change the H2 heading but nothing is happening, double-check the style sheet for the existing entries.
Out of Ideas
While it’s not a real issue, a lot of times the hardest part is figuring out what custom CSS you want to apply in WordPress. This can cause a huge headache, as you have to take a lot of elements into consideration.
Here are a few resources that can help you generate some fresh ideas:
- Ultimate Hostinger CSS Cheat Sheet
- CSS fundamentals by BitDegree
- Codeademy CSS tutorial
- CSS tutorials by W3Schools
CSS allows you to style your site content. So, adding custom CSS to WordPress is a great way to make your website unique and more eye-catching.
There’re three methods to do so:
- Making use of plugins
- Using a theme customizer
- Tweaking it through a child theme
Now you’re ready to tweak and tune your website’s design. Good luck!