Add Extra CSS file to WordPress

Why do you want the extra css file in your wordpress editor? Just to have a quick access to it. Only one time uploading of an empty CSS file, after that you can access it directly from your editor

The best way to change the look of your WordPress site is still making a childtheme. This blog however is created with a Genesis childtheme. In theory the best practice is to change CSS code directly in this Genesis childtheme.

The last year I followed this best practice and found that the stylesheets becomes your own and changing the theme will be problematic as all the extra CSS code is woven into the original style sheet.

I am now using a better solution. By creating an extra stylesheet and load it into the root file of your WordPress. After you have followed all steps, please check your source code to check if the new CSS file is below the original style.css. CSS reads from top to bottom. So the bottom normally overrides the top.

Create the extra CSS file

• Create a new CSS file, I normally use Notepad ++ for this purpose
• Save the file with a simple name

Upload the extra CSS file

Upload the file to the root of your theme via the control panel of your host to the root of the theme which you are using. After this upload, WordPress will automatically show the file in your editor, see photo above

 

Link the extra CSS file to your theme

Normally WordPress only uses the style.css, so any other file you have to upload via a link in head section. WordPress is used to this, as every plugin is using the head section to output javascript files, css files, titles and descrtiptions.

If you use Genesis, the link can be uploaded via theme settings – header scripts

If you use any free WordPress Theme you can install an plugin which output your links directly into the head section.

CSS has also the option @import. This means that you can import an extra CSS stylesheet into the style.css. I didn’t try this option yet because the Genesis gives me an easier option.

Change your Theme

Take the file with you:

• move the file to the next theme root
• change the upload link name

Test the CSS local

I use XAMPP as the local host on my computer. Having a copy of your files on your computer is off course one of the best back-ups you can imagine. Further more you can call any CSS file into your favorite editor and change the looks of your site much easier and much saver. As soon as you are done you just use your copy command like Ctrl A, Ctrl C and Ctrl V to update your live WordPress site.

The Extra CSS file can be used to control for example the colors which are used in your theme. Problems or questions? Meij Webdesign also helps with small problems like uploading a file to your host or changes to your theme.