I really like WordPress and I really like Foundation 6 and when I came across this project, JointsWP I couldn’t wait to try it out! I really like the way they built the templates and the included features really work for my workflow.
JointsWP comes in two versions, a compiled CSS version as well as a SASS version. I will be talking about the SASS version in this post as it requires a little setup to use all of it’s features.
Add The Theme To Your WordPress Instalation
I assume that you are using some sort of local development stack, I’m using MAMP, and that you have WordPress already installed. I also assume that you have Git and Node.js on your system.
You can clone the project by navigating to the GitHub project page https://github.com/JeremyEnglert/JointsWP and locating the clone URL or just use this command. Make sure you are at your WordPress themes folder /wp-content/themes before you run the the command.
git clone https://github.com/JeremyEnglert/JointsWP.git
This will create a folder called JointsWP. This is good but I like to change the theme name to one that represents my current project. Use the following to change the folder name. Change “sdatic” to the name of your project. You can use sudo if it doesn’t work or shows any errors.
mv JointsWP sdatic
Next, you need to run this command to get things working in the directory.
npm install
This will install all dependancies needed by JointsWP and at this point you have everything ready to go to start using the SASS version of JointsWP.
Using Gulp To Compile SASS and JS
Here are the commands for the included scripts for compiling your SASS and JS as well as packaging everything for production.
Watch for changes in your assets/js/scripts and assets/sass folders.
gulp watch
Compile your SASS from assets/sass to assets/css.
gulp styles
Compile your custom JavaScript from assets/js/scripts to assets/js.
gulp site-js
Compile your foundation JavaScript from vender/foundation/js into assets/js/min.
gulp foundation-js
This one has some options for including the JavaScript functions available in Foundation. See gulpfile.js to comment out any features you would like to leave out of your build.
Conclusion
I think it’s pretty straight forward. Run npm watch and then run npm styles, site-js or foundation-js to compile a usable production ready version of the JointsWP WordPress starter theme. Let me know if you need any advice our have any feedback about the process.
