1. Home
  2. WordPress Tutorials
  3. 3 Simple Ways to Add Custom CSS to Your WordPress Website
Experience Faster, Secure and Eco-Friendly Web Hosting for your Website or Blog. Learn More.


3 Simple Ways to Add Custom CSS to Your WordPress Website

add css to wordpress

Custom cascading style sheets allows you to design your site with greater control over what the pages look like and how they behave. The script that goes into CSS can govern everything from imagery to the types of font that are displayed on your pages. Things like link colors, background images and even embedded sounds could all come from these files. So, what are the best ways to implement these custom changes? How does one add CSS to WordPress in order to create a more unique appearance? In reality, modifying the CSS file is much simpler than you might believe.

1. Changes on the Coding Level

changes on coding level

Many website owners find that directly modifying the CSS file is the easiest route to take. This can be done by accessing the file directly through WordPress by going into the “Appearance” and then “Editor” section of the dashboard. You just need to make sure that you’re editing the correct CSS file. This is done by taking note of the theme you’re using and the file you’re changing. You may also be able to add code directly to the themes CSS by visiting the “CSS Editor” under “Appearance.”

Although many people find this part of the customization easier, it does come with its drawbacks. For instance, you may have to re-code the CSS if you decide to change themes. Most themes will use their own CSS file for the overall design. Once you change the template, it may not use the same files as before. However, copying your adjustments prior to changing the theme can save you a great deal of flipping back and forth if you paste the code into a notepad file. Once you change the design, simply copy the code from notepad and paste it into the new CSS file.

2. CSS Plugins For Customization

css plugins

When it comes to making easy changes to WordPress, the right plugins have the greatest potential. These pieces of software are specifically designed to take much of the work out of a variety of tasks. In this case, customizing the CSS file can be as easy as putting the code into the plugin itself.

One of the biggest benefits for using CSS customization plugins is that the coding is saved regardless of what theme you use. Unlike hard coding methods or using specific themes, the plugin will save all of your coding changes and then implement them when you select a new template. For those who are beginner developers, this may be the best way to add CSS to WordPress without fear of crashing the site. Here are several popular CSS modification plugins that are easy to use:

Simple Custom CSS

Simple Custom CSS is a basic method to implement coding onto your pages without opening the editor. There is no configuration needed and it supports secure sites such as domains with the “HTTPS” syntax. The plugin also delivers very little impact on site performance.

WP Add Custom CSS

Regardless if you need to add changes to the CSS for the whole site or just a handful of pages, WP Add Custom CSS can accommodate them. The changes you make in this plugin will override the main style sheet to give you the appearance you want in your site. It’s available in English, German and Spanish.

TJ Custom CSS

Not only will TJ Custom CSS help you change your style sheets, but it will also give you a live preview before submitting your changes. This will let you see the end result of your coding before committing to the changes. It’s built as an alternative to child theme customization.

3. CSS Theme Modification

css theme modification

Some themes have built in sections that will allow you to add coding from the “Customize” area under the “Appearance” section in your dashboard. These are child CSS files and work in conjunction with your primary style sheet.

One of the drawbacks to using this method to modify the CSS is the potential to lose your adjustments if you switch themes. These are specific for the design and will not remain once you switch your theme. However, it can be a great way to make specific changes based on the theme itself. For example, specific colors or fonts used in this child CSS may not be visually appealing in the new theme anyway.

Using CSS to modify your site can enhance its performance, give you greater control and help you fine-tune your design. As long as you have a basic understanding of how the coding works, it can be relatively simple to add CSS to WordPress regardless of what theme you use. This can be one of the best ways to deliver a completely unique experience for your target audience.

What kinds of things have you changed in the CSS file? Have you found it easier to modify the style sheet directly, or would you rather use a plugin?

Author: Anna Gargioni

Updated on March 6, 2017

Was this article helpful?

Related Articles

Add A Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.