Appearance Customize Css Where to Find the File

It is a recurring question, especially in the WordPress forums. Suppose you want to modify a particular element of your design: the size of H1, the range of colours or just the tone of the social buttons … These modifications require in most cases a bit of CSS. But do not panic, there are several methods to do so safely and without hardly touching code.

The other scenario is to have an extract of CSS that you 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 easy function to add Custom CSS available for all sites). We therefore must modify the template or use some alternative (recommended) methods that we like:

The WordPress themes are responsible for CSS

Unless a particular plugin has its own style and bring with it a CSS style sheet itself, the truth is that all load design belongs exclusively to our WordPress template. So, why do not directly 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. So that means that if you update your theme to a new version, you will lose all the changes you've made (in CSS or php files of course, the content has nothing to do …)

Once discussed the background, we list the most recommended methods and their difficulty, to add or modify any design element via CSS.

0. Custom CSS via WordPress Customize

Update: since WordPress 4.7 version, we can add our own CSS code without external plugins. This function have been added to the Core and can be 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 easy way to add your own CSS.

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

1. The JetPack Custom CSS Module

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

The steps are simple:

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

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

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

2. Using the Simple Custom CSS plugin

As easy as 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 way in this article), you need to go to Appearance > Custom CSS where you can add your custom CSS styles. Don't forget to save the changes before leave the page!

Very easy 🙂

3. Creating a Child Theme

A more complex but equally effective method is to create a child theme modifying parent theme styles. Basically we will perform the same task as the previous method: Load a custom style sheet right after the style sheet parent theme. Overwrite and add new rules without touching the original theme. Fantastic!

However, for some users, this method 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.

Whatever way you decide, here's more 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 you have no problems creating Child Themes, this must always be your first choice. The main reason is that it is scalable, so if you need to include some additional functionality or template, you can do it through the fuctions.php of your child theme (some can be very interesting, especially those concerning the responsive or those referring to include a web font in your WordPress.)

With Jetpack you cannot modify or add new features. They are just style sheets. You are only including one more call to a single CSS file (style.css of your child theme) while for the first option, you are loading a plugin plus the call to the server over the new CSS. But, both are very good options.

4. Directly edit the style.css of your theme

Editing CSS in WordPress. Directly edit the CSS of your theme (style.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 have no knowledge of CSS, be careful with the punctuation and the rules. Let an open key or forget a semicolon can make your style paper unreadable for some browsers.

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

1. Go to Appearance> Editor
2. Find the style.css file (check that the current theme is selected)
3. Edit carefully

In addition to the drawbacks mentioned above, this method will not give you access to all the CSS on some themes. Here is a clear example: if the author has decided to divide 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 define a style sheet or themes that bring with them a field for the changes you want to make. But they usually are the minority.

The important thing is to decide which method you choose, make a copy of those files that you can lose and use the alternative that best suits your skills. Do things you can control.

Good luck! (If you have any questions feel free to ask me.) What's your favorite way to edit CSS in WordPress?

Appearance Customize Css Where to Find the File

Source: https://www.silocreativo.com/en/modify-add-css-wordpress-theme/

Share this post