How To Add A Second Style Sheet In Your Theme

It is a recurring question, especially in the WordPress forums. Suppose you want to modify a detail element of your pattern: the size of H1, the range of colours or just the tone of the social buttons … These modifications require in almost cases a scrap of CSS. Just do not panic, in that location are several methods to exercise so safely and without hardly touching code.

The other scenario is to have an excerpt of CSS that yous want to add to your theme. ~~By default, WordPress does not bring any editor or field to enter these style rules~~ (Update: WordPress has added an like shooting fish in a barrel function to add Custom CSS bachelor for all sites). We therefore must modify the template or apply some alternative (recommended) methods that we similar:

The WordPress themes are responsible for CSS

Unless a particular plugin has its own mode and bring with it a CSS style sail itself, the truth is that all load blueprint belongs exclusively to our WordPress template. So, why do not direct edit the template? Mistake!

WordPress templates are, like plugins, items that are updated, improved and overwrites previous versions. And without hesitation, changes have been made on that template are not saved. Then that means that if yous update your theme to a new version, y'all will lose all the changes you've fabricated (in CSS or php files of course, the content has nothing to practice …)

Once discussed the groundwork, we list the most recommended methods and their difficulty, to add or alter whatever design chemical element via CSS.

0. Custom CSS via WordPress Customize

Update: since WordPress 4.7 version, we tin add together our own CSS code without external plugins. This function accept been added to the Core and can exist used from via Appearance > Customize > Additional CSS. It is available for all WordPress.org installations whatever themes or plugins your are using. Very quick and piece of cake way to add your ain CSS.

Add CSS to WordPress through Customize

On the other hand, equally you lot can see, the editor is very unproblematic and it doesn't have revision options or highlighted texts (very useful to show selectors such as classes names or IDs). So if you lot want to add curt CSS rules, then this is your best option. Even so for long-time editions or bigger projects, continue reading because the following options could fit improve for your CSS additions.

one. The JetPack Custom CSS Module

Undoubtedly the most elementary and quite efficient method is to download the Jetpack plugin (if you lot have an account on WordPress.com yous can also utilize the free Slim JetPack plugin) and activate the Custom CSS module.

jetpack-wordpress-css

The steps are elementary:

1. Install the plugin.
2. Activate the plugin. (You may be prompted to connect your WordPress.com account)
3. Go to JetPack (only above Postal service in the WordPress admin menu) and seek the custom CSS module.
4. Once activated, yous will accept a new tab in the Appearance> Custom CSS menu. Voila! Here is a total CSS editor of your theme at your fingertips.

Annotation: If you opt for Slim JetPack, you do not need to take the activation in step 2 and three. Yous just demand to go to Settings> Slim JetPack. The rest is all the same.

Ready! Yous have activated your editor to paste or write CSS rules that will modify your design or theme. The fantastic thing nearly this method is that JetPack includes CSS styles that ascertain this editor just behind the load the theme has by default (style.css), and so you can overwrite smoothly without fearfulness of losing changes in future updates.

two. Using the Simple Custom CSS plugin

As easy every bit activating the Jetpack module. After installing the Custom CSS plugin and activate it (we tell you how to install a plugin in WordPress in the right manner in this article), you need to go to Appearance > Custom CSS where you tin add your custom CSS styles. Don't forget to save the changes before get out the folio!

Editing CSS in WordPress using a plugin

Very piece of cake 🙂

iii. Creating a Child Theme

A more circuitous but every bit effective method is to create a child theme modifying parent theme styles. Basically nosotros volition perform the same task as the previous method: Load a custom style sail right after the style sheet parent theme. Overwrite and add new rules without touching the original theme. Fantastic!

However, for some users, this method tin can be somewhat tedious. You'll need a CSS editor (notepad it is not recommended; sublime text is better), and access to your FTP or your child theme pack and install it via Appearance> Themes.

modify-theme-child

Whatever mode you lot make up one's mind, here's more than information on how to create a child theme in WordPress codex.

This method is my favorite, although it is understandable that only takes place when the changes have a certain entity. For a small modification, the method via JetPack CSS Editor is easier and faster.

If yous have no problems creating Kid Themes, this must always be your first choice. The principal reason is that information technology is scalable, so if you demand to include some additional functionality or template, you can exercise it through the fuctions.php of your child theme (some can be very interesting, especially those apropos the responsive or those referring to include a web font in your WordPress.)

With Jetpack yous cannot alter or add new features. They are simply mode sheets. Y'all are only including one more call to a single CSS file (style.css of your kid theme) while for the first selection, you are loading a plugin plus the telephone call to the server over the new CSS. Merely, both are very practiced options.

4. Straight edit the way.css of your theme

Editing CSS in WordPress. Directly edit the CSS of your theme (manner.css) is not the cleanest solution. Whether you're a premium theme or a free one, you will lose those changes when the theme is updated.

In addition, if you lot have no knowledge of CSS, be careful with the punctuation and the rules. Allow an open up key or forget a semicolon tin can brand your style paper unreadable for some browsers.

If you are still convinced that this is your method, let'southward see how you tin can do it directly through the WordPress administration panel. The steps are:

ane. Go to Advent> Editor
2. Detect the style.css file (check that the current theme is selected)
3. Edit carefully

edit-css-wordpress

In add-on to the drawbacks mentioned above, this method will not requite you lot access to all the CSS on some themes. Here is a clear example: if the author has decided to carve up the styles into several CSS, some of them may be inaccessible from this editor, being within a library, assets or CSS folder.

Other methods and alternatives

There are other methods and alternatives: mainly plugins that allow you to ascertain a style sheet or themes that bring with them a field for the changes you lot want to make. But they usually are the minority.

The important thing is to decide which method you choose, make a re-create of those files that you tin can lose and apply the culling that best suits your skills. Do things y'all can command.

Good luck! (If yous take any questions feel costless to ask me.) What's your favorite style to edit CSS in WordPress?