Sass, Bang, Wallop! (compiling CSS for WordPress child-themes)
Posted on August 7, 2013
Re-post from Aptivate‘s Blog: http://aptivate.org/en/blog/2013/08/07/sass-bang-wallop/
- WordPress child themes require a stylesheet with a very specific comment at the top – https://codex.wordpress.org/Child_Themes#How_to_Create_a_Child_Theme
- By using ! at the start of a comment, it will never be stripped. So, you can still compile / minify your Sass stylesheet and keep this important comment – http://css-tricks.com/compass-compiling-and-wordpress-themes/
- The wordpress variable TEMPLATEPATH, when used in a child-theme, gives you the parent theme’s directory.
The long version
We’re writing our stylesheets using Sass because writing CSS is more fun with Sass. And using the lovely compass to compile our stylesheets. Our compass config looks like this:
# config.rb (in wp-content/theme/our-child-theme) css_dir = "" sass_dir = "sass" output_style = (environment == :production) ? :compressed : :expanded line_comments = (environment == :production) ? :false : :true
So this means that when developing, we can run
and our stylesheet gets compiled.
And when its time to deploy
compass compile -e production
and a minified stylesheet is produced.
We were developing a wordpress site using a child-theme. I came to the project relatively late and have never built a child theme. So stuff was working when I got it and I just went about continuing development. I introduced the switch from CSS to Sass (we were doing some major styling overhaul and the stylesheet was at 2500+ lines so it seemed like a good time for an overhaul).
When we switched to staging, the site appeared to be fine, but there were a couple of small glitches and noticed in the back end that:
- templates were no longer showing in the Page Attributes box (on the right when you’re editing a page)
- the dashboard had a red error message “ERROR: The themes directory is either empty or doesn’t exist. Please check your installation.” where it normally mentions the theme.
Looking at the requirements for a theme in wordpress – an index.php and a style.css are needed. There was already a style.css (it was a beautifully minified, comment free stylesheet) but no index.php. So I (mea culpa) added an index.php. Horror, everything broke. Because with the index.php wordpress thinks that your theme is a theme. But our theme was a child theme and we were using things like TEMPLATEPATH which, when used in a child-theme points to the parent-theme directory.
So, that was bad.
Then found the wordpress page on child themes (https://codex.wordpress.org/Child_Themes#How_to_Create_a_Child_Theme). And remembered a post from Chris Coyier (my personal CSS hero) on Sass and WordPress themes (http://css-tricks.com/compass-compiling-and-wordpress-themes/) and discovered that a single
could solve all our problems.
Our main Sass stylesheet that was doing all the imports looked like this:
/* Theme Name: Our Child Theme Description: The description Version: 1.0 Author: Aptivate Author URI: http://aptivate.org Template: parent-theme */ @import "compass/reset"; @import "compass/utilities/general/clearfix"; @import "compass/css3"; @import "globals"; @import "original"; @import "pagination"; @import "header_search"; @import "solr_results"; @import "social"; @import "nav"; @import "home"; @import "footer"; @import "teaser"; @import "themes"; @import "map"; @import "video";
This assembles all of our smaller sass sheets into one stylesheet, with the comment at the top. When using the production environment variable for compilation, compass minifies the CSS including stripping out all the comments. This is usually a good thing, but we really need this one comment. By changing the comment from
/* Theme Name: Our Child Theme
/*! Theme Name: Our Child Theme
then this one comment will not be removed and now our child theme is happy once more.
Sass, Bang, WordPress 😀