Cancel

Sarah Gooding

10 Free WordPress Themes Based on the Foundation Framework

zurb-foundationAt the beginning of this year there were just a handful of WordPress themes available for Zurb’s Foundation framework. Most of these were basic starter themes for developers. As we near the end of 2013, Foundation is rapidly becoming more popular with front-end developers and the demand for WordPress themes is also increasing. In addition to the 10 free themes included in this article, Foundation-based themes are popping up on Themeforest and other commercial sites.

Many front-end developers prefer Foundation over Twitter Bootstrap, its more well-known counterpart. Foundation was created with a mobile first approach. It’s more style-agnostic when it comes to UI tools, which often translates into less work when theming. Foundation also provides native support for SASS, enabling developers to use compass in their workflow.

All of the WordPress themes below incorporate the Foundation framework. Their project websites are an example of what is possible when building with Foundation.

Reverie

reverie
In addition to inheriting all the Foundation features, Reverie also includes customized output for WordPress menus, caption and pagination. It has two built-in widget ares and two custom menus. Reverie can be used as a starter theme or as the parent theme to a child theme that you create.

Theme Info | Demo

Required+

required
Along with Reverie, Required+ was one of the first ones on the scene to offer a Foundation-based WordPress theme. It is meant to be used as a parent theme and features commented code, flexible layout options with page templates and widget areas for different layouts. Required+ includes shortcodes to help you create columns, galleries and more using the visual editor. The shortcodes are offered as optional plugins. One unique feature of Required+ is that it offers editor styles for adding Foundation styles and elements to the post editor without using shortcodes.

Theme Info | Demo

Reactor

reactor
Reactor makes use of the WordPress Customizer to offer customization options. It includes shortcodes for UI elements such as pricing grid, orbit slider, buttons and more. Reactor was built with the developer in mind and offers an assortment of hooks, content actions and theme actions.

Theme Info | Demo

WP Foundation

wp-foundation

WP Foundation includes four different page templates, a configurable via theme options panel, shortcodes pre-styled with Foundation’s styles and two different sidebars.

Theme Info | Demo

Base Station

base-station

Base Station is an extensible WordPress theme built on Foundation. It was built to be extended by developers, includes a number of hooks, and most of its functions are either pluggable or accessible via filters. The theme also has a feature called featured posts for highlighting your content. Base Station shortcodes offer support for alerts, buttons, featured posts slider, labels, login form and panels.

Theme Info | Demo

WP Foundation

wp-foundation
WP Foundation is a free theme created by developer Micah Blu. This theme can be used as it is or easily customized via the options panel. WP Foundation theme options include basic branding, typography and a set of social buttons.

Theme Info | Demo

Foundation for WordPress

foundation-for-wp

Foundation for WordPress is a responsive starter theme that features developer friendly markup, shortcodes, custom background and header and support for child themes and custom post types. The theme offers built-in navigation and widgetized sidebars to get you on your way developing your theme with Foundation.

Theme Info | Demo

Spine

spine

Spine is a WordPress theme based on Foundation and Hybrid core. It features three custom menu locations and several different layouts, including no sidebar, one or two sidebars. The front page template is completely widgetized and you can use the theme customizer with live preview to customize your site.

Theme Info | Demo

SmartAdapt

smartadapt

SmartAdapt is a Foundation-based theme hosted on WordPress.org, which means that this is a solid theme that holds to the rigorous code standards maintained by the WordPress Theme Review team. It allows you to easily customize background, logo or header image, etc and includes social share button support (Facebook like, Twitter share, Google +1, Pin it).

Theme Info | Demo

_second-foundation

second

_second-foundation is another Foundation-based theme hosted at WordPress.org. It utilizes Masonry.js to create the responsive post grid display. This is a theme that you might select if you desire that specific homepage layout plus Foundation as a base.

Theme Info | Demo

Category:
Tags: , , , ,
27

27 responses to “10 Free WordPress Themes Based on the Foundation Framework”

  1. Having post_content shortcodes in Themes = bad. They are as bad as – if not worse than – adding site analytics in Themes.

    I look forward to the day when we stop including shortcodes in Theme feature lists.

    Otherwise: very cool list. It’s nice to see frameworks such as these facilitating the creation of cool WordPress Themes!

    Create forum topic from comment

    • Yes and no. Embedded shortcodes in a Theme is “generally” a bad idea – this rule of thumb pertains to shortcodes that can exist as independent functions, e.g. a twitter box or something that can naturally exist independently of the theme. The reason you want this is because once you swap over the theme to another your embedded bits will break. Very logical.

      But building a theme on a framework poses an exception to this rule in that;

      A) the shortcode widget is dependent on the framework, e.g. a foundation button – remove the theme and its framework and the button does not work, and if the shortcode was isolated (as the rule of thumb for shortcodes dictates) and you would have 1) duplicated frameworks (if both the theme and the shorcode widget used the same framework), or 2) two separate frameworks (assuming you used a different framework when you swapped out the theme; e.g. a bootstrap theme, with a foundation button),

      B) by building a website based on a freamwork implies that you both commit to its UI and want to leverage all of its features. For example – what’s the use of adopting a Foundation based theme if you can’t use nested columns, or Magellan, or Orbit? Changing your theme also implies that you no longer need things like nested columns, or “warning buttons” etc., that are framework specific.

      C) The framework widgets served by shortcodes will only exist within that framework (read as theme); separating it serves no purpose as 1) isolation breaks the widget (in that it’s dependant on the framework/theme), and, 2) for those whom profess lightweight abstraction (just the theme, no widgets for a lighter install), removing the core goodies of the html/php code does not necessarily remove it from the supporting CSS and JS files. — besides if you wanted a lightweight theme then build one that not dependant on a heavyweight framework.

      ***

      Rules of thumb are called that because they’re not always applicable, they’re just the rules that in most cases are best – one should use common sense in deciding if the rule applies or not. This leads to opinions that differ from one person to another. What erks me is that some internet proponents pass on their opinions as the only correct way. So – here is my opinion – this is the way I do it and I offer it as one of many recommendation others may have – it’s up to you (dear reader) to validate each one to see if it fits your needs: Shortcodes in a framework based theme are necessary to leverage all the feature sets of the framework – separating serves no purpose.

      Create forum topic from comment

  7. Def a good post and the themes you mentioned are some of my favorites. They are all built very well by some very well versed WP pros.

    @Brad – hey thanks for mentioning WP-Forge. Although it may not have a lot of bells and whistles like some of the other themes, I designed it to be simple to modify for developers. I especially tried to make it easy for those individuals who are not developers and who want to try and create something on their own and learn something in the process not only about WordPress but about Foundation as well. Thanks again, I appreciate it.

    Create forum topic from comment

  8. Sarah! You just ruined my day… was literally starting my first foundation based project today and thought there was just one starting point… now I have to go look at all these and see if they make a better starting point than rolling my own.

    Also worth mentioning… BaseStation seems to have stopped development March 2013 and never made it out of alpha.

    Create forum topic from comment

  14. Hey Jeremy,

    I checked out your theme earlier this morning. Great work amigo. Thanks for the kudos regarding WP-Forge. You beat me to it…lol but no worries. WP-Forge v5.0.2 went into beta testing today and I am looking for anyone interested in putting her through the paces. If so drop me a line on my site.

    Create forum topic from comment

  15. I’ll keep an eye out for it!

    Reverie also updated to Foundation 5 – for those of you looking for something “less blank”, it’s a great choice. But if you’re trying to create something custom, there appears to be a lot of styles/code to overwrite. However, it’s a truly awesome theme.

    Create forum topic from comment

  22. I Like the Foundation Framework, the only problem (and a big one) is that it doesn’t support IE 8 and below. :(
    If you open any of these themes in IE 8, the grid system breaks down. There is a workaround – loading foundation framework 3 for IE 8 and below but it hasn’t got one of the most attractive feature – offcanvas menu.
    IE8 also doesn’t support rem.

    Create forum topic from comment

  23. Thanks for the summary! I was just about to start with Reverie and now may make a decision for Required +..

    Anyone have direct experience to which is better for a front end developer who’d like things to be accessible and customizable in the way of adding further theme options, custom templates etc.. ?
    Thanks a bunch!

    Create forum topic from comment

  24. Looking into it further, it seems like Required+ is only using Foundation 3.0 while Reverie is using the latest and greatest Foundation 5.0. Haven’t done my research yet but it seems like there could be significant updates in Foundation from 3.- 5 and I’m leaning to continue with Reverie. Maybe I’ll grab the shortcodes from Required+ though :-)

    Create forum topic from comment

You may also like

Newsletter

Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.