Foundation 6 Meets WordPress


Foundation (for Sites) 6 is officially here, which means JointsWP 4 is also here! As in previous versions of JointsWP, the theme is essentially “blank” but includes all of the awesome features of Foundation 6. Let’s take a look at what’s new in Foundation 6 and how it effects JointsWP 4.

What’s new in Foundation 6?

No More Bloat

CSS frameworks have always had an unjust reputation of being “bloated” – Foundation 6 is changing that. Most of the JavaScript components have been rewritten and the restructuring of Sass files to be “leaner, meaner and cleaner” means you can expect a 40-50% smaller output when using Foundation 6 compared to Foundation 5. The Sass restructuring also makes it extremely easy to select which Sass components you want to include – so you won’t have a ton of extra styles you never plan on utilizing.

If you consider Foundation 6 “bloated”, you’re doing it wrong.

Menus Receive a Super Sexy Makeover

Modifying the “top bar” in Foundation 5 was far from fun – if you wanted to do anything besides change a few colors, you were in for a lot of work.

In Foundation 6, the “top bar” has now been split up into 3 separate menu types – a dropdown menu, an accordion menu and a drilldown menu. Using the responsive navigation patterns will allow you to implement different menus on specific screen sizes.

For example, a dropdown menu may look great on a desktop device but be better suited as an accordion menu on smaller devices – with Foundation 6 and JointsWP 4, you only need to adjust a few classes to make this happen.

Accessibility & What-Input

The ZURB team put a lot of work into making sure Foundation 6 is as accessible as possible. One really cool feature is the addition of What-Input, which allows developers to create separate styles based on whether the user is using a keyboard or a mouse. This means developers can keep important accessibility elements such as outlines visible to users using a keyboard, but set the outlines to be hidden if the site is being navigated with a mouse.

That’s Not All, Folks

This just scratches the surface of the changes that came to Foundation 6. Other useful features include:

  • Flex Grid – developers can now use the flex grid using the same markup they used in the traditional/float grid, but with a lot more flexibility (pun completed intended)
  • Motion-UI – this will be included by default in Foundation 6 and allows developers to quickly create their own motion effects or use existing effects created by the Foundation team.
  • Off-Canvas Improvements – no longer strictly used for menus, the off-canvas component in Foundation 6 will act much more like a container that can hold all types of content.
  • So, so, so much more.

What’s new in JointsWP 4?

The primary purpose of this was release was to integrate Foundation 6 into JointsWP, however, other small changes were made as well.

  • Improved File Structure – my weird obsession with file structure continues. Vendor files, such as Foundation and jQuery now live inside a /vendor/ directory. This makes it extremely easy to update these assets, even if you aren’t using Bower.
  • Improved Loop Structure – the new loop structure makes it easier to include template parts and also allows for custom error messages to be created much more easily.
  • Gulp & Bower Working Together – Run gulp bower to automatically update all vendor files. Bower will create a new bower_components directory and then automatically copy the updated files to your /vendor/ directory. Awesome stuff.
  • Better Translation Support – All  text/strings should now be fully translation ready.

Had a chance to check out JointsWP 4? Excited for Foundation 6?  Let’s chat below.

  • John Chaka

    HOT DIGGITY! Thank you very much.

    • Jeremy Englert

      Hope you enjoy the new version @johnchaka:disqus!

  • Sebastian Syder

    Terrific, thank you.

    • Jeremy Englert

      Thanks for checking it out!

  • Chris Oyler

    Nice work!

    • Jeremy Englert

      Big thanks to @chris_oyler:disqus, @arthurzurb:disqus and the rest of the Foundation team for putting together such an awesome release!

  • Arthur


  • Piet

    Very fast! It will come in good use to update my own soblossom theme 🙂

    btw, I think you might have forgotten a few strings for translation here and there…

    • Jeremy Englert

      I’m certain I did – there was a lot of them! I’ll add this to my list of issues to look into.

      Let me know when you update Soblossom – I’d love to take a look!

      • Piet

        It’s not going to be an update actually, it’s going to be a new theme 🙂 I will have another look at Joints and send you a i18n PR for some of the strings that are still there.

  • Ribhararnus Pracutian

    very nice!!!

  • Thomas Vasquez

    Nice work Jeremy! I hope to get F6 implemented soon. I don’t know anything about sass (yet) so I wasn’t able to make it very far during the private testing phase of F6. Joints has taught me a lot since its release and I hope to learn even more now that it runs F6. Again, great job on getting this out blazingly fast.

    • Jeremy Englert

      Im excited to see what you put together for Forge! The navigation patterns/walkers are so, so, so much easier to work with this time.

      Will you be creating a completely new theme for F6? Will there be issues for people using child themes if you update to F6?

      • Thomas Vasquez

        I am actually lost with the nav menus, however I am looking at Joints to see what you did and it’s sooo much smaller, which is cool. Nice job on that as well.

        I do have a few plans to switch things up in Forge but I’m not going to do that until F6 is fully integrated, which, hopefully, will be on the next few days.

        And I hope there isn’t too many issues if and when people update, so we shall see.

        Then, there will be a sass version as well, I just have to wrap my head around it and get it done.

  • Gabriel Bajada

    Awesome… already know which project I’m testing this on! Nice one!

  • Joshua Wayne

    Thank you for creating this theme. It is a really great tool and your code is easy to read. JointsWp is helping me rethink best practices in theme development. Your a Rockstar sir.

  • Steve

    Thank you for your great work Jeremy. And so quick with 6.

  • Ryan Patterson

    Can you say, Best starter theme EVER!!! I’ve been using JointsWP for a couple years now and was super stoked to see a F6 version come out so fast. Awesome job Jeremy!

    • Jeremy Englert

      Thanks @disqus_z8cdRdhMcK:disqus! Let me know what you think of the new version! 🙂

  • dfvink

    Hi! just started my first project with the new F6 after many websites with F5- yay, looks good, thanks! Question though: menu buttons change beautifully from top-bar menu items to off-canvas toggle – but no off-canvas is ever seen. (css version) What am I missing?

    • RT

      Same problem here. No off-canvas menu :/

    • Jeremy Englert

      @dfvink:disqus and @disqus_EhNP6FW1LT:disqus – this has been fixed. The enqueue-scripts.php had some left over code that was keeping foundation.min.js from loading. Sorry about that!

  • Nathan

    Hi, I’m new to JoitsWP. At first, thanks for sharing it! Seems to be a very promising starter theme. Just one qustion. Is it normal, that there are two Foundation-Packages, after installation? One inside “bower_components” (which would be normal for me) an another one inside the vendor folder? Is there a documentation about folder structure and dependencies?

    • Jeremy Englert

      Hi @disqus_5taRcncbUg:disqus,

      Thanks for checking out JointsWP! I definitely need to update the documentation as things have changed a bit.

      The theme will always come with a /vendor/ directory – this is where the theme will be looking for the Foundation and other vendor files. Not everyone uses Bower, so having the theme link to bower_component assets was slightly confusing.

      If you’re using Gulp, you can run ‘gulp bower’ – this will create a bower_components directory, update those assets and automatically copy them into your vendor directory.

      Hope this helps!

      • Nathan

        Thank you Jeremy for your quick reply, that helped me a lot for my understanding.

  • reallynotsaying

    Thanks a bunch for the coolness!!!

    Hmm, where would I best go to pose questions & find answers & tips?

    My basic ones are:
    – how can I make the topbar sticky?
    – activate the ‘prev – next’ wp navigation?
    – activate WP pagination

    • Jeremy Englert

      You should be able to use the “sticky” component for the topbar:

      For the pagination, you’ll need to replace all calls to joints_page_navi(); with the traditional WordPress pagination function.

      • reallynotsaying

        thanks Jeremy!

        Any thoughts about how to activate the ‘prev – next’ wp navigation?

        if you can mention the proper php files I need to edit for any of my questions above it would be much appreciated… and is there a forum for users like me to discuss these types of mods for this theme?


        • Jeremy Englert

          “Any thoughts about how to activate the ‘prev – next’ wp navigation?”
          Do you mean the archive navigation or the function that allows you to split posts/pages into multiple “pages”?

          There are going to be multiple places you need to update this (depending on what you’re trying to do).

          If you’re trying to update the archive/blog pagination, you’ll find that in the parts/loop-archive.php.

          If you’re trying to update the single post pagination, you’ll find that in the parts/loop-single.php.

          • reallynotsaying

            for me, archive navigation …
            Thank you VERY much for tips!
            I’m still learning certain aspects of WP and appreciate your patience. 🙂

  • Jason Kadlec

    Is it possible to have on medium and large size screens, a top bar nav that is both dropdown and drill down?

    Meaning – hover over the top level, and the dropdown appears.

    But the 2nd level downward would work as a drilldown, so that if you had a menu, say 3 levels deep, your menu isn’t like:

    Top Level
    ———— Level 2
    ———————– Level 3

    (where each level is creating a new box to the left/right of the level above it in the tree…

    Instead you could have it:

    Top Level
    < back to Level 2
    Level 3

    • Jeremy Englert

      This sounds like a great idea, but I’m not sure if it is possible. Foundation seems to inject alot of classes into the dropdown menus to make them function.

      I think this would be a great question for the Foundation forums. I would love to see someone pull this off.

  • Miss Web

    Can someone please tell me the relationship between BakedWP and JointsWP? Also, why is JointsWP not listed in the Themes directory at Finally, what are the “peers” of JointsWP? …you know, other “blank” themes like JointsWP that incorporate Foundation 6 with modern build tools?

    • Jeremy Englert

      Hi @miss_web:disqus, “BakedWP” is a theme I developed using JointsWP – other than that, there isn’t much real connection. JointsWP isn’t listed in the theme directory as it’s meant to be used as a “starter theme” – so keeping the theme updated through the theme directory would be hell (similarly to how most other starter themes are not listed in the directory).

      There are a ton of other starter themes that use Foundation, but I’m not aware of any that use the same toolset as JointsWP.

  • SR

    Thanks this is great –

    had question about the website width – can’t seem to find a way to reduce it to 990px.

    Changing the row width to less than 75rem in foundation.css didn’t change anything.

    Any tips?