How To Easily Add Custom CSS To WordPress Site

Jump To Right Section Show

Sometimes you may find yourself needing to add custom CSS in your WordPress site. Perhaps it’s because you’re following a tutorial on TechAid24. If using FTP is too confusing, then there is an easier way to add CSS on your site. In this article, we will show you how to add custom CSS to your WordPress site without editing any theme files.

Method 1: Add Custom CSS Using Theme Customizer

Since WordPress 4.7, users can now add custom CSS directly from the WordPress admin area. This is super-easy and you would be able to see your changes with a live preview instantly. Head over to Themes » Customize page. This will launch the WordPress theme customizer interface. You will see your site’s live preview with a bunch of options on the left pane.

Click on the Additional CSS tab from the left pane. The tab will slide to show you a simple box where you can add your custom CSS. As soon as you add a valid CSS rule, you will be able to see it applied on your website’s live preview pane. You can continue adding custom CSS code until you are satisfied with how it looks on your site. Don’t forget to click on the ‘Save & Publish’ button on the top when you are finished.

Note: Any custom CSS that you add using theme customizer is only available with that particular theme. If you would like to use it with other themes, then you will need to copy and paste it to your new theme using the same method.

Method 2: Add Custom CSS Using a Plugin

This method requires you to install a plugin. It is particularly useful for users who are not using WordPress 4.7 or later versions of WordPress. First thing you need to do is install and activate the Simple Custom CSS plugin. Upon activation simply go to Appearance » Custom CSS and write down or paste your custom CSS.


.content-table {
  border-collapse: collapse;
  margin: 15px 0;
  min-width: 100%;
  border-radius: 0px 5px 0 0;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.content-table thead tr {
  background-color: #009879;
  color: #ffffff;
  text-align: left;
  font-weight: bold;
}

.content-table th {
  padding: 10px 15px;
}

.content-table td {
  padding: 5px 15px;
}

.content-table tbody tr {
  border-bottom: 1px solid #dddddd;
}

.content-table tbody tr:nth-of-type(even) {
  background-color: #f3f3f3;
}

.content-table tbody tr:last-of-type {
  border-bottom: 2px solid #009879;
}

.content-table {

border-collapse: collapse;

margin: 15px 0;

min-width: 100%;

border-radius: 0px 5px 0 0;

overflow: hidden;

box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);

}

.content-table thead tr {

background-color: #009879;

color: #ffffff;

text-align: left;

font-weight: bold;

}

.content-table th {

padding: 10px 15px;

}

.content-table td {

padding: 5px 15px;

}

.content-table tbody tr {

border-bottom: 1px solid #dddddd;

}

.content-table tbody tr:nth-of-type(even) {

background-color: #f3f3f3;

}

.content-table tbody tr:last-of-type {

border-bottom: 2px solid #009879;

}

Don’t forget to press the ‘Update Custom CSS’ button to store your CSS. You can now view your website to see the custom CSS in action. Note: Another advantage of using this method is that your custom CSS will be available even when you change your theme.

Using a Custom CSS plugin vs Adding CSS in Theme

Both methods described above are recommended for beginners. Advanced users can also add custom CSS directly to their themes. However, adding custom CSS snippets into your parent theme is not recommended. Your CSS changes will be lost if you accidentally update the theme without saving your custom changes.

The best approach is to use a child theme instead. However, many beginners don’t want to create a child theme. Apart from adding custom CSS they really don’t know how they will be using that child theme. Using a custom CSS plugin allows you to store your custom CSS independently from your theme. This way you can easily switch themes and your custom CSS will still be there.

Another great way to add custom CSS to your WordPress site is by using the CSS Hero plugin. This wonderful plugin allows you to edit almost everything in your WordPress site without writing a single line of code. We hope this article helped add custom CSS to your WordPress site. You may also want to see how our guide on how to create a site-specific WordPress plugin to store your custom code snippets.

The article was published on July 15, 2020 @ 10:55 AM