How to know which order Wordpress places CSS files?

Question

I've installed the Roots theme (version 4 so I can use the 1140px Grid) on Wordpress 3.3.1, and want to edit the CSS. Initially I only get the style.css file in the editor and can't see the others.

The css files I need are located in a subfolder marked 'css', and I see from a quick Google search that there is a known bug with css subfolders, so I moved them into the root folder which seems to be working, but the site now looks a bit wonky, so I don't think it's quite right.

How do I ensure that the css files are placed in the right order in the Wordpress code? At the moment I don't know how to find out which order they have been set in.

Thanks, Jason

Answer 1

1. Don't edit your theme using the WordPress editor.

This is a quick-and-dirty approach to development, but you can easily destroy your entire site by mistake with this tool. Instead, edit the files on your machine locally and then use FTP to upload the changed files to the server.

2. Moving the CSS will break the theme.

WordPress requires that themes register their CSS in order to render it to the page. Themes use a function (wp_register_style()) to tell WordPress the name of the stylesheet, its location, and to specify whether or not other stylesheets need to be loaded first.

Roots includes some of these definitions in /inc/roots-scripts.php. Two lines, for a specific example:

wp_enqueue_style('roots_style', get_template_directory_uri() . '/css/style.css', false, null);
wp_enqueue_style('roots_bootstrap_style', get_template_directory_uri() . '/css/bootstrap.css', array('roots_style'), null);

The first line registers roots_style and requires that it be style.css in the /css directory. It has no dependencies.

The second line registers roots_bootstrap_style and requires it to be bootstrap.css in the /css directory. It is dependent on roots_styles, so WordPress will add roots_styles first automatically.

Answer 2

A few notes I have observed about how Roots loads CSS. It loads the files in this order:

1. css/style.css
2. css/bootstrap.css
3. css/bootstrap-responsive.css (optionally, if BOOTSTRAP_RESPONSIVE is set to true in inc/roots-config.php)
4. css/app.css

These are my preliminary observations, but it's clear that you want to edit the CSS files in Roots in a nicely structured way.

css/style.css I think this is mostly the HTML5 Boilerplate stuff, maybe some other setup stuff? You probably wouldn't want to touch this.

css/bootstrap.css, and css/bootstrap-responsive.css Note here, that these files come from Twitter Bootstrap, and are compiled by pointing a LESS compiler at css/less/bootstrap.less and css/less/bootstrap-responsive.less. You might never need to change these files. If you did, it would be far nicer to study up a bit on LESS, make changes in the .less files, and recompile them. There are mostly just a handful of @variables that you would want to change, and if you do it this way, according to the way Bootstrap is set up to work, you will have a very nice, organized process. The main things you'd change here are layout options and color settings. (There are a number of free LESS apps you can download to recompile the files.)

css/app.css This is a very nicely structured standard CSS file, with sections for Base, Header, Content, etc. Here, you'd just want to try to keep your CSS nicely organized into the sections provided.

I am finding that if I approach it in an orderly way, and understand how Roots is structuring things, it is really a very nice system.