Open door: 09:00-12:00
Or make an appointment
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
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.