How to Add CSS to WordPress

WordPress provides us with different ways to add CSS. In this article we will see each of them and which one is best for each case.

The first thing to keep in mind is that we cannot touch the file «style.css» of the theme that we have activated. If this theme is updated, we would lose all the modifications that we have made on the theme. 

Through a plugin

If we have to add CSS, a solution that can facilitate a lot of work is through a plugin. In this case I present Simple CSS. 

With this plugin we can add CSS from the section «Plain CSS» which will be created for us in «Appearance»or we can add CSS in a metabox that will be created for each page/entry, which will allow us to add the CSS that is only applied to that page/entry.

The style sheets of «Plain CSS» have priority over the rest of the style sheets of our theme or «Child Theme«. It is a very simple option that allows us to deactivate the plugin at any time when we no longer need these style modifications.

Plain CSS

With a Child-Theme

It is the option that I recommend the most, it is necessary to have more knowledge about WordPress than the rest of the options that I propose, but it is the option that allows us more flexibility when making changes to the subject.

With the child-theme In addition to editing the CSS, we can also edit the HTML and customize the pages so that we can make changes to the structure of the pages.

The CSS of our child-theme It will take precedence over the parent theme so it will be easy for us to edit the theme. We will add this css in the «style.css» from our Child-theme.

If you want to know how to create a Child-theme or investigate more about them, I recommend the article «Child themes or child themes in WordPress«.

With additional CSS option

Since WordPress 4.7 update was added to "Customize now" the option "additional CSS«. This option allows us to add easily from the WordPress customize. This option can be used for an accoutrement. It is a rather uncomfortable editor since it is very narrow when it is in a sidebar. The changes that we are making can be seen live, which helps us to be able to quickly modify what we want.