FoundationPress for beginners

FoundationPress for beginners

The theme development process in FoundationPress is more streamlined than many other and traditional WordPress themes.

This is advantageous as soon as you master the tools you have at your disposal. But it may seem confusing at first. In this article I’ll attempt to demystify the mystery behind the tools we use in FoundationPress, such as git, npm, Sass and Gulp. Sounds good? Ok, let’s go.

First things first.

Most people who have developed WordPress themes (or websites that use other technologies, for that matter) may have experienced that planning and good structure of assets in the project provides a tremendous gain in the long term.

I know it might be tempting to just hack on the style.css and functions.php to get started quickly as hell.

We’ve all been there. Quick solutions. Inhuman deadlines and tight budgets. But that does not mean the bad solutions are the best. With a decent starter-theme, you’ll be able to kickstart your projects with a set of tools that can help you create maintainable, fast, modern and responsive sites.

Ok. Since you’re still reading, we can jump into a quick explanation of what’s what.

git – version control

Git is a version control system. We use it to keep track of all changes in our project. You don’t have to use git in order to develop a WordPress theme with FoundationPress. You don’t need to wear a seat belt when driving your car, either. But it’s certainly wise to use a seat belt if you crash.

Similarly, it’s always recommended to have your files under source control when developing. Then you will be able to roll back to where you were before things went to hell. So unless you’re Chuck Norris – use git (or a similar tool).

Here is a good writeup on how to get started with git.

npm – package manager

Node.js’ package system, npm, is the largest ecosystem of open source libraries in the world. It runs through the command line and manages dependencies for our website.

In order to use npm, you will need to have Node.js installed on your system. Grab it here.

When you have cloned (or downloaded) FoundationPress, you will need to install it. In practice this means that the dependencies listed in package.json should be downloaded and put in the right place. To to that, all you have to do is open your terminal, browse to your FoundationPress folder and type npm install. Simple as that.

Sass – CSS with superpowers

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. When using sass, you have access to everything you’re used to with vanilla CSS, as well as functions, variables, mixins etc.

Everything you need to know on how to use Sass with Foundation, can be found here.

Gulp – the task runner

Why use a task runner, you might say? Well, that’s because it will save you a lot of work by automating repetetive tasks like minification, compilation, linting etc. In FoundationPress the gulpfile is set up for you. So you will not have to spend a lot of time configuring it, unless you feel like it.

The gulp tasks in FoundationPress can be run as npm scripts, in order to avoid having global dependencies. Stefan Judis has written a blog post explaining why this is sweet.

The build, watch and package tasks

While you develop, you will naturally have an organized file structure with styles and scripts. The build task arrange it so that your working files are compiled and minified into one file for scripts and one file for styles.

Fewer http requests and smaller file sizes means that your website will be perceived as significantly faster.

To run a build, simply open your terminal and type npm run build.

While working on your project, type npm run watch.

When you are finished on your project and ready for deployment, type
npm run package. This will create a folder called packaged, which will contain a .zip file containing only those files that are required in production. Dev dependencies such as node_modules will not be needed to be uploaded on the server, as they are only useful during development.

Last but not least

Good luck! If you encounter any challenges along the way, do not be afraid to post an issue on the FoundationPress repository at Github.

  • Jonas

    I read your post for four times and tried everything but i didn’t get how to integrate this theme in a normal WP install. Can you provide a step by step explanation, like:

    Install WP on your Webserver, download Foundationpress, execute things with terminal, upload files via FTP, active theme…..

    Thank you!!

    • Suiko6272

      First save yourself tons of headaches and just download InstantWP if your on windows or mamp for mac or another local dev server option. It’ll save you tons of headaches in the long run, you won’t waste time FTPing every change and you can dev for the web offline.

      Towards your request

      Have WordPress installed (local or web server), download FoundationPress, run “npm run install”, have it inside your Theme folder (local server or ftp to web server), activate theme through /wp-admin

      Now I’ll assume your completely new to Grunt, NPM and SASS. This is a great post to just start understanding grunt & SASS but it’ll be 10x easier if you get the local dev server first.

      https://24ways.org/2013/grunt-is-not-weird-and-hard/

      • Jonas

        Thank you for answering.
        The links you have provided help a lot – thank You!
        I will tell you if I understand everything.

        Greets from Germany!

        • Jonas

          Hey!
          Now everything has worked fine! Thank you!!
          Another question:
          Is there a Way to integrate Codekit in the process?
          I have seen this tool today and i would like to use it in my environment.

          • Suiko6272

            Sorry for not seeing this xD You can use Codekit and there’s plenty of guides out there so I hope you found one. Personally I just use the command tool as once you get your grunt file correctly set-up the only commands you need often are “npm install [something]” “Grunt” & “Grunt build”.

  • mbm

    Really liking this so far and all of the work that went into it, but I’m stuck on how to customize the output of the package that gets made when using npm run package. I’m using this to develop a custom theme and don’t want to package this up as “FoundationPress” each time. Where is this set? Thanks!

    • You can customize the name of the packaged .zip (the output of npm run package) in Gruntfile.js line 12, if that’s what you mean.

  • Chris Baptie

    Tight package.

    I have noticed that since this comes set up as a git repository I am facing the issue of how to integrate workflow wise with my project that is already a git repository.

    A bit of investigation has led to a couple of possible ways to go including git’s submodule support, but for the small project I’m working on its feeling a bit heavy handed.

    Any suggestions?

    • Chris Baptie

      Just thought I’d mention – I’ve opted for now to assimilate the theme into my other repository. Happy to hear any reasons this is a good / bad idea…

      • I would have done the same. Sounds like a good idea.

        • Chris Baptie

          Cool, thanks!

          • Chris, I’m curious what you “assimilation” looks like from a theme deployment perspective. I’m used to setting up automation tools to deploy the Git repository directly to the server after testing. FoundationPress has a lot of development pieces that don’t need to be on the server, the npm package task gives you a zip file which I’m not sure that’s what I want to use for deployment. I’m really interested what kind of workflow others are using to develop, manage their source, and deploy FoundationPress themes.

  • joel

    This references Grunt, but the package has Gulp. Is that the only difference between this article and the git repo?

    • Hi Joel. We switched from using Grunt to Gulp when we updated to Foundation 6. I have updated the text now. Everything else in this blogpost is still relevant and up to date with the latest version available in the git repo. Thanks for the heads up.

      • leitecarvalho

        at the beginning you have “FoundationPress, such asgit, npm, Sass and Grunt”. also change this maybe?

      • Shayda Schilleman

        The front page still says Grunt.

  • Nick

    I know version control is important, but is there a way to grab a copy of FoundationPress independently, if one wanted to?

    • Sure, you can download the latest version from Github as a zip file: Github https://github.com/olefredrik/FoundationPress/archive/master.zip

      If you don’t need version tracking and the remote connection to the FoundationPress Github repository, you can simply delete the .git folder :)

      • Nick

        When I go to compress the scss for foundation it give me the error:
        Error: File to import not found or unreadable: ../../components/foundation-sites/scss/util/util.
        I am a little new to some of this so sorry if these are dumb questions, but I am doing something wrong for sure.

  • FragaGeddon

    I’ve downloaded the file and put it in the themes folder (unzipped).
    Then I use the node.js command prompt (v4.2.6), but I’m running into errors.

    npm ERR! Windows_NT 10.0.10240

    npm ERR! argv “C:\Program Files\nodejs\node.exe” “C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js” “install”

    npm ERR! node v4.2.6

    npm ERR! npm v2.14.12

    npm ERR! code ELIFECYCLE

    npm ERR! foundationpress@2.3.0 postinstall: `bower install && gulp build`

    npm ERR! Exit status 1

    npm ERR!

    npm ERR! Failed at the foundationpress@2.3.0 postinstall script ‘bower install && gulp build’.

    npm ERR! This is most likely a problem with the foundationpress package,

    npm ERR! not with npm itself.

    npm ERR! Tell the author that this fails on your system:

    npm ERR! bower install && gulp build

    npm ERR! You can get their info via:

    npm ERR! npm owner ls foundationpress

    npm ERR! There is likely additional logging output above.

    npm ERR! Please include the following file with any support request:

    npm ERR! c:wampwwwwp-contentthemesFoundationPressnpm-debug.log

  • Unknown

    I have installed it all correctly but for some reason none of the css is being shown. Seems like the scss file is not pulling through as a css file.

    • Unknown

      I am getting this error installing or building using npm:

      npm ERR! foundationpress@2.4.0 postinstall: `bower install && gulp build`

      npm ERR! Exit status 8

      npm ERR!

      npm ERR! Failed at the foundationpress@2.4.0 postinstall script.

      npm ERR! This is most likely a problem with the foundationpress package,

      npm ERR! not with npm itself.

      npm ERR! Tell the author that this fails on your system:

      npm ERR! bower install && gulp build

      npm ERR! You can get their info via:

      npm ERR! npm owner ls foundationpress

      npm ERR! There is likely additional logging output above.

      npm ERR! System Linux 2.6.32-042stab108.8

      npm ERR! command “/usr/local/bin/node” “/usr/local/bin/npm” “install”

      npm ERR! cwd /var/www/vhosts/XXX/httpdocs/wp-content/themes/FoundationPress

      npm ERR! node -v v0.10.30

      npm ERR! npm -v 1.4.21

      npm ERR! code ELIFECYCLE

      npm ERR!

      npm ERR! Additional logging details can be found in:

      npm ERR! /var/www/vhosts/XXX/httpdocs/wp-content/themes/FoundationPress/npm-debug.log

      npm ERR! not ok code 0

      • labanino

        Happened to me! Even though I had npm installed globally on my machine you had to run `npm install` in the FoundationPress directory:

        $ cd my-wordpress-folder/wp-content/themes/
        $ git clone https://github.com/olefredrik/FoundationPress.git
        $ cd FoundationPress
        $ npm install

  • Will Moody

    Hello
    This is my first attempt at using FoundationPress but I have run into an problem.

    I have tried three separate clean installs using the clone,npm install, npm run watch method and each time i get the following error:-

    -clientnode_moduleswsnode_modulesbufferutil>node “C:Program Filesnodejsnode_modulesnpmbinnode-gyp-bin\….node_modulesnode-gypbinnode-gyp.js” rebuild
    gyp ERR! configure error
    gyp ERR! stack Error: Can’t find Python executable “python”, you can set the PYTHON env variable.
    gyp ERR! stack at failNoPython (C:Program Filesnodejsnode_modulesnpmnode_modulesnode-gyplibconfigure.js:120:14)
    gyp ERR! stack at C:Program Filesnodejsnode_modulesnpmnode_modulesnode-gyplibconfigure.js:83:11
    gyp ERR! stack at Object.oncomplete (fs.js:107:15)
    gyp ERR! System Windows_NT 6.2.9200
    gyp ERR! command “node” “C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js” “rebuild”
    gyp ERR! cwd C:UsersWillDocumentsWeb DesignWordpresswp-contentthemesFoundationPressnode_modulesbrowser-syncnode_modulessocket.ionode_modulessocket.io-clientnode_modulesengine.io-clientnode_moduleswsnode_modulesbufferutil
    gyp ERR! node -v v0.10.22
    gyp ERR! node-gyp -v v0.11.0
    gyp ERR! not ok
    npm WARN optional dep failed, continuing utf-8-validate@1.2.1
    npm WARN optional dep failed, continuing bufferutil@1.2.1
    npm http GET https://registry.npmjs.org/es6-iterator
    npm http 304 https://registry.npmjs.org/es6-iterator

    > node-sass@3.4.2 install C:UsersWillDocumentsWeb DesignWordpresswp-contentthemesFoundationPressnode_modulesgulp-sassnode_modulesnode-sass
    > node scripts/install.js

    Binary downloaded and installed at C:UsersWillDocumentsWeb DesignWordpresswp-contentthemesFoundationPressnode_modulesgulp-sassnode_modulesnode-sassvendorwin32-x64-11binding.node
    npm http GET https://registry.npmjs.org/nopt
    npm http GET https://registry.npmjs.org/express
    npm http GET https://registry.npmjs.org/underscore
    npm http 304 https://registry.npmjs.org/nopt
    npm http 304 https://registry.npmjs.org/express
    npm http 304 https://registry.npmjs.org/underscore
    npm http GET https://registry.npmjs.org/abbrev
    npm http 304 https://registry.npmjs.org/abbrev
    npm http GET https://registry.npmjs.org/connect
    npm http GET https://registry.npmjs.org/qs
    npm http GET https://registry.npmjs.org/mkdirp/0.3.0
    npm http GET https://registry.npmjs.org/mime/1.2.4
    npm http 304 https://registry.npmjs.org/mime/1.2.4
    npm http 304 https://registry.npmjs.org/connect
    npm http 304 https://registry.npmjs.org/qs
    npm http 304 https://registry.npmjs.org/mkdirp/0.3.0
    npm http GET https://registry.npmjs.org/formidable
    npm http 304 https://registry.npmjs.org/formidable

    > node-sass@3.4.2 postinstall C:UsersWillDocumentsWeb DesignWordpresswp-contentthemesFoundationPressnode_modulesgulp-sassnode_modulesnode-sass
    > node scripts/build.js

    ` C:UsersWillDocumentsWeb DesignWordpresswp-contentthemesFoundationPressnode_modulesgulp-sassnode_modulesnode-sassvendorwin32-x64-11binding.node ` exists.
    testing binary.
    Binary is fine; exiting.

    > foundationpress@2.4.0 postinstall C:UsersWillDocumentsWeb DesignWordpresswp-contentthemesFoundationPress
    > bower install && gulp build

    bower cached git://github.com/FortAwesome/Font-Awesome.git#4.4.0
    bower validate 4.4.0 against git://github.com/FortAwesome/Font-Awesome.git#~4.4.0
    bower cached git://github.com/zurb/motion-ui.git#1.1.1
    bower validate 1.1.1 against git://github.com/zurb/motion-ui.git#~1.1.0
    bower cached git://github.com/zurb/foundation-sites.git#6.1.2
    bower validate 6.1.2 against git://github.com/zurb/foundation-sites.git#~6.1.0
    bower cached git://github.com/jquery/jquery-dist.git#2.1.4
    bower validate 2.1.4 against git://github.com/jquery/jquery-dist.git#~2.1.4
    bower cached git://github.com/ten1seven/what-input.git#1.1.4
    bower validate 1.1.4 against git://github.com/ten1seven/what-input.git#~1.1.2
    bower install motion-ui#1.1.1
    bower install jquery#2.1.4
    bower install fontawesome#4.4.0
    bower install foundation-sites#6.1.2
    bower install what-input#1.1.4

    motion-ui#1.1.1 assetscomponentsmotion-ui
    └── jquery#2.1.4

    jquery#2.1.4 assetscomponentsjquery

    fontawesome#4.4.0 assetscomponentsfontawesome

    foundation-sites#6.1.2 assetscomponentsfoundation-sites
    ├── jquery#2.1.4
    └── what-input#1.1.4

    what-input#1.1.4 assetscomponentswhat-input
    [17:05:19] Using gulpfile ~DocumentsWeb DesignWordpresswp-contentthemesFoundationPressgulpfile.js
    [17:05:19] Starting ‘clean’…
    [17:05:19] Starting ‘clean:javascript’…
    [17:05:19] Starting ‘clean:css’…
    [17:05:19] Finished ‘clean:javascript’ after 10 ms
    [17:05:19] Finished ‘clean:css’ after 6.7 ms
    [17:05:19] Finished ‘clean’ after 18 ms
    [17:05:19] Starting ‘build’…
    [17:05:19] Starting ‘copy’…
    [17:05:19] Finished ‘copy’ after 403 ms
    [17:05:19] Starting ‘sass’…
    [17:05:22] Starting ‘javascript’…
    [17:05:22] Starting ‘lint’…
    [17:05:23] Finished ‘lint’ after 873 ms
    [17:05:23] Finished ‘javascript’ after 1.67 s

    C:UsersWillDocumentsWeb DesignWordpresswp-contentthemesFoundationPressnode_modulesgulp-autoprefixernode_modulespostcssliblazy-result.js:157
    this.processing = new Promise(function (resolve, reject) {
    ^
    ReferenceError: Promise is not defined
    at LazyResult.async (C:UsersWillDocumentsWeb DesignWordpresswp-contentthemesFoundationPressnode_modulesgulp-autoprefixernode_modulespostcssliblazy-result.js:157:31)
    at LazyResult.then (C:UsersWillDocumentsWeb DesignWordpresswp-contentthemesFoundationPressnode_modulesgulp-autoprefixernode_modulespostcssliblazy-result.js:79:21)
    at DestroyableTransform._transform (C:UsersWillDocumentsWeb DesignWordpresswp-contentthemesFoundationPressnode_modulesgulp-autoprefixerindex.js:24:6)
    at DestroyableTransform.Transform._read (C:UsersWillDocumentsWeb DesignWordpresswp-contentthemesFoundationPressnode_modulesgulp-autoprefixernode_modulesthrough2node_modulesreadable-streamlib_stream_transform.js:172:10)
    at DestroyableTransform.Transform._write (C:UsersWillDocumentsWeb DesignWordpresswp-contentthemesFoundationPressnode_modulesgulp-autoprefixernode_modulesthrough2node_modulesreadable-streamlib_stream_transform.js:160:12)
    at doWrite (C:UsersWillDocumentsWeb DesignWordpresswp-contentthemesFoundationPressnode_modulesgulp-autoprefixernode_modulesthrough2node_modulesreadable-streamlib_stream_writable.js:335:12)
    at writeOrBuffer (C:UsersWillDocumentsWeb DesignWordpresswp-contentthemesFoundationPressnode_modulesgulp-autoprefixernode_modulesthrough2node_modulesreadable-streamlib_stream_writable.js:321:5)
    at DestroyableTransform.Writable.write (C:UsersWillDocumentsWeb DesignWordpresswp-contentthemesFoundationPressnode_modulesgulp-autoprefixernode_modulesthrough2node_modulesreadable-streamlib_stream_writable.js:248:11)
    at DestroyableTransform.ondata (C:UsersWillDocumentsWeb DesignWordpresswp-contentthemesFoundationPressnode_modulesgulp-sassnode_modulesthrough2node_modulesreadable-streamlib_stream_readable.js:583:20)
    at DestroyableTransform.EventEmitter.emit (events.js:95:17)

    npm ERR! foundationpress@2.4.0 postinstall: `bower install && gulp build`
    npm ERR! Exit status 8
    npm ERR!
    npm ERR! Failed at the foundationpress@2.4.0 postinstall script.
    npm ERR! This is most likely a problem with the foundationpress package,
    npm ERR! not with npm itself.
    npm ERR! Tell the author that this fails on your system:
    npm ERR! bower install && gulp build
    npm ERR! You can get their info via:
    npm ERR! npm owner ls foundationpress
    npm ERR! There is likely additional logging output above.
    npm ERR! System Windows_NT 6.2.9200
    npm ERR! command “C:\Program Files\nodejs\\node.exe” “C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js” “install”
    npm ERR! cwd C:UsersWillDocumentsWeb DesignWordpresswp-contentthemesFoundationPress
    npm ERR! node -v v0.10.22
    npm ERR! npm -v 1.3.14
    npm ERR! code ELIFECYCLE
    npm ERR!
    npm ERR! Additional logging details can be found in:
    npm ERR! C:UsersWillDocumentsWeb DesignWordpresswp-contentthemesFoundationPressnpm-debug.log
    npm ERR! not ok code 0

    C:UsersWillDocumentsWeb DesignWordpresswp-contentthemesFoundationPress>npm run watch

    > foundationpress@2.4.0 watch C:UsersWillDocumentsWeb DesignWordpresswp-contentthemesFoundationPress
    > gulp

    [17:05:59] Using gulpfile ~DocumentsWeb DesignWordpresswp-contentthemesFoundationPressgulpfile.js
    [17:05:59] Starting ‘clean’…
    [17:05:59] Starting ‘clean:javascript’…
    [17:05:59] Starting ‘clean:css’…
    [17:05:59] Finished ‘clean:css’ after 7.85 ms
    [17:05:59] Finished ‘clean:javascript’ after 17 ms
    [17:05:59] Finished ‘clean’ after 22 ms
    [17:05:59] Starting ‘build’…
    [17:05:59] Starting ‘copy’…
    [17:05:59] Finished ‘copy’ after 347 ms
    [17:05:59] Starting ‘sass’…
    [17:06:01] Starting ‘javascript’…
    [17:06:01] Starting ‘lint’…
    [17:06:02] Finished ‘lint’ after 668 ms
    [17:06:02] Finished ‘javascript’ after 1.26 s

    C:UsersWillDocumentsWeb DesignWordpresswp-contentthemesFoundationPressnode_modulesgulp-autoprefixernode_modulespostcssliblazy-result.js:157
    this.processing = new Promise(function (resolve, reject) {
    ^
    ReferenceError: Promise is not defined
    at LazyResult.async (C:UsersWillDocumentsWeb DesignWordpresswp-contentthemesFoundationPressnode_modulesgulp-autoprefixernode_modulespostcssliblazy-result.js:157:31)
    at LazyResult.then (C:UsersWillDocumentsWeb DesignWordpresswp-contentthemesFoundationPressnode_modulesgulp-autoprefixernode_modulespostcssliblazy-result.js:79:21)
    at DestroyableTransform._transform (C:UsersWillDocumentsWeb DesignWordpresswp-contentthemesFoundationPressnode_modulesgulp-autoprefixerindex.js:24:6)
    at DestroyableTransform.Transform._read (C:UsersWillDocumentsWeb DesignWordpresswp-contentthemesFoundationPressnode_modulesgulp-autoprefixernode_modulesthrough2node_modulesreadable-streamlib_stream_transform.js:172:10)
    at DestroyableTransform.Transform._write (C:UsersWillDocumentsWeb DesignWordpresswp-contentthemesFoundationPressnode_modulesgulp-autoprefixernode_modulesthrough2node_modulesreadable-streamlib_stream_transform.js:160:12)
    at doWrite (C:UsersWillDocumentsWeb DesignWordpresswp-contentthemesFoundationPressnode_modulesgulp-autoprefixernode_modulesthrough2node_modulesreadable-streamlib_stream_writable.js:335:12)
    at writeOrBuffer (C:UsersWillDocumentsWeb DesignWordpresswp-contentthemesFoundationPressnode_modulesgulp-autoprefixernode_modulesthrough2node_modulesreadable-streamlib_stream_writable.js:321:5)
    at DestroyableTransform.Writable.write (C:UsersWillDocumentsWeb DesignWordpresswp-contentthemesFoundationPressnode_modulesgulp-autoprefixernode_modulesthrough2node_modulesreadable-streamlib_stream_writable.js:248:11)
    at DestroyableTransform.ondata (C:UsersWillDocumentsWeb DesignWordpresswp-contentthemesFoundationPressnode_modulesgulp-sassnode_modulesthrough2node_modulesreadable-streamlib_stream_readable.js:583:20)
    at DestroyableTransform.EventEmitter.emit (events.js:95:17)

    npm ERR! foundationpress@2.4.0 watch: `gulp`
    npm ERR! Exit status 8
    npm ERR!
    npm ERR! Failed at the foundationpress@2.4.0 watch script.
    npm ERR! This is most likely a problem with the foundationpress package,
    npm ERR! not with npm itself.
    npm ERR! Tell the author that this fails on your system:
    npm ERR! gulp
    npm ERR! You can get their info via:
    npm ERR! npm owner ls foundationpress
    npm ERR! There is likely additional logging output above.
    npm ERR! System Windows_NT 6.2.9200
    npm ERR! command “C:\Program Files\nodejs\\node.exe” “C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js” “run” “watch”
    npm ERR! cwd C:UsersWillDocumentsWeb DesignWordpresswp-contentthemesFoundationPress
    npm ERR! node -v v0.10.22
    npm ERR! npm -v 1.3.14
    npm ERR! code ELIFECYCLE
    npm ERR!
    npm ERR! Additional logging details can be found in:
    npm ERR! C:UsersWillDocumentsWeb DesignWordpresswp-contentthemesFoundationPressnpm-debug.log
    npm ERR! not ok code 0

    C:UsersWillDocumentsWeb DesignWordpresswp-contentthemesFoundationPress>

    How can I overcome this issue please?

  • Thanx for this perfect framework. But got a question. Why don’t you display categories? I only see tags in the template

  • designwebuk

    This is a great resource, thank you so much, for putting this together.

    One question though:
    I have downloaded and followed your instructions and everything seems to be running smooth, but when I uploaded the theme to a live staging server, the CSS and Javascript files all broken URLs due to doubling. I didn’t run package, rather just run build. I want to work directly with the staging server as I have a GIT repository attached to that server. I prefer working that way than having a localhost server.

    Any clues to why I am getting this problem?

  • alvar sirlin

    Noob question. I had to remove git, because I have the whole wp site git versioned (submodules are a bit over my head). There’s no easy way to update foundationPress without git correct?

  • vlaar

    Noob question. Is it possible to update this project easily without git? NPM or something else?
    Since the whole site is already under a git repo, can’t keep the theme versioned I believe.

  • Hi thanks a lot for this. I noticed the theme folder gets pretty big with all the node dependencies. Which folders should I keep in a git repo?

    • OK I just noticed the .gitignore file and answered my own question :D

  • Felix Blackburn

    It refused to install until I removed the assets/fonts/*, then all was good. The install script fails often so fonts are already there while it tries to copy them over resulting in error.

  • tk2727

    Anyone have success installing this on ubuntu?

    sh: 1: node: not found
    foundationpress@2.6.2 /var/www/html/wp-content/themes/FoundationPress

    then a list of directories then:

    npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
    npm WARN notsup Not compatible with your operating system or architecture: fsevents@1.0.14
    npm ERR! Linux 4.4.0-34-generic
    npm ERR! argv “/usr/bin/nodejs” “/usr/bin/npm” “install”
    npm ERR! node v4.2.6
    npm ERR! npm v3.5.2
    npm ERR! file sh
    npm ERR! code ELIFECYCLE
    npm ERR! errno ENOENT
    npm ERR! syscall spawn

    npm ERR! node-sass@3.8.0 install: `node scripts/install.js`
    npm ERR! spawn ENOENT
    npm ERR!
    npm ERR! Failed at the node-sass@3.8.0 install script ‘node scripts/install.js’.
    npm ERR! Make sure you have the latest version of node.js and npm installed.
    npm ERR! If you do, this is most likely a problem with the node-sass package,
    npm ERR! not with npm itself.
    npm ERR! Tell the author that this fails on your system:
    npm ERR! node scripts/install.js
    npm ERR! You can get information on how to open an issue for this project with:
    npm ERR! npm bugs node-sass
    npm ERR! Or if that isn’t available, you can get their info via:
    npm ERR! npm owner ls node-sass
    npm ERR! There is likely additional logging output above.

    npm ERR! Please include the following file with any support request:
    npm ERR! /var/www/html/wp-content/themes/FoundationPress/npm-debug.log

  • tk2727

    i get this error on OS X when running build/package commands

    npm ERR! Darwin 15.3.0

    npm ERR! argv “/usr/local/Cellar/node/5.7.1/bin/node” “/usr/local/bin/npm” “run” “build”

    npm ERR! node v5.7.1

    npm ERR! npm v3.6.0

    npm ERR! path /Applications/MAMP/htdocs/wordpress/package.json

    npm ERR! code ENOENT

    npm ERR! errno -2

    npm ERR! syscall open

    npm ERR! enoent ENOENT: no such file or directory, open ‘/Applications/MAMP/htdocs/wordpress/package.json’

    npm ERR! enoent ENOENT: no such file or directory, open ‘/Applications/MAMP/htdocs/wordpress/package.json’

    npm ERR! enoent This is most likely not a problem with npm itself

    npm ERR! enoent and is related to npm not being able to find a file.

    npm ERR! enoent

    npm ERR! Please include the following file with any support request:

    npm ERR! /Applications/MAMP/htdocs/wordpress/npm-debug.log

  • Scott Farmer

    you have to run

    npm rebuild node-sass

    just put in command line and go. Once that runs just run

    npm install

    Hope this helps

  • Ethan Lofton

    I get this error on os x with npm installed via homebrew, what to try next?:

    > bower install && gulp build

    module.js:472
    throw err;
    ^

    Error: Cannot find module ‘internal/fs’
    at Function.Module._resolveFilename (module.js:470:15)
    at Function.Module._load (module.js:418:25)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at evalmachine.:17:20
    at Object. (/Users/ethan/Web/5dland.com/wp-content/themes/5DFoundation/node_modules/bower/node_modules/graceful-fs/fs.js:11:1)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)

    npm ERR! Darwin 15.6.0
    npm ERR! argv “/usr/local/Cellar/node/7.3.0/bin/node” “/usr/local/bin/npm” “install”
    npm ERR! node v7.3.0
    npm ERR! npm v3.10.10
    npm ERR! code ELIFECYCLE
    npm ERR! foundationpress@2.9.0 postinstall: `bower install && gulp build`
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the foundationpress@2.9.0 postinstall script ‘bower install && gulp build’.
    npm ERR! Make sure you have the latest version of node.js and npm installed.
    npm ERR! If you do, this is most likely a problem with the foundationpress package,
    npm ERR! not with npm itself.
    npm ERR! Tell the author that this fails on your system:
    npm ERR! bower install && gulp build
    npm ERR! You can get information on how to open an issue for this project with:
    npm ERR! npm bugs foundationpress
    npm ERR! Or if that isn’t available, you can get their info via:
    npm ERR! npm owner ls foundationpress
    npm ERR! There is likely additional logging output above.

    npm ERR! Please include the following file with any support request:
    npm ERR! /Users/ethan/Web/5dland.com/wp-content/themes/5DFoundation/npm-debug.log

  • Pingback: How to pick a WordPress starter theme - Developer Drive()

  • Pingback: How to pick a WordPress starter theme - WordPress Design & Development()

  • I’m curious why assets/stylesheets/ and the rest are in the .gitignore. When I build locally everything will work but when I push to a prod environment I’ll glitch out because I’m missing foundation.css – I was just going to comment out the offending the lines but I’m thinking I might be missing something here (like is the idea to run a node server or something)?

    • Hi. These files you’re referring to are basically compiled files which are not needed to have under version control in a development context. But you’re totally right, this might be non-ideal in your kind of workflow. Just remove the ignored files you would like to track and make it fit your needs :)

  • Pingback: w11 begin met wordpress framework – Stage()

  • Lachlan Menzies

    Just used FP for the first time for a client’s website. Very easy to use and nice includes with things like fontawesome and the addition of browsersync!!! thanks ole Fredrik! will be using for my future builds!

  • Pingback: 22 Most Popular WordPress Starter Themes For Your Next Project 2017 - Colorlib()

  • myles

    Hi Ole,
    My client is using PHP 5.3.3 on an installed (wp4.7.3) site which I am told was once working OK … but is currently manifesting some issues. (Division by zero php error …wp-contentthemesFoundationPresspage-templatespage-full-width.php on line 61)
    Is there a list of PHP versions which this theme has been tested with?
    PS Line 61 is “$percentage = $difference * 100 / $time;”
    Thanks for reading …

    • Hi. This is probably not the best place to post issues. Please head over to Github and post it as an issue. Please use the issue template, as it makes it easier to help you this way.

      Thanks!

  • Hoping someone can help with this. I’ve used FoundationPress a lot recently but on a Mac development environment. It has worked fine. However, I’m now on Windows 10 and something isn’t right!

    Using Local by Flywheel as the local server. Have Node.JS and GCC installed. I’ve been able to clone the repository and install with npm. When I then run ‘npm start’, I get the usual feedback via command prompt (no errors), and the site auto-loads in the browser.

    However, no changes in the SASS files are then processed. I’ve tried disabling caching in the browser, have terminated and restarted npm, but to no avail. The bizarre thing is, if I check the compiled app.css I can see the changes I’m making, but they just aren’t reflecting on the site. (Inspecting the source via Chrome Developer Tools shows the original, unedited SCSS file).

    Is this an issue with BrowserSync? Any ideas how to resolve?

    • Hi, I’d like to help you out.

      Could you please post this as an issue on Github, and I’ll look into it:
      https://github.com/olefredrik/FoundationPress/issues

      Thanks! :)

      • Thanks for that – I’m looking at posting shortly. I just thought of something else to test first though – I’m conscious that, whilst I’ve used Local by Flywheel on both Mac and PC, this may be an issue on Windows. I am testing a development environment now that uses Apache rather than Nginx – this might be a long-shot, but I wondered whether Nginx’s caching may be causing this problem as I can’t see how else this could be falling down. I’ll reply here if that works, otherwise, I’ll post as an issue on Github. Thanks for the reply!

        • Bizarrely, that seems to have worked. Using the Apache set-up on Local rather than Nginx appears to have resolved this issue completely – wish I tried it sooner! I’m going to test further just to make sure. Thanks again!

          • Glad it worked out for you! Cheers :)

          • Thanks! Just wish I’d thought of this a couple of days ago when I was, in between pulling my hair out, trying everything from re-installing Node.js through to checking all the paths, environment variables, etc. Just glad it’s working now. I’ll notify the folks over at Flywheel community forum just in case anyone else is having a similar issue (as I guess it would manifest in similar set-ups, not just FoundationPress). Thanks again for your help with this! Cheers, Andy.