File Structure

Sass Version


styles.css – A file required by WordPress, but not used.

assets/scss/style.scss – Import all of your Sass files here. This file also imports all Foundation styles from the vendor directory. You can remove whatever components you don’t plan on using.

assets/scss/_main.scss – This is where you will put most of your custom styles

assets/scss/_settings.scss – Override Foundation styles and variables

assets/css/*.css – This is where all of the Sass files will compile. Don’t edit these files directly as they will be overwritten anytime you compile your Sass.


assets/js/foundation.js – Foundation JS files. If you’re using Gulp, this compiles all Foundation JavaScript components from vendor/foundation-sites/js. You can select which components you want by making adjustments to the gulpfile.js. This file also comes in a minified form.

assets/js/scripts.js – This is where all of your custom JavaScript will go. If you’re using Gulp, this compiles all Foundation JavaScript components from assets/js/scripts.. This file also comes in a minified form.

assets/js/scripts/*.js – If you’re using Gulp, you can place all of your custom JS files here and they will be compiled into the assets/js/scripts.js file.


vendor/ – All vendor files are located here. It is not recommended to make changes to these files (except when updating).

CSS Version

styles.css – A file required by WordPress, but not used.

assets/css/style.css – Place custom styles here.

assets/js/scripts.js – Place JavaScript here.

vendor/ – Foundation and other vendor files are loaded from here. It is not recommended to make changes to these files (except when updating).

  • Bjarni Wark

    How would you upgrade Foundation for example v6.0.5 to v6.1? Would this be done if using Codekit via the Installed Assets panel or does this need to be manually done?

    Nice work by the way!


    Does one just read this page 🙂

    • Jeremy Englert

      CodeKit has a hard time finding the assets as they are not located in a bower_components folder. You can do update manually by using these instructions:

      Or you can update using Bower:

      If you update using Bower, you will then be able to use CodeKit to update moving forward. It only needs to be done “manually” using Bower the first time, then CodeKit should be able to find the assets.

      • Bjarni Wark

        Thanks, will look into it.

  • Ken Mau

    I’m having some issues creating a child theme that overrides the style.css. Wouldn’t I use

    add_action( ‘wp_enqueue_scripts’, ‘enqueue_parent_theme_style’ );
    function enqueue_parent_theme_style() {
    wp_enqueue_style( ‘parent-style’, get_template_directory_uri().’/assets/css/style.css’ );

    and just create a style.css on the child theme folder?

    • Jeremy Englert

      I would avoid using a child theme if you can – there’s no real benefit when using Joints.

      You may need to edit the enqueue-scripts.php file to be “child theme friendly”. by Changing get_stylesheet_directory_uri() to get_template_directory_uri().

      • Ken Mau

        Ahhh I see. So I should just make all the edits within the template that I download straight from the website?

        • Jeremy Englert

          That’s the way I recommend using the theme. Make it your own. The only thing that will ever really update is the Foundation version – but you can do that directly in the theme itself.

          • Ken Mau

            I see. Thank you for your help! About to dive into this for the first time 🙂

  • Shelly Caldwell

    I’m going to use Koala to compile the css (and I am a complete noob) and so I need to select the file that will be compiled and I need to select the file that the styles get dumped into. Do I select the assetsscssstyle.scss AND THEN…? Do I create a new css sheet in assetscss and have it dump to that? I’m confused by your:

    And I really don’t know what I’m doing. I’m trying to learn Foundation & SASS at the same time and I’m pretty rusty at building my own WP themes in basic PHP/CSS…

    Why am I using Koala? Well, it seemed a bit easier than Gulp and I’m probably a ways away from being able to successfully use a task runner. Plus –
    I tried to install Gulp, but I am unable to find my damn project folder in the command line. I did get it globally installed! I’m going to celebrate by curling up in a little ball and crying.

  • Jon Piehl

    I’m trying to minimize the files stored on my live server, so what files/directories are required to run this theme in production?