Dequeue parent theme's copy of Foundation

[azzcatdesign]

Hi Stephen,

I've tried to implement your suggestions via Twitter, but have been unsuccessful. Another developer suggested this: https://gist.github.com/kristarella/32d37594520ee26fe1ae but that wipes out all styles entirely.

What I'm trying to do is set up a cornerstone child theme from where I can edit Foundation variables directly, in the foundation/_settings.scss file and NOT load another copy from the parent. Not being a PHP wiz, I keep missing something between the parent & child theme's functions.php files.

[pablopaul]

Hi,

copy the whole "function load_cornerstone_css()" (line 32 - 62 from https://github.com/thewirelessguy/cornerstone/blob/master/functions.php) into your functions.php of your child theme. Replace all three "get_template_directory_uri()" functions (line 38, 46 and 54) with "get_stylesheet_directory_uri()" so that the path points to your child theme.

Furthermore you need to copy line 98 (add_action from https://github.com/thewirelessguy/cornerstone/blob/master/functions.php) also into the functions.php of your child theme.

This should work (I use a likely setup), does it?

[azzcatdesign]

Hi Pablo,

Thanks for helping! I'm sort of there. Following your instructions, the parent copies of Foundation are no longer loaded. Now I'm having issues with getting all my .scss to compile on top of the foundation base.

I think this puts me back to my original issues with setup when I couldn't get grunt & bower to work the way I wanted and went back to Codekit. Lordy, I can write SASS, and love it, but trying to be more 'productive' with Grunt & Bower is like pulling teeth. I'll have to work more to sort out the dependencies and paths.

[pablopaul]

Hi Catherine,

did you exactly followed the steps described here http://foundation.zurb.com/docs/sass.html ? There is much to setup upfront (Git, Ruby, NodeJS, bower & grunt-cli npm packages, foundation gem) Once you have that, I recommend using the foundation libsass via

foundation new project_name --libsass

Let me know where you get stuck.

[azzcatdesign]

Hi Pablo,

I initially set this all up back in November/December. Got pulled off to work on hotter project for client. Then back to the WP site again last week. So, as I remember, I did try the grunt bower, etc. but had troubles. Threw in towel and backpedaled to Codekit. I'll need to go back and try a fresh dev environment next.

That said, I just got pulled off this again to test the hot project!

I'll keep you posted! Thanks!

[alana-mullen]

I've not got round to using SASS yet, so I can't provide much help. Hoping take a look at it when I'm a little less busy. These links may help: https://github.com/sindresorhus/grunt-sass https://thethemefoundry.com/blog/wordpress-sass/

[azzcatdesign]

SIGH

Spent the better part of en entire day on this. Have managed to get bower_components and all the foundation goodies into the child theme, and compiling to cornerstone-child-theme/style.css. That's the good news. Trust me, Foundation/Bower/etc. aren't really friendly for WordPress. I imagine there's more copies of jQuery than necessary...but I'm no javascript guru.

That said, I am completely unsuccessful with kristarella's gist: https://gist.github.com/kristarella/32d37594520ee26fe1ae as it leaves the site with a completely blank screen.

I've also tried Pablo's suggestions (except the grunt sass...I'm just using Codekit for now. Toooo painful with all the config files. Oy!)

Basically, it seems that every time I try to change the child theme's functions.php file to include ...function load_cornerstone_css()... I get the white screen of nothing.

Here's the dev site : http://azzcatdevelopment.com/Wurl_2014/wurl-network/ You can see that we're loading normalize, foundation and the child theme. Problem is, child theme also includes foundation. I can live with this set up, but would REALLY like to deliver the best performance possible. What I can learn/fix on this dev theme, I can then apply to the real deal at http://wurl.com.

I also have another client theme based on Cornerstone I'd like to fix and a third that'll be on my todo list within the week.

I'll post my current child theme's functions.php and a grab of file hierarchy below.

[azzcatdesign]

[azzcatdesign]

cornerstone-child/functions.php

<?php

// Enqueue CSS and scripts

function load_cornerstone_child_scripts() {

    wp_enqueue_style(
        'cornerstone_child_css',
        get_stylesheet_directory_uri() . '/style.css',
        array('foundation_css'),
        false,
        'all'
    );

    wp_enqueue_style(
        'jquery_flipster_css',
        get_stylesheet_directory_uri() . '/vendor_css/jquery.flipster.css',
        array('foundation_css'),
        false,
        'all'
    );

    wp_enqueue_style(
        'flipster_overrides_css',
        get_stylesheet_directory_uri() . '/vendor_css/flipster_overrides.css',
        array('foundation_css'),
        false,
        'all'
    );

    wp_enqueue_script(
        'jquery_flipster_js',
        get_stylesheet_directory_uri() . '/js/jquery.flipster.js',
        array(),
        '0.3.2',
        true
    );  

}

add_action('wp_enqueue_scripts', 'load_cornerstone_child_scripts',50);

?>

[pablopaul]

Hi,

solving "blank screen" goes by finding out why WordPress stops to work as expected, enabling debug output and sharing it will help a lot: http://codex.wordpress.org/Debugging_in_WordPress

Foundation gets included twice because in your cornerstone-child-theme example another function name is in use instead of what the parent uses to load css, this makes sense as long as you do not want to replace foundation completely in child theme, it make sense when you want to extend it in child theme.

That means that when the parent theme function.php executes (this is after the child functions.php execution) load_cornerstone_css() does not exist because onlyload_cornerstone_child_scripts()exists in your child theme so far, so basically the solution is to rename load_cornerstone_child_scripts() in your child theme to load_cornerstone_css() to "replace" it / to prevent that the function get executed in parent theme and includes foundation again.

Be aware that you need to include every CSS (normalize.css, foundation.css, maybe ie8-grid-foundation-4.css) in your child-themes load_cornerstone_css().

Another option is just to dequeue (http://codex.wordpress.org/Function_Reference/wp_dequeue_style) the inclusion of foundation in parent theme from child themes functions.php via the following function call:

// Dequeue just "foundation.min.css"
wp_dequeue_style( 'foundation_css' );

[azzcatdesign]

Finally!!!

First, THANKS to Pablo for sticking with me. Your notes and links above helped me through. Now I realize that part of the problem may well have been dependencies for styles.

Second, I rearranged my Sass so Foundation is only called after I load my _settings_custom.scss, thus, no foundation.min.css. All Foundation, and my custom Sass modules compile into one file: custom_foundation.css (which, I'll minify after development) and that file is called before style.css (which is bare bones).

I think, once minified, it'll be pretty lean and mean. (I can always comment out unused Foundation components.)

And third, thanks to all the others who've lent me assistance: Stephen, Kristen & Anthony. You all rock!

Below is the final copy of child theme's functions.php. Ignoring parent css entirely, adding child's copy of Foundation, other styles & additional scripts.

Booya!!!

[azzcatdesign]

<?php

// Load child theme copy of normalize, and customized Foundation, along with plugin styles.

function load_cornerstone_css() {

  global $wp_styles;

    // Pull in local copy of normalize, b/c it's a Foundation dependency.
    wp_enqueue_style(
        'normalize',
        get_stylesheet_directory_uri() . '/stylesheets/bower_components/foundation/css/normalize.css',
        array(),
        '2.1.2',
        'all'
    );

    // Using bower_components/foundation in child theme, then using SASS to customize Foundation _settings.scss. And then, adding our SASS custom style modules. All wrapped up and compiled to a neatly packaged css file. 
    // Best practice will be to minify this file.
     wp_enqueue_style(
        'custom_foundation_css',
        get_stylesheet_directory_uri() . '/stylesheets/css/custom_foundation.css',
        array('normalize'),
        '5.1.0',
        'all'
    );

    // Because the theme needs a style.css. Bare bones, as supplied by Cornerstone author on https://github.com/thewirelessguy/cornerstone-child-theme.
    wp_enqueue_style(
        'cornerstone_css',
        get_stylesheet_directory_uri() . '/style.css',
        array('custom_foundation_css'),
        false,
        'all'
    );

  // Flipster styles.
  wp_enqueue_style(
        'jquery_flipster_css',
        get_stylesheet_directory_uri() . '/vendor_css/jquery.flipster.css',
        array(),
        false,
        'all'
    );

    // Flipster overrides.
    wp_enqueue_style(
        'flipster_overrides_css',
        get_stylesheet_directory_uri() . '/vendor_css/flipster_overrides.css',
        array(),
        false,
        'all'
    );

}

// load child theme scripts
function load_cornerstone_child_scripts() {

  wp_enqueue_script(
        'jquery_flipster_js',
        get_stylesheet_directory_uri() . '/js/jquery.flipster.js',
        array(),
        '0.3.2',
        true
    );

}

add_action('wp_enqueue_scripts', 'load_cornerstone_child_scripts',50);

?>

[azzcatdesign]