Adding Custom CSS to your Theme/Website

To change styling or add custom styling to your website, or even hide certain elements on the page, you can easily add your own custom CSS to do this.

 

1) Adding Custom CSS to the WordPress Customizer

Since WordPress 4.7, you can now add your own custom CSS directly into the Customizer by going to Customize -> Additional CSS in your WordPress Dashboard.

You’ll be able to view these changes instantly in the live preview.

 

Delete this text:

/*
You can add your own CSS here

Click the help icon above to learn more.
*/

You can start out by removing the commented text in the Additional CSS area. Do not place your CSS code inside the /* */, otherwise your added CSS will be commented out and will not display the changes on the site.

 

Please Note: Any custom CSS added using WordPress Customizer is only available with that particular theme. If you change your theme then you will need to copy the CSS and paste it to the Customizer again once you have activated your new theme.

 

2) Add Custom CSS with a plugin

Another method of adding custom CSS to your website is via a Custom CSS plugin.

We recommend the SiteOrigin CSS plugin to add custom CSS, as this plugin offers the standard method of typing out your own CSS code for those who are comfortable using CSS, and it also offers a visual method for if you’re not very confident adding your own custom CSS.

 

Once you’ve installed and activated the SiteOrigin CSS plugin, you can go to Appearance -> Custom CSS to start adding your own code.

Please Note: Another advantage of using this method is that your custom CSS will be available even when you change your theme.

 

3) Add CSS with a Child Theme

Another method is to create a Child Theme for your site.

We’d recommend creating a Child Theme if you’re planning to edit the theme template files as well as the CSS, otherwise if you’re only adding CSS to your site then we recommend using one of the 2 methods above.

We do offer ready to use Child Themes for all of our themes… You can find each one on the documentation page under the relevant theme.

 

 

For custom work on the themes we recommend contacting Codeable.