Envelope

Introducing Heisenberg, our starter theme for WordPress

Jacob Arriola

Heisenberg WordPress theme imageYou may have seen our fearless leader Steve Zehngut’s presentation at WordCamp Orange County last year about how we use Auttomatic’s Underscores and ZURB’s Foundation as the basis for the custom WordPress themes we produce. Since Steve’s WordCamp talk, we’ve continued to iterate our starter theme. We’ve packaged it together and released it on GitHub — please allow us to introduce you to Heisenberg. Now, let’s cook.

This starter theme uses the Sass version of Foundation because it gives you a more robust ability to control your theme not only through Foundation’s presentational classes, but also through its mixins.

How to get started

Install Foundation Sites and Gulp Modules via NPM

  1. Clone or download the project onto your themes directory (.wp-content/themes)
  2. From the theme directory, run npm install. All of the theme dependencies will be installed into node_modules
  3. Run a find-and-replace to remove the heisenberg slug/string throughout with your project/theme name
  4. Run gulp

Follow the project on GitHub

We’re actively developing the starter theme, so the best way to stay current with instructions and such is to view the project on GitHub.

Issues

If you run into any issues or have questions, please don’t hesitate to open a support request and we’ll get to it as soon as possible.

Want to Contribute?

We love contributions! ? ? To contribute:

  1. Clone the repository
  2. Create a new branch off of master
  3. Commit your changes
  4. Open a pull request

29 Comments

  1. unfortunately, after installing the theme and other files as above, when i attempt to view in the browser i’m getting error:

    Fatal error: Call to undefined function get_header()

    referencing the index.php file. strange because there’s obviously a header.php file in the theme, and i can’t seem to locate a bad call anywhere to a file that doesn’t exist. i haven’t made any changes to the theme files out of the box except for the installations as described here.

    any suggestions?

    1. Codekit has a lot, but it doesn’t have Node.js.

      Once you install that, the rest of the steps should work. Let us know here if you get stuck on any of the steps, and I will adjust the instructions where necessary.

    2. Yes, Ben. Node.js is what is required – we are updating the readme to reflect that we are using the libsass version and not the Ruby version.

  2. I’m getting the following when I run ‘sudo npm install -g bower’

    This doesn’t look good to me, do you know?

    /usr/local/bin/bower -> /usr/local/lib/node_modules/bower/bin/bower
    npm WARN unmet dependency /usr/local/lib/node_modules/npm/node_modules/npmconf requires semver@’2′ but will load
    npm WARN unmet dependency /usr/local/lib/node_modules/npm/node_modules/semver,
    npm WARN unmet dependency which is version 5.0.3
    npm WARN unmet dependency /usr/local/lib/node_modules/npm/node_modules/npmconf requires uid-number@’0.0.5′ but will load
    npm WARN unmet dependency /usr/local/lib/node_modules/npm/node_modules/uid-number,
    npm WARN unmet dependency which is version 0.0.6
    npm WARN unmet dependency /usr/local/lib/node_modules/npm/node_modules/read-package-json/node_modules/normalize-package-data requires semver@’2 || 3′ but will load
    npm WARN unmet dependency /usr/local/lib/node_modules/npm/node_modules/semver,
    npm WARN unmet dependency which is version 5.0.3
    bower@1.6.5 /usr/local/lib/node_modules/bower

    1. I think the problem was that I had Codekit open when I did this because when I thought it might be that and quit the app, then ‘sudo npm install -g bower’ worked, as did the gulp prerequisite.

      When I did the gulp install though it gave this first:

      npm install
      npm WARN package.json Dependency ‘gulp’ exists in both dependencies and devDependencies, using ‘gulp@^3.8.11’ from dependencies

      Is ‘devDependencies’ something that should be changed before running the gulp install?

  3. Everything appears to be installing, but in the instructions it says, “Important: you’ll need to change both the proxy string from ‘heisenberg.dev/’ to your local URL and the container string from ‘heisenberg’ to your project name.”

    I saw and changed the proxy string in the gulpfile.js but I did not see any ‘container string.’ Where would that be? I ran ‘gulp’ in terminal and no error occurred. I got jsHint, Scripts, and Styles task complete!

    1. Hey Ben,

      You no longer need to change the container string on the project. That’s for an older version of Sass we were running that’s no longer in use. We’ve updated this article with the appropriate instructions.

      Thanks!

  4. Thanks so much for this! I’m new to SASS, Foundation, Gulp, Bower … trying to get my head around it. I think I have most things figured out, but I’m having a hard time with Bower. I don’t see a bower.json file in the git repository, and when I run the command to install bower, it tells me it can’t find the file. Any tips for this noob?

    1. Hey there! Thanks for trying it out. We’ve updated our theme to Foundation 6 and aren’t using Bower anymore in favor of NPM. Nothing against Bower, but since we’re already using NPM for Gulp dependencies, we wanted eliminate as many dependencies as we could for theme authors.

      Thanks for pointing this out – I’ll update the post to reflect the new procedure.

      For now, Foundation should install when you run npm install. You should see the foundation-sites directory appear in the node_modules directory in the theme.

      For detailed instructions, view the README.md file in the GitHub repo: https://github.com/ZeekInteractive/heisenberg

  5. Hi there! I’m enjoying using this starter theme a lot! It’s a really great way to get into Foundation for WordPress and start using fun things like Gulp and Sass – it’s been a fairly smooth ride. Just wondered though – do I need to include a menu-walker script to enable foundation menus? Is there a reason why you left this out? Is it to make the package lighter?

    1. Hey Heidi – glad you like it! You’re correct, we purposely didn’t include a Walker Class partly to keep the theme lighter. I do have a walker branch (add-walker) in the repo that I started testing, if you’d like to take a look (https://github.com/ZeekInteractive/heisenberg/blob/add-walker/inc/custom-walker.php). Keep in mind though, it was originally made for Foundation 5, so I suspect things will break if you decide to copy that file onto your theme. Hope that helps!

  6. Hey,

    i’m working on a different sites with your theme, works great!
    After a upgrade to WP 4.5.2 i suddenly got problems with data equalizer and this gives me the following error

    foundation.js?ver=6.1.1:formatted:3386
    Uncaught TypeError: e(…).on is not a function(anonymous function) @ foundation.js?ver=6.1.1:formatted:3386
    (anonymous function) @ foundation.js?ver=6.1.1:formatted:3494
    admin-bar.min.js?ver=4.5.2:1 Uncaught TypeError: this.on is not a functiona.fn.hoverIntent @ admin-bar.min.js?ver=4.5.2:1(anonymous function) @ admin-bar.min.js?ver=4.5.2:1e.resolveWith @ jquery-1.6.1.min.js:16e.extend.ready @ jquery-1.6.1.min.js:16c.addEventListener.z @ jquery-1.6.1.min.js:16

    First i assumed that the jquery version of wp (1.12.3) was the issue… but i cant figure this out 🙁
    Can you point me in the right direction?

    tnx in advance
    Bas

    1. Hey Bas,

      Thanks for using the theme!

      Unfortunately, I’m not able to reproduce this.

      Where are you seeing this error? Is it in the browser console or in your Terminal (gulp)?

      Also, I ran into Foundation JS compilation errors with Babel and ES6 when using Foundation 6.2.2, which is why I’ve set a hard version on 6.2.1. What Foundation version are you using?

    2. Hey Jacob,

      I’ve figured it out, a small script i’m using was including an old version of Jquery 🙁
      Stripped it out and all is working well now. I’ve got a lot to learn 🙂

      Thnx for the great theme

  7. Hey There I’m a bit late to the party, Have just found your Hesienberg starter theme for WordPress and its fantastic, Admitted this is my first time using a scss / gulp workflow, and i have learnt a lot. so thanks for that also!

    I’m trying to include fancybox to the theme, I’ve managed to add the files to the assests directory under js/fancybox

    Created the gulp task to minify the js:

    gulp.task(‘fancybox-js’, function() {
    return gulp.src([

    /* Choose what JS FancyBox Plugins you’d like to use.
    * http://fancyapps.com/fancybox/#instructions
    */

    // Core FancyBox – needed when choosing plugins ala carte
    paths.fancyBox + ‘jquery.fancybox.js’,
    // Choose the individual plugins you want in your project
    paths.fancyBox + ‘jquery.fancybox-buttons.js’,
    paths.fancyBox + ‘jquery.fancybox-media.js’,
    paths.fancyBox + ‘jquery.fancybox-thumbs.js’
    ])
    .pipe(babel({
    presets: [‘es2015’],
    compact: true
    }))
    .pipe(concat(‘jquery.fancybox.js’))
    .pipe(uglify())
    .pipe(gulp.dest(paths.destPath + ‘js’));
    });

    When i load up the home page i see all the js included (using network tab in chrome dev tools) except jquery.fancybox.js, It is correctly gulped and spat out to the dist/js folder as jquery.fancybox.js.
    How do i enqueue the scrpt, i think i read somewhere that all scripts in the js directory are auto included, though i could be wrong… any guidance would be greatly appreciated,

  8. Nevermind i found it!!!

    Also i note when i initially tried to install the theme i got a load of NMP errors which was due to npm trying to load a package that was compatible with mac OS only.//

    I had to downgrade npm to 3.0.7 and use npm install –no-optional

    There were also a few other things i had to do to get it working though i cant remember exactly what now

Leave a Reply

Your email address will not be published. Required fields are marked *