How to Add Custom CSS to WordPress (4 Methods)

Adding custom CSS to WordPress can be a fun and easy way to customize the look and feel of your website. In this article, we’ll show you how to add custom CSS to a WordPress website and how to use the same methods to edit CSS to customize your website. 

What is CSS?

CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation of a document written in a markup language. A style sheet is a collection of rules that tell a web browser how to display a document written in HTML or XML. In our case, WordPress is an HTML website.

CSS is used to style all HTML tags, including the document’s body, headings, paragraphs, and other pieces of text. CSS can also be used to style the display of table elements, grid elements, backgrounds, and images.

Why is CSS used in WordPress?

HTML is the building block of a webpage, but it’s too boring. To style HTML tags/elements, you have to use CSS. In WordPress, CSS use to control the visual presentation of the website. The CSS file defines the look and feel of the website, including the layout, colors, and fonts. CSS can also be used to add animation and interactivity to the website.

Add Additional CSS to the WordPress Theme Customizer

This method is the easiest way to add custom CSS to your WordPress website. As an added advantage, you will get syntax highlights and syntax error detection out of the box. 

1. Login to your WordPress admin dashboard.

2. Navigate to Appearance > Customizer. Launching the customizer will take 5 to 30 seconds, depending on your WordPress website performance.

Need a website performance test? Request a free audit

3. Click on the Additional CSS tab on your left-hand side. 

4. It is common to have CSS inside the “Additional CSS” field. I recommend you add custom CSS to the bottom of the field. Make sure to hit publish after the custom CSS update. 

Add custom CSS to the WordPress child theme

If you do not have a child theme, you have to create a WordPress child theme first. Do not edit the main or parent theme. 

You will get the same advantages as the previous method, plus syntax and error highlighting. However, you have to create a child theme first. 

Once you have successfully created the child theme, 

1. Navigate to Appearance > Theme Editor. 

2. Make sure that you have selected the correct children’s theme. By default, WordPress selects the styles.css file and loads it into the editor. If not, click on the styles.css file on your right-hand side. 

In our case, we are using the Kadence theme, so we have created a child theme called Kadence Child. 

3. There will be some CSS code, as shown above. Do not delete or remove any of that information if you don’t know what you are doing. Scroll down to the bottom and add the CSS lines to the bottom of the file. Make sure to hit update after the changes. 

Add WordPress Custom CSS using Plugins

If you’re only going to add a few lines of CSS, this method is a little excessive. However, most plugins provide extra functionality like conditional CSS rendering, support for shortcodes, and configurable locations (header, footer, content, etc.). You can also add additional JavaScript and HTML snippets. 

There are hundreds of plugins in the WordPress plugin repository. But some are just bloatware, and the authors don’t maintain them. So, what do we suggest? Our number one recommendation is Header Footer Code Manager. 

You will get so much control over your custom CSS code snippet. 

1. Log in to your WordPress dashboard and navigate to Plugins > Add plugin.

2. Search for the plugin called “Header Footer Code Manager.” Click “install” and then “activate” the plugin. 

3. You will see a new tab in your dashboard navigation called “HFCM.” Click “add new,” and you will see the following form to fill in.

In my case, I wanted this CSS snippet to appear on my cart and checkout pages. So, I have selected specific pages. Select the “Snippet Type” as CSS or select HTML and wrap your CSS code around a “style” tag. 

4. Save the changes and check your website front end. 

The other reliable plugins allow you to add custom CSS to your WordPress website.

1. Simple Custom CSS Plugin: This plugin is very lightweight. But, you will miss the extra configurations mentioned in Header Footer Code Manager.

2. Simple Custom CSS and JS: This plugin is similar to the Header Footer Code Manager. In addition to the previously discussed features, using the “Simple Custom CSS and JS” plugin, you can add CSS to your admin area and load your custom CSS as external files.

3. Woody code snippets: This plugin is overkill if you are looking to add some custom CSS to your website. Using this plugin, you can embed PHP code into your website in addition to CSS, HTML, and JavaScript. It has AD insertion support, syntax highlighting, and code revision. 

4. WPCode: This plugin has been installed over 1 million times. Like the “Woody Code Snippets” plugin, WPCode supports PHP code snippets. But, this plugin is too much for us in our use case. 

Add Custom CSS to the WordPress Header using PHP (functions.php)

Before I start, I want to mention that this method is for advanced users. If you don’t know anything about PHP, please use the other techniques that I have mentioned in this article.

1. You must have a child theme. Navigate to Appearance > Theme File Editor and select functions.php file. 

There might be some PHP code inside your child theme. Don’t panic 😅. Scroll down until you see the end of the file and add some new lines by hitting your enter key. 

2. We are going to use a WordPress action hook called wp_head. 

Copy and paste the following code to your functions.php file. 

3. Now, it’s time to add your CSS. Grap your CSS code and paste it between the start and end comments of the code. 

4. Click on Update File to save the changes. 

Conclusion

So, which WordPress custom CSS method should you use? If you are thinking about the most straightforward method, the WordPress theme customizer is the best option and works out of the box. If you want a logic-based solution, use a plugin to add your custom CSS. Last but not least, if you do not want to bloat your website with extra plugins, create a child theme and add your additional CSS to the styles.css file.