Foundation Features

All Foundation features work in JointsWP. For documentation on how to use these features, please visit the Foundation Documentation.

Foundation Features Demo

  • kozmikcharlie

    Hi! Nice theme, I’m using it for a web site, but I’m having an issue with the “hamburger” icon… can u tell what’s wrong? Thank you!

    • Jeremy Englert

      Odd. Do you have a link? It looks like the hamburger icon is being called twice.

      • kozmikcharlie
        • Jeremy Englert

          It looks like you have two CSS classes creating the hamburger.

          • kozmikcharlie

            I’ll try to solve this…then I’ll let u know 🙂 tnx!

          • kozmikcharlie

            Hi Jeremy! What do u think now? http://www.montecatini-alto.it/mct_wpress/ I commented the CSS and it seems to be ok.
            Simon

          • Jeremy Englert

            Looks awesome!

          • kozmikcharlie

            🙂

          • kozmikcharlie

            Hi Jeremy can u suggest a good (free if possible) multilanguage plugin compatible with joints wp?

          • Jeremy Englert

            I haven’t tested many Multi-Language plugins, however, I can’t think of a reason why they wouldn’t work with JointsWP. I recently used Transposh Translation Filter on a JointsWP based website and it worked great.

          • kozmikcharlie

            Hi Jeremy from Tuscany… can u help me to fix this issue? I can’t see the image preview on the left, when open the “modify media” page. It’s seems to be “broken” but I don’t know how
            Thank you!
            https://uploads.disquscdn.com/images/bce814b75bfe5e93c4ddf9fada4dc4265a28338384b529bba1b2c7ac279c2466.png

  • http://www.coolwebs.com.au Ryan Archer

    Fantastic looking WordPress theme! I’ve downloaded JointsWP and started to have a play around as I want to learn more about creating a customised theme myself, rather than relying on tweaking commercial themes which are bogged down with too much code and features (that I don’t really end up using).

    I just have a question about the Foundation Features. I’ve used them along with Bootstrap in custom HTML websites and apps. But i was thinking doesn’t this get tricky when putting this kind of HTML in the WordPress Visual Editor? Won’t it just play havoc with the HTML and strip it out sometimes? Especially when a non-coder starts making updates to the content?

    Is it suggested to make our own shortcodes based on the foundation functionalities?

    • Jeremy Englert

      @disqus_lxjzSNampE:disqus, sorry for my slow response.

      You are correct though – some components have issues with the WP Visual Editor – however, most of these can be worked out with a bit of jQuery.
      However, most of the components will be used in the theme files – not necessarily the Visual Editor. So you won’t run into this issue often. 🙂

  • Anthony G.

    Just wanted to share a suggestion that would save a bunch of people some time if it came integrated out of the box… sticky footers… you can just use a solution like this one… https://github.com/coreysyms/foundationStickyFooter

    it would a great addition to the JWP framework…

    • Jeremy Englert

      Awesome share, @socratics:disqus!

      • Anthony G.

        Really odd how the new F6 Sticky docs don’t make mention of the footer, figured with all the threads on support of how to do this specifically, they would have baked it in…

  • Dimension Internet

    Hi !
    How and where do you add, for example “Interchange component” in jointsWP ?

    • Jeremy Englert

      It works just like it would in Foundation. Was there something specific you were having an issue with?

      • Dimension Internet

        Ok :-/ so… now I’ve tried to use an absolute path and it works !!
        but when I’m using /assets/….
        the image disappear on small screen but works in medium and large.
        Do you have an idea ?

      • Dimension Internet

        sorry the php code doesn’t work :
        *when I’m using

        <?php echo get_template_directory_uri(); ?>/assets/....
      • Dimension Internet

        sorry again…
        /assets/images/...

      • Dimension Internet

        /assets/images/

      • Dimension Internet

        *I’m using /assets/images/…

  • Elle

    Hi there,
    Thanks for this great work. As a new user, a few things I desperately need from the documentation are: explanation on how to switch out the menu types (a simple switch out of parts as suggested in the header comments doesn’t do the trick)… and also some help understanding the file structure. Like there are two copies of core scss files – the vendor files and the assets files. but the asset files aren’t overwriting all of the vendor files, so I don’t quite understand how that works – Thoughts? Thanks again.

    • Jeremy Englert

      Hi @disqus_S6cyPlanBG:disqus, thanks for checking out Joints!

      I’m working on flushing out the documentation – it’s a bit weak at the moment.

      What have you tried to switch out the menu type? It should be as easy as changing the template part found in the header on line #53. You can see the available navigation types in the /parts directory.

      For the file structure, here is the basic breakdown:
      /vendor/ – this is where all of your vendor files (Foundation, jQuery, etc) will go. Don’t modify these files.

      /assets/ – this is where you will make all of your custom changes.

  • Mike Bosch

    Hello. I’m having trouble getting Off-Canvas Left to work. It doesn’t appear that this theme supports all of Foundations 6. Am I wrong?

    • Jeremy Englert

      Hi Mike,

      Thanks for checking out JointsWP!

      What have you tried? JointsWP includes/supports all Foundation 6 components.

  • Antonis Iliadis

    Hello there,

    I am wondering how to have the top bar menu to the center!?

    Thanks in Advance,

    Yours Sincerely,

    • Jeremy Englert

      The ‘.expanded’ class should do that: http://foundation.zurb.com/sites/docs/menu.html

      • Antonis Iliadis

        Done!

        Thank you very Much…!

        • Antonis Iliadis

          hmmmmm one more question for you ….

          How to dicrease the width of the expand menus?

          Thanks in Advance,

          Yours Sincerely,

          • Jeremy Englert

            You should be able to adjust this by putting them into a smaller container and then centering that container.

            Check this out: http://foundation.zurb.com/sites/docs/grid.html#centered-columns

            Hope this helps!

          • Antonis Iliadis

            Many thanks for your quick answers… But it works only for the big screens.

            Have a look please: http://iliadisantonis.eu/psd/

            If you have big screen it’ s OK!

            If not, NO!

            I am really dissapointed! So many hours just for the menu !

            Thank you,

          • Jeremy Englert

            You have this in your code: ‘small-9 large-centered columns’

            You told it so only stay centered on large screen. Try: ‘small-9 small-centered columns’

  • DisQusDan

    Hi, I just downloaded JointsWP (css) and I’m starting to create my first theme with this framework.
    One thing I really like is the foundation side-nav stickiness. It moves when it should and sticks when it should stick. Very cool.
    So I’m trying to get that effect in the default JointsWP theme sidebar. No problem, I think, just add data-sticky-container and data-sticky to a few divs and … no cigar 🙂
    Can you tell me what I need to watch out for to get that Foundation behavior?
    Thanks!

    • Jeremy Englert

      Hi @disqus_IROSiXr3GW:disqus, I’ve never tried to make a sidebar sticky. Let me give it a shot and circle back.

    • DisQusDan

      Super, thank you!

  • Penny Badowska

    Hi Jeremy

    I am loving using your theme. Still learning about how it all works though.

    I am using the SASS version. How do I add Foundation Icons? Is the file already included? If so, how do I access it? If not, how do I add it.

    Thanks!

    Penny

    • Mike Langone

      I am also interested in how to do this? Any thoughts?

  • Jochem Beumer

    Hi,

    I have downloaded the SASS version and it works very well but i got stuck on two things.
    1. How do I create a hero/background-image (height 600px) with parallax-effect?
    2. How do I make the menubar sticky on top?

    Hope someone can help me out.

    Thanks,

    Jochem

    • Jeremy Englert

      1. That’s hard to answer. I’m sure there are multiple ways to do this depending on how you’re setting up your theme. It also depends on what type of parallax effects you’re trying to achieve. This should get you going in the right direction though (note: this is in Foundation 5, but should be easy to change for F6): http://zurb.com/building-blocks/parallax-site

      2. http://foundation.zurb.com/sites/docs/sticky.html

      • Jochem Beumer

        thanks. Guess that question 1 is indeed hard to answer, will try a normal hero-image first. Should I import another Foundation component to achieve that?

        Found the second snippet seconds after posting my first question, thanks. I suppose that I should use that in /parts/nav-topbar.php?

        • Jeremy Englert

          You shouldn’t need to add any additional components to get the parallax-like effect.

          For the nav, check your header.php file to see which navigation you’re using (or to change it). Then adjust the corresponding template part. Let me know if you run into any issues!

  • Dan

    Hi,

    So i’m using your theme with a plugin called CM Tooltip Glossary. it’s adding a weird little block to their tooltips and was wondering if you could point me in the right direction on how to get that now to show up. I reached out to the plugin developer and he said it had to do with the theme was using the data-tooltip=”content” attribute and it was causing that. Think I can turn off the tooltip functions in your theme all together? I tried to do it myself with no luck so was hoping you could help me out?

    http://staging.usachildcareaware.org.php56-16.dfw3-1.websitetestlink.com/glossary/

    Thanks
    -Dan

    • Dan

      I figured this out.

      Thanks
      -Dan

  • http://www.pixel-relish.com Sheila

    Working on my first site using JointsWP. Loving the flexibility so far. I’m not overall using the flexbox grid, however in a few isolated spots I like to use flexbox. I tried employing the same technique I used in my non-WP Foundation 6 site, only the flexitem rules get overriden (when looking at the rendered code, they’re crossed out even with !important added). Any idea why and/or how to change?

  • Rendezz

    Hi there. Is there anyway to use “card” container?

    http://foundation.zurb.com/apps/docs/#!/card

    Thanks!