Create a Child Theme of Reverie 4

The latest update of Reverie brings several new features and hope you like it. So far in previous versions of Reverie, I basically ignored child theme support since I personally prefer doing all the work by editing the original files. So in this post, I will go through some necessary steps to enable the child theme support for Reverie.

First, make sure you are using the latest version of Reverie, I’ve just made some tweaks today to better support child theme and you are better off download again if you are not sure. By default, Reverie 4 is in favor of Compass and Sass, whose CSS output locates under css/ directory and will be loaded directly by Reverie for main stylesheet. If you start to create a child theme right away, you will encounter problems that your child theme’s CSS is not working. That is because Reverie loads Sass’s output CSS using template directory instead of stylesheet directory. Thus in this case, your child theme’s CSS will not be loaded. However, there is a quick way to fix it, by switching to the vanilla CSS mode. I wrote the instruction in yesterday’s post so just copy and paste below.

September 9, 2013 For folks who want to use Sass for child theme, check out the latest tutorial.

Go to the functions.php and find the following section:

Change it into

Once done, Reverie will properly enqueue the default Foundation CSS from ZURB for you. The includes the following files in a standard Foundation package.

Once this is done, Reverie will automatically load the vanilla style.css under the root directory (the best practice of stylesheet directory instead of template directory), and when you create a child theme, it will properly load your child theme’s CSS instead of Reverie’s.

To create a child theme, you can follow instructions on WordPress Codex. I’ve made the template below, copy and paste into your child theme’s style.css.

If you still have problems, let me know in the comment below.