Child Theme Setup with SCSS

[ghost]

I know I have posted this elsewhere. But there are a few people (including me) that are having conceptual problems with this. Can someone help and make a starter child theme? This might help us get our heads wrapped around the child theme structure.

[tnog]

I'll try to summarize here. I haven't spent much time customizing on F5 Reverie yet, but a child theme that I developed on F4 seems to work (mostly) on F5. I'm assuming that you already know how Compass and SASS works.

You'll need to enqueue the styles for the child theme first, either in functions.php or in your own enqueue-sass.php file that you call in functions.php with require_once:

<?php
/*********************
Enqueue the proper CSS
if you use Sass.
*********************/
function tn_cstm_register()
{
    // Register the childtheme stylesheet, use get_stylesheet_directory_uri() to point to childtheme directory
    wp_register_style( 'tn_cstm-stylesheet', get_stylesheet_directory_uri() . '/css/style.css', array(), '', 'all' );
    wp_enqueue_style( 'tn_cstm-stylesheet' );

}
add_action( 'wp_enqueue_scripts', 'tn_cstm_register' );
?>

Since I edit a copy of _settings.scss in my childtheme's scss folder I also copy the file from reverie into my own scss folder.

In order for Compass to compile changes to _settings.scss, in the parent theme, I point line 10 in reverie/scss/style.scss to the copy of _settings.scss in my childtheme's folder:

Change this:

// Global Foundation Settings
@import "settings";

to

// Global Foundation Settings
@import "../../../mychildtheme/scss/settings";

or wherever you decide to keep the file.

And finally, you'll need to create your own config.rb file in your childtheme folder pointing to your css, scss and other folders. You can probably just copy over the existing file in Reverie, if you're replicating the basic directory structure there.

Also, when you make changes to _settings.scss in your childtheme, you'll need to compass watch the reverie folder and save style.scss in Reverie for Compass to compile the changes, in addition to your childtheme folder.

I'm sure that there's probably an easier solution than this, but this is how I sorted it out. Hope that this helps.

[ghost]

tnog,

Thanks! I am going to try this just to help me get a better understanding of how this works. When you tinker, you actually learn a lot of good stuff. Above, you say to enqueue SASS with the require once function. Yet, I don't see that you actually did that. It seems to me that this would be beneficial because then you have to make minimal changes to the parent. Did you add the above function to the parent or child theme?

[tnog]

jkinley,

I didn't spell out all of the steps since I assume basic familiarity with PHP, WordPress and child themes. You have the option of including the function directly in functions.php or creating a separate file that you require_once in functions.php, your choice. And yes, as spelled out in the directions, this is in the child theme.