Custom CSS

Do you need to modify the theme look and styles beyond theme options provided? The CSS is your friend!

Using Additional CSS field

It is possible to add custom CSS code directly in WordPress theme customizer: just navigate to Appearance → Customize → Additional CSS and write/paste in your code there (don’t forget to save changes).

This custom CSS is then specific to the theme you are using ans so it is basically the same approach as using a child theme in this manner.

Using “Additional CSS” field is recommended unless you are applying a lot of CSS code, in which case we recommend using a child theme approach below.

TIP: Watch a video on customizing a theme CSS.


Alternative solutions

Using a child theme

If you are using a child theme, just place your custom CSS into your child theme‘s style.css file.

Using a child theme is recommended solution for a lot of CSS code. Also, when you modify the parent theme using PHP code in your child theme, we recommend keeping your CSS code in there too, instead of using “Additional CSS” field. The reason for this is simple – keeping all your custom code in one place, which will help with backups and transfer/migration of the code.

Please refer to your theme documentation for more info on child theme.

Using a plugin

You can also use a plugin to add a custom CSS to your WordPress website. There are many free plugins available in WordPress plugin repository that will allow you adding custom CSS.

But since WordPress (version 4.7+) contains a dedicated “Additional CSS” field (see above), we no longer recommend using plugins.


What is CSS?

You can learn more on CSS at http://www.w3schools.com/css/

TIP:
To find out what CSS code you need to apply to modify a specific theme elements use a code inspector tool in your browser (you can also watch a video on using Chrome Developer Tools on WordPress.tv).