Menu icon Foundation
Foundation 5 + WordPress

FoundationPress is the ultimate starter-theme for WordPress, based on Foundation.

Although the most recent version is built on Foundation 6, there is also a Foundation 5 branch available for download. The theme has been regularly updated since 2013 and is used by hundreds of companies worldwide.

The release archive is here:
https://github.com/olefredrik/FoundationPress/releases

The Foundation 5 branch is available here:
https://github.com/olefredrik/FoundationPress/tree/foundation-5

Enjoy!

Foundationwordpressstarter-themeboilerplatefoundationPress

FoundationPress is the ultimate starter-theme for WordPress, based on Foundation.

Although the most recent version is built on Foundation 6, there is also a Foundation 5 branch available for download. The theme has been regularly updated since 2013 and is used by hundreds of companies worldwide.

The release archive is here:
https://github.com/olefredrik/FoundationPress/releases

The Foundation 5 branch is available here:
https://github.com/olefredrik/FoundationPress/tree/foundation-5

Enjoy!

Leesa Ward over 5 years ago

Awesome! Just what I've been looking for, thank you so much for this!

Ethan Hackett over 5 years ago

Huge thanks for pumping out a Foundation 5 wordpress theme. Seems to work great so far.

Leesa Ward over 5 years ago

Hi All,

I've come across an issue with this theme that I'm hoping the author or someone else can assist with.

I've added a few plugins, and have found that the JavaScript from them is not loading. It occurs with several different plugins, none of which are an issue with the WP default TwentyFourteen theme, so it's an issue with this theme.

When I check the code in Chrome dev tools, the only scripts loaded (found under the Resources tab) are the ones registered by FoundationPress or WordPress: admin-bar.min.js, app.js, foundation.min.js, jquery.min.js and modernizr.js. This happens regardless of which plugins are activated or not.

The only solution I have found online is to ensure that wp_head(); is in the header.php file in the correct place, which it is in this theme.

Any help would be greatly appreciated. This is a serious problem but I hope there's an easy fix for it.

Ole Fredrik Lie over 5 years ago

Hi Leesa. Thanks for your feedback! I'll have a look at it. :)

Ole Fredrik Lie over 5 years ago

You were absolutely right, thank you for reporting the error! The error has been corrected and external plugins should work as expected.

The error occurred because of a conflict between jQuery version that is bundled with WordPress and jQuery version included with the Foundation. The WP-bundled version is now unregistered. FoundationPress now uses the same jQuery version as Foundation.

I also made some changes to how FoundationPress handles scripts. jQuery, Modernizr and Foundation will be copied from 'bower_components' to 'js' where unminified scripts will be minified before enqueued correctly in functions.php. See Gruntfile.js for details.

Please note that you must run the 'grunt' command in your terminal for the scripts to be copied and minified.

Hope it works well for you :)

Ivan Torres over 5 years ago

Thanks for posting this Ole!!

Matt Dean over 5 years ago

Hi Ole, quick question, what version of wordpress have you been using this on?
Reason for asking is after updating my theme to 3.8.1 off-canvas has stopped working.

Not ruling out I've done something stupid :)

cm over 5 years ago

Hi there!

I´m not very familiar with Wordpress - so I hope...

What happens if I change things in some .php-files after an wordpress update?

For example:
Here ist my template --> wp-content/themes/myTheme (no child-template)
and I remove some parts of the code in footer.php. or add something in the header.

Will I have to change it again after the update?

Thanks
cm

Ole Fredrik Lie over 5 years ago

@Matt: I'm using WordPress 3.8.1 as well. Haven't noticed any issues with the off-canvas menu. Make sure "mobile" is checked on Menu Settings in Appearance > Menus (in WP-admin).

I've just cloned a blank FoundationPress copy in a fresh WP 3.8.1 install, and everything seems to work fine. Will you get the same error if you do the same?

Ole Fredrik Lie over 5 years ago

@cm: You could modify any files in the themes/FoundationPress directory without worrying about losing your changes with a future WordPress update. FoundationPress is not bundled with the WordPress install like the Twentythirteen og Twentyfourteen themes. So, no worries :)

Matt Dean over 5 years ago

Thanks Ole, rolled back to 3.8, started working again, updated to 3.8.1, still working...
Now I just have to figure out what the hell else I did before!!! :)

sortofme over 5 years ago

niiice, thanks alot for this! I will digg into this, and if I can make a contribution, I'd be glad to. Have you tried using foundationpress as a parent/child theme? I have previously worked with Reverie, and there have always been some issues with css loading orders.
Anyhow, will try it out, as I believe in wordpress' child theme infrastructure... quite a few sites I have created sooner or later needed a theme update, which would have turned out quite a hassle without being built as a childtheme....

Another difficulty I have previously run into, was minifying/caching with foundation+wordpress+w3 total cache, as most files just wouldn't get minified. I will test this and report.

Love Foundation, love wordpress, and for me this is the perfect combination. I just hope that foundations version of Jquery and some plugins won't conflict

Wil keep you updated. Thanks for offering a great base to start off from.

Tom over 5 years ago

Hey Ole,

I am bit confused and please forgive me if this is a stupid question. You wrote on the Git page that its required to run Grunt, Node and Bower. Do I need all this to get a wordpress theme running or is this related to development?

Thanks for your help.
Tom

Ole Fredrik Lie over 5 years ago

Hi Tom,

It's not a stupid question. In fact it is a very good question that I'm sure many are wondering. It is not required that you use Grunt, Node or Bower with FoundationPress. However, it is recommended on the basis of a developer's perspective as it will do much of the heavy lifting for you. Maybe I should change the wording from 'requirements' to 'recommendation' in the readme file on Github.

Ole Fredrik

Andrzej Poniatowski over 5 years ago

Hi can you please give me a hint how about sass compiler I was trying to run compass to convert my scss files to css and it do sent work. What complier do you recommend to use. And how to run it on your files. Thanks

Ole Fredrik Lie over 5 years ago

Hi Andrzej,

The sass compiler (libsass) and everything you'll need is set up in Gruntfile.js, located in the root folder of the FoundationPress project. Just make sure you run 'npm install && bower install' after cloning the repo, and you should be all set.

Each time you run the 'grunt watch' (or simply just 'grunt') command, the sass compiler will run and watch for changes in your sass folder. Each time you make a change to a sass file, the output will be reflected in a compressed app.css file.

There are several types of sass compilers around. Grunt can be set up to automate all kinds of tasks. Here you can find useful info: http://gruntjs.com/

Good luck!

Ole Fredrik

Michael Oeser over 5 years ago

Is there any way not to use SASS but to use "regular" simple CSS with the Foundation 5 WP theme?

SASS is something "normal" users simply don´t understand and when I create a theme based on FoundationPress I know people who use it want to have a chance to make simple CSS edits.

Ole Fredrik Lie over 5 years ago

Hi Michael,

SASS is really nothing but a CSS preprocessor with support for variables, mixins, functions ++. SASS documents are run through a compiler and the result ends up in a regular CSS file. So there will be no problem to write vanilla CSS with FoundationPress. Just create an empty CSS file and include it in theme as usual.

That said, I would recommend anyone to invest a few hours to learn SASS. I'm not an expert myself, but I find great advantage in using variables and mixins. Believe me when I say it pays off quickly when working with larger projects.

Cheers,
Ole Fredrik

Michael Oeser over 5 years ago

Hi Ole,

I agree concerning SASS but as mentioned "normal users" might be able to edit a bit of CSS but they are not able to edit SASS.

Am I right that the only CSS file that is included into the theme is /css/app.css? So basically I could make all changes here, right?

Michael Oeser over 5 years ago

Hi Ole,

Can I maybe use the "CSS generator" at http://foundation.zurb.com/develop/download.html to build my custom CSS and add it to the theme to use it instead of SASS?

Cheers
MIchael