Child theme

[millo2k]

Could you give a couple of pointers to create a child theme for it. Do you @import the minified css file of the parent? A quick run through would be appreciated. Thanks

[digisavvy]

Hi there!
Thanks for the question. =)

In thinking about this, a lot has changed since I started to work on this; so child themeing, while possible, requires more thought and I haven't taken time to think through it all that much, honestly. If you plan to use Gulp (which is a big part of the theme) it depends on a number of files being present within the activated theme.

So I did a quick run through and here's what I did and worked.

1. Install some like it neat, don't activate it
2. Create a child theme of some like it neat, add your stylesheet header in a style.css file in the child theme root, also create functions.php, too.
3. Copy the following from the parent theme
   -- .bowercc
   -- .jshintrc
   -- bower.json
   -- composer.json
   -- bomposer.phar
   -- gulpfile.js
   -- package.json
   -- /assets/sass

Open up a terminal and go to the child theme directory and run:

1. npm install (you might have to run as admin or sudo)
2. bower install
3. php composer.phar install

The previous three points assume you installed composer, bower and node globally already, otherwise the steps will bomb out.

Once those steps are complete, go into gulpfile.js, change the project string to match your project URL (without the extension) and in your command/terminal prompt, while still in child theme root, run gulp and that should get you going. I just did that now.

I'll think about packaging this up as a separate repo or something like that.

Let me know how you get sorted out.

===My Response, before I scrapped it===

A couple things to note before I answer your question. Note that in wp-config.php, if wp_debug is set to 'true' the theme calls unminified style.css. If it is false, then it will call the minified css file style-min.css.

My recommendation would be to actually enqueue the parent stylesheet, not @import. Allegedly enqueueing is a little more performance than @import.

Drop this in the child functions.php file
add_action( 'wp_enqueue_scripts', 'my_child_theme_scripts' ); function my_child_theme_scripts() { wp_enqueue_style( 'parent-theme-css', get_template_directory_uri() . '/assets/css/style.css' ); }

If you want to account for the that in your child theme, too, you can try this:

// Faster than @import add_action( 'wp_enqueue_scripts', 'my_child_theme_scripts' ); function my_child_theme_scripts() { if ( WP_DEBUG ) : wp_enqueue_style( 'parent-theme-css', get_template_directory_uri() . '/assets/css/style.css' ); else: wp_enqueue_style( 'parent-theme-css', get_template_directory_uri() . '/assets/css/style-min.css' ); endif; }

[digisavvy]

So, if you go this route, it's not necessary to import the parent theme CSS. If you want to keep your changes separate from what is already there. I would add extra scss files to contain your additional mods and import them via app.scss

[dotZak]

I'm also interested in using this as a parent theme and building out a child theme. I've never built a child theme before so maybe this is a stupid question, but I'll ask anyway.

In lines 143 to 167 of functions.php under "Vendor Scripts" you're using get_stylesheet_directory_uri():

// Vendor Scripts
wp_enqueue_script( 'modernizr-js', get_stylesheet_directory_uri() . '/assets/js/vendor/modernizr/modernizr.js', array( 'jquery' ), '2.8.2', true );
wp_enqueue_script( 'selectivizr-js', get_stylesheet_directory_uri() . '/assets/js/vendor/selectivizr/selectivizr.js', array( 'jquery' ), '1.0.2b', true );
wp_enqueue_script( 'flexnav-js', get_stylesheet_directory_uri() . '/assets/js/vendor/flexnav/jquery.flexnav.js', array( 'jquery' ), '1.3.3', true );
wp_enqueue_script( 'hoverintent-js', get_stylesheet_directory_uri() . '/assets/js/vendor/hoverintent/jquery.hoverIntent.js', array( 'jquery' ), '1.0.0', true );

This returns the child theme's directory and thus 'modernizer.js', 'selectivizer.js', 'flexnav.js' and 'jquery.hoverIntent.js' don't load. Your instructions don't include copying those files into the child theme.

Would it be intelligent to:

1. switch those four paths to use get_template_directory_uri() (codex entry) in the parent theme, or
2. should I copy those files and their directories into the child theme, or
3. is there a better way to handle this that I'm not understanding?

As a follow up, I'd like to take the opportunity here to maybe learn a bit from you:
I'm working from the assumption that purposefully chose to use get_stylesheet_directory_uri() instead of get_template_directory_uri(). I've noticed that you use get_template_directory() above.

Why did you choose to use get_stylesheet_directory_uri() in this case?

[digisavvy]

Hey dotZak. Thanks for the question! Apologies I didn't make this more clear and it's confusing and provides an opportunity to correct it. =)

The theme should be friendly to use in a parent/child configuration, although, when I set out building the theme it was really meant to be a standalone theme initially. I went back and made it "friendlier" for child theming later. When I added the tooling for gulp, bower etc. that kinda complicated things a bit, hence some of the confusion here.

So, this really should be get_template_directory_uri and should be set in the parent theme. If you didn't want to use those scripts you could simply dequeue them within your child theme and then enqueue other scripts as you so desired. Within the child theme it is correct to use get_stylesheet_directory_uri(). It checks the child first and then should go to the parent if the asset being called is not present. But if you're not in a child theme you should always use get_template_directory_uri(). In this instance I goofed. But I fixed it. So thanks for that. =)

[dotZak]

Hey, thanks so much for a great answer. I suspected something along those lines was happening.

I've pulled the latest version and I'll play with it some more.

Thanks!