Want to know how to add custom CSS code to your WP website or blog? Lots of site owners pay a developer whenever they need code-based cosmetic tweaks to their projects. What they don’t realise is that CSS is much easier to implement than it looks. Even the raw novice can copy and paste CSS code snippets without any skills or experience.
What Is CSS–Exactly?
CSS stands for Cascading Style Sheets. It’s a stylesheet language used to modify WordPress site elements. For example, you can change the font family, text size and colour, etc., using CSS. The changes are immediate on posts and pages site-wide. CSS is also used to tweak page designs, layout, and more. You can also add code snippets directly to individual HTML files if you need to.
The most straightforward ways to create and apply new custom CSS in WordPress are:
- Add CSS via the Theme Customizer (beginner to advanced)
- Use a purpose CSS plugin (beginner to advanced)
#1 Add CSS via your theme customizer
One of the many impressive things about WordPress is its built-in Theme Customiser or editor. It’s accessible to all site owners with admin-level access.
Note: You will want to add new CSS code to the child theme if you’re using one. Read more on the importance of child themes here.
Log in to your WP Dashboard as Administrator.
Go to Appearance => Customize from the Dashboard side menu.
The left-side column displays your active theme.
Tip: You can also change which theme to customise by clicking the Change button and selecting another installed theme (see image).
Navigate to the last menu item and click Additional CSS.
A simple CSS input box slides into view. This is where you add your custom CSS rules. The site view on the right lets you preview the changes as you make them.
For this example, let’s change the H2 heading colour from the default black to green.
You can choose to view the changes as they’d appear on a Desktop Computer, Tablet, or Smartphone. Simply click the device preview button of choice under the CSS box.
Customising additional CSS here is a great way to develop your coding skills. You can’t break anything as nothing saves until you click the Publish button. Have fun.
Point to note: Customising CSS via Additional CSS only changes it for that particular theme. Opt for a CSS plugin instead if you want the changes to affect all themes (see next).
#2 Use a purpose CSS plugin
CSS plugins offer a simple, fast, and safe way for adding custom CSS to WordPress. There are several of these tools available. This guide uses the hugely popular Simple Custom CSS and JS By SilkyPress.com to demonstrate the procedure. All newly added CSS persists through theme changes, which is convenient for themes and vital for modifying plugins.
If you need help to install and activate plugins, please read this short plugin tutorial first.
Log in to your WordPress Admin Area.
Install and Activate the Simple Custom CSS and JS plugin.
Go to Custom CSS & JS => Add Custom CSS from the Dashboard side menu.
You’re now at the simple Add CSS Code screen where you can add a title for your new code (recommended). Under the title field is the CSS code box.
Type or paste your CSS code snippet into the box.
Let’s add a yellow background colour to the H1.
Note: There is no preview with the free plugin, only the Pro version. That means you must save the updated code first, then visit the live site to view the changes.
Click Publish to make the changes live.
WordPress displays a Code Updated message.
Open your site in a new tab to view the changes.
Here’s how our CSS tweak looks. Now all H1 headings on the site have a yellow background.
It’s easy to Edit, Delete (Trash), Purge from cache, and Deactivate your custom CSS code.
Go to Custom CSS & JS => All Custom Code from the Dashboard side menu.
Locate the code you want to change (this is why titles are important).
Hover the mouse over the title and click the relevant link.
Custom CSS & JS Pro Version
The free plugin offers a few additional settings that are worth checking on the Add CSS Code screen. Explore each option and don’t be afraid to experiment with new code. You can undo the changes as easily as you make them if necessary. The developers have saved the most powerful settings for the Pro version, of course. You can also view those from the Add CSS Code screen.
Tip: Visit W3Schools to learn more about CSS coding, or to expand your existing skills.