FAQs

Is JointsWP child theme friendly?

Yes and no.

Many developers have setup JointsWP to be used with a child theme, however, it is not the recommended way of using the theme. It requires a lot of work to keep a theme “child theme friendly” and often hinders development.

So while you are free to use the theme in any way you want, I highly recommend making all changes directly to the theme. Make it yours. That way you aren’t dependent on what changes I may, or may not, make.

You can always easily upgrade the Foundation version. Especially if you are using the Sass version of the theme, which has Bower support. 

Who do you recommend for hosting?

I recently made the switch to WP Engine and couldn’t be happier. All of their packages include automatic daily backups, a no-hack guarantee, awesome support and much more. The best part was probably the noticeable speed improvements I saw – even on small websites. JointsWP.com runs 2.5x faster on WP Engine than it did with my previous host.

They’ll even tell you why your website is slow (and what you can do about it) – for free!

Does JointsWP work with Gravity Forms?

Yes! In fact, it works very well. You can see how to setup Gravity Forms to use Foundation 5 Form Styling here.

What license does JointsWP use?

GNU General Public License & MIT.

Confused yet?

All JointsWP and WordPress functions and styles are under the GPL license. All Foundation components fall under the MIT license.

Have a question? Ask below!

  • http://joshmedeski.com/ Josh Medeski

    can this project be found on Github?

    • Jeremy Englert

      Approve.

    • Jeremy Englert

      Josh, I’ll have a Github link up tomorrow. Sorry about that!

      • Zane Taylor

        This project could scratch a major itch for me and no doubt plenty of other folks. I’d be very interested in contributing once it’s on Github. Thanks, Jeremy!

        • Jeremy Englert

          Looking forward to seeing how the community can take this project even further.

    • Jeremy Englert

      Here you go guys – sorry about the wait!

      https://github.com/TheAdGarage/JointsWP

      • Henry Lemmon

        Thank you Jeremy

  • Nguyễn Tiến Dũng

    I want to use Gruntjs + Libsass for this theme? Can you help me?

    • Jeremy Englert

      Unfortunately, I am not super familiar with either of those. However, this theme doesn’t differ from traditional WP themes in anyway, so you should be able to find plenty of information about using GruntJS with WP themes. Let me know if you have any luck, I’d love to hear about it.

      Also, maybe someone else can chime in and help?

  • Nguyễn Tiến Dũng

    Why there is normalize.scss in your theme? What would it does without normalize?

  • http://www.constantchatter.com/ Richard T.

    It looks like Bones is gearing up for a 1.7 release to add in some bug fixes and some new WP 3.8 features. Will Joints update with the new Bones when that’s released?

    • Jeremy Englert

      Richard, I will definitely be taking a peak at Bones 1.7 once it is released and incorporating any useful features and bug fixes it contains. Have you heard anything about an expected launch date for the new Bones?

      • http://www.constantchatter.com/ Richard T.

        Github actually lists a milestone target of yesterday (12/30) for the release and shows as overdue, so I’d guess it’s imminent.

        • Jeremy Englert

          From what I can see, I will definitely be adding the post-formats. I didn’t see anything specific to WP 3.8 though – which feature were you interested in?

          • http://www.constantchatter.com/ Richard T.

            Not any one thing. I’ve built a couple of themes in older versions of Bones (1.2), though I don’t love the default 320 grid and I’m a big fan of Foundation and use that for non-WP projects. Now that Bones is getting what Eddie is calling a 3.8-compatible revamp, I’m considering whether I want to wrestle with updating Bones/320 in those themes or just port them into Joints, which looks like a solution I’ll ultimately be happier with.

          • Jeremy Englert

            I’m keeping a close eye on the new Bones and will definitely be integrating anything useful into Joints. Eddit does amazing work, so I’m interested to see what he comes up with. As I mentioned earlier, I will be getting the post-format templates into Joints soon.

  • Jared Shih

    Hi Jeremy, Thanks for saving us a whole lot of time by developing this. I was wondering if you might have any insight as to why the top bar classes are not being applied correctly to your theme here: http://jaredshih.com/wordpressdemo/ ? I have not touched any of your code yet. I have your theme working fine on my local server. Any insight you could provide would be greatly appreciated.

    Thanks for your time

    Jared

    • Jeremy Englert

      Did you modify the Functions.php file? Your menu seems to be missing a
      few of the classes it needs. These classes are added in the Functions.php file. Around line 87.

      • Jared Shih

        That’s what i thought the problem was so I did a fresh installra of WP and Jointswp but it still didn’t work. I then extracted your theme locally and copied functions.php and joints.php exactly line for line. The strange thing is everything works perfectly fine on my dev server. I don’t see anything wrong with your code. At any rate i don’t want to take up too much of your time. I’ll poke around a bit more. I definitely appreciate the response and the work you put into this theme. Thanks!

        • Jeremy Englert

          If you want to give me a temporary admin login, I can take a peak and see if I can find the issue. Really odd that it’s working fine locally, but giving you issues on the server.

          • Jared Shih

            Thanks Jeremy, I am not sure what the issue was but strangely copying the database from localhost to my production server fixed the menu issue. Not sure why the database was affecting front end issues like JavaScript and CSS but I guess I may never know. It really speaks a lot for you being willing to help me out in this way. Let me know if there is anywhere you want me to leave a positive review for you or your work Thanks again!

  • jkinley

    Jeremy, thanks for your efforts. Great work! I was wondering, I use the Gecka Submenu plugin on a lot of my sites. It automatically spits out children pages based on your setup in the WP pages admin. Anyway, I know that it uses wp-nav-menu to work, but I can’t figure out how to make it work in Joints. Any ideas? It would be great to make it work, if it does not break the Foundation aspects of the Joints Nav. Thanks, again.

    • Jeremy Englert

      I’m not familiar with that particular plugin – however, as you already know, Joints uses a custom navigation in order to place the needed Foundation classes into the navigations HTML. You may be able to edit the Submenu plugin to watch for “”, but this may make upgrading the plugin more difficult.

      However, this has made me re-think how the navigation is outputted. I’m going to look into using the native WordPress navigation (with the Foundation styling) function in a future release.

    • Jeremy Englert

      This actually really got my mind going. I’m definetely going to be making an effort to replace the current navigation call with the more native WordPress navigation call. This should resolve any issues with navigation based plugins.

      • jkinley

        Cool. I’ll be interested to see what you come up with. I like how organized your code is and its teaching me a lot. Hope my feedback helps.

      • jkinley

        Hi Jeremy. Glad to see that you are still working on Joints. I’ve mostly used Reverie, which is a great project, but unfortunately it does not stay current enough and I am afraid that it is going to get abandoned. Anyway, I was wondering if you have changed up the navigation call to be more accommodating with WP plugins. No worries, if you haven’t I was just following up. Thanks again.

  • DavidG

    Thanks for this theme Jeremy, Im loving the integration with Foundation5 and WordPress. I have a couple of questions about using a child theme with Joints. I have created many child themes but never with stylesheets in different folders to the main, so firstly is this possible? The main style.css file is in the library/css folder. Should I de-register the joints-stylesheet call and then register my own in my child themes function file? Also I am trying to figure out the best way to overwrite the stylesheet css as I am using SASS and dont want to duplicate the whole JointsWP stylesheet just for a few mods. Thanks for any insight.

    • Jeremy Englert

      I have never used Sass with a child theme but after doing some reading, it definitely looks possible – I’m just trying to wrap my head around what would be the best way to achieve it. If you deregister the Joints stylesheet, you’ll lose all of the Foundation styles as they are all compiling there.

      If you figure this out before me, I’d love to know how you did it. Normally, I’m not a huge fan of child themes, but Joints and Foundation both receive updates on a regular basis, so I can see how it would be useful.

      • Dea

        Hi Jeremy
        Can you help
        How can change post of my page
        I want post without widget
        post page as full width with no widgets
        than u for answer

        • Marvin Sohiong

          Change grid in single.php to large-12 medium-12 and remove .

  • jkinley

    Jeremy. Again, great work. Question: Can we put sidebars in off-canvas? I want to have something like this:

    http://responsivedesign.is/articles/secondary-navigation-in-responsive-design

    How can we do this with Foundation 5? Is it possible? I have been trying a number of things, but I’d like to not have duplicate content that is just being hidden/shown with visibility classes. Seems like this should be relatively easy. It is certainly a growing importance.

    Thanks, JK.

    • Jeremy Englert

      JK,

      After doing some testing, it turns out this is completely possible. There are a few different ways to do this

      Option 1:
      – In Partials > nav-topbar.php replace “php joints_main_nav(); ” with “php get_sidebar();”
      – This will replace the navigation items with the sidebar items. but you’ll need to be sure to do some Sass/CSS modifications to get the styling correct. Also, this will remove the navigation from the off-canvas navigation, so you’ll need to be sure to add it somewhere else.

      Option 2:
      – In Partials > nav-topbar.php add “php get_sidebar();” after “php joints_main_nav(); ”
      – This will place the sidebar under the off-canvas navigation

      Option 3:
      – Edit Partials > nav-topbar.php to add a “Right Menu” for the sidebar.
      – Learn more about this here, http://foundation.zurb.com/docs/components/offcanvas.html

      With all of these options, you’ll need to be sure to add a visibility class to hide the sidebar on smaller devices, otherwise you will be showing the sidebar twice (once off canvas and once in-line).

      Hope this helps! Let me know if you need anymore help.

      PS – Really good idea! I may bake this into JointsWP soon as an option.

      PSS – It wouldn’t let me add PHP to this comment, so be sure to add the proper PHP tags (I used quotes instead).

  • jkinley

    Hey Jeremy, I have been studying the way you put Joints together and there is something I can’t figure out. With Foundation 5, they have instructions using Off-Canvas, and they have it wrapping the entire content. However, you seemed to have make it work WITHOUT wrapping all the content. Can you explain why you did it this way? And you also have visibility classes on the topbar and off canvas partials. Again, Zurb does document it like this. I’ll keep studying to see if I can understand better.

    BTW: I have not been able to make sidebars work in off-canvas. I really wish ZF5 could do something like this:

    http://responsivedesign.is/articles/secondary-navigation-in-responsive-design

    It seems to be one of the best ways to use off-canvas.

    • Jeremy Englert

      1. The content is wrapped. The wrapper starts in header.php and ends in the footer.php

      2. Joints is actually using two navigations, one for medium and up (top-bar) and the other for small (off-canvas). Visibility classes are used so the correct navigation shows on the right devices. If you visit the Zurb.com website and view the source code, they use the same method.

      3. Replace your partials/nav-off-canvas.php with this http://codepen.io/anon/pen/BzxyE. This will create a “left” canvas menu for the navigation and a “right’ off-canvas menu for the sidebar. You will need to make some minor Sass/CSS edits as well.

      • jkinley

        Thanks, man. I appreciate the help—and patience. Have a great weekend.

  • Steve

    Hi Jeremy,
    Loving JointsWP, thanks.
    Quick question: I’m using Foundation 5’s data-interchange to load different files depending on width (http://foundation.zurb.com/docs/components/interchange.html). Have added the relevant javascript and this functionality works fine with html or basic php but when I try and call WordPress functions they are ignored. Any ideas?

    • Steve

      Worked it out: if including/loading php files in this manner each file needs

      require($_SERVER[‘DOCUMENT_ROOT’].’/wp-load.php’);

      at the top to use WordPress functions.

      • Jeremy Englert

        Steve, can you upload a CodePen with the final piece of code you used? I’d love to see it.

        • Steve

          Sure, as per DavidG – just a wee bit of php:
          require($_SERVER[‘DOCUMENT_ROOT’].’/wp-load.php’);

      • DavidG

        I use include(‘../../../../wp-load.php’); Not sure if it has any different effect.

  • Diana Myers

    How can I change the mobile navigation from off-canvas to drop-down?

    • Jeremy Englert

      It’s actually really easy. Remove the off-canvas partial from header.php. Then remove the visibility class, “show-for-medium-up”, from nav-topbar.php. Let me know if this does the trick.

      • Diana Myers

        Thank you! It really was easy, but I don’t think I would have figured it out on my own…

  • jkinley

    Jeremy,

    I saw on the Foundation forums you commented that you have a custom walker to make off-canvas menus look, well, like Foundation. I have looked in joints.php and functions.php and I can’t find any evidence of your custom walker. Can you point me in the right direction?

    • Jeremy Englert

      Very briefly, Joints used a custom walker, however, I reverted back to the technique you see being used now as it is much cleaner (in my opinion). If you’re looking to use a custom walker, check out this theme:

      https://github.com/wearerequired/required-foundation

      It uses an old version of Foundation, but the custom walker should still work. I was actually using it on another project the other day.

      • jkinley

        Ah, gotcha. I did not realize that. Ok. Yeah, I like what you have with Joints. Very clean documented code. Unfortunately I’m still pretty green when it comes to php. I’d like to use the joints nav, but as you may recall, I can’t get it to work with some critical plugins. Thanks again for all your help.

        • Jeremy Englert

          Jeff, let me know if you can’t get this working. I can probably dig up the old files for you. It was setup just like the theme I linked to above.

          • lokitoki

            is there a way to have the link of the current active page on top of the closed dropdown (top-menu) menu

  • jfriebeldf

    Wondering if

    wp_enqueue_style( ‘joints-stylesheet’ );

    should be moved below the foundation stylesheet. I didn’t want to start using !important on everything right away 😛

    • Jeremy Englert

      You are correct – I’ll get that fixed! I’m not in the CSS version as much, so I appreciate you catching this! Huge thanks.

    • Jeremy Englert

      This has been fixed. Thanks again!

  • Ross

    Hi, Jeremy. What’s your take on F5 not supporting IE8 and the implications for WP themes. I really like F5’s grid but I’m having trouble getting over the fact that so many WinXP users are stuck with IE8 and will be for some time to come.

    • Jeremy Englert

      Ross,

      I agree, the lack of IE8 support is somewhat concerning, but when you really think about it, there isn’t much to be worried about. IE8 usage is already below 4% and with Microsoft dropping support for XP, this number should begin to drop even more.

      However, be sure to check out this thread on the Foundation Forums:

      http://foundation.zurb.com/forum/posts/241-foundation-5-and-ie8

      A few users have gotten Foundation 5 working pretty well with IE8.

      • Ross

        Thanks, Jeremy. I certainly agree that IE8 is on the way out and at some point, despite a small but stubborn user base, you have to cut it loose. But all working developers have this natural fear of getting complaints that a site doesn’t function as expected. In this case you’re left giving the less than satisfactory reply of: too bad. Thanks for the link.

      • lokitoki

        may i ask a question. my jointsWP testsite does not work on IE8 and IE7 so why are the following lines in the head of jointsWP?




        <html > <!--

        and what is this good for inside scripts.js.

        // IE8 ployfill for GetComputed Style (for Responsive Script below)

        I mean jquery does not work at all on IE8. It only throws back some error messages like this:

        Message: Object does not support this property or method.
        Line: 24
        Character: 24904
        Code: 0
        URI: …/foundation/js/vendor/jquery.js

        Message: ‘jQuery’ is undefined
        Line: 8
        Character: 1
        Code: 0
        …foundation/js/foundation.min.js

        Message: Object expected
        Line: 30
        Character: 1
        Code: 0

        URI: …/library/js/scripts.js

  • Diana Myers

    What’s the correct code to setup a post loop template for “Custom Types”?

    • Jeremy Englert

      Diana, it looks like the single-custom_type.php and archive-custom_type.php aren’t using template parts – I will get this fixed.

      However, you can use the same setup found on single.php. If you want tot create a custom loop, simply duplicate loop-single.php (or loop-archive.php) and rename it to “loop-single-custom.php” and make your changes. You will then update the theme part to point to this new loop.

      I hope this helps! Let me know if you run into any issues.

      • Diana Myers

        I’m still a little lost! What I want is the same loop as the blog posts from the index.php template. What do I change to make that template load the custom_type post? Thanks, Diana

        • Jeremy Englert

          Hi Diana, you should see an archive-custom_type.php – this is the template that will be used to display your custom post type (if you changed the name of the custom post type, you need to change the name of the file to “archive-NAME_OF_YOUR_POST_TYPE”). You will access this via http://YourDomain.com/you-custom-post-type-name/

          For more information on Custom Post Types and how to use them, check out this great article from Smashing Magazine:
          http://wp.smashingmagazine.com/2012/11/08/complete-guide-custom-post-types/

          Let me know if this helps.

          • Diana Myers

            Thanks for your quick replies! My problem is I want the same display as the blog posts on the home page, but I want the custom post, so I don’t want to use the archive template. I’m having trouble wrapping my head around the way the template is setup, since I’m still a WordPress novice. Is there any way I can replace with the specific custom post file references in the index template to get the custom posts on the home page.

          • Diana Myers

            I finally got the custom posts to display, but the link is not working.

  • Jeremy DeLong

    Jeremy, I am trying to make a couple different generic layouts using your theme as a starting point for each. I want them to each be a different theme for training purposes. Is it possible to just rename your theme folder? Or, is there more that I have to do? Currently, if I rename the folder from JointsWP to something else, the new theme will not activate.

    Thanks!

    • Jeremy Englert

      Jeremy (badass name by the way),

      There shouldn’t be any issues changing the name of the theme folder. For example, for testing, I have two versions of Joints running on this site (Sass and CSS). You should always change the name of the folder prior to uploading, otherwise WordPress will look for the old name of the theme folder. Also, you can edit the styles.css to change the name and description found in the Theme selector.

      Let me know if that solves the issue for you.

  • Matt

    Is there a quick way to add wordpress menu descriptions to the nav using the same technique you are using to generate the foundation classes without using a custom walker?

    • Jeremy Englert

      Matt, if you ever found an answer for this, I’d love to know.

  • Jess Tura

    Thanks for making this easier for us to get started with F5+Wordpress+SASS. I am really new on SASS and has spent time to some SASS-Compass tutorials out there. However, integrating it with WordPress is quite confusing for me.

    Would it be too much to ask for a quick tutorial on where to get started in JointsWP theme so that we can change say the background of the body, hover states, etc. through SASS? What is the safest way to do it? Which file should I open and modify first? I don’t want to directly modify the style.css. I want it through SASS way so to learn more of SASS. Thanks in advance.

    • Jeremy Englert

      Hi Jess, sorry for the slow follow-up. I’m not sure how I missed your post. You are going to want to make most of your Sass/Scss changes in the small.scss, medium.scss and large.scss depending on what screen size you want them to apply to. If you make changes to the Foundation files directly, you will not be able to upgrade your project to future versions of Foundation.

      Hope this helps!

  • Henry Lemmon

    Thanks very much for a theme that incorporates foundation 5 grid and allows the use of sass.
    Can we use plugins for seo like seo by yost, and spam blockers filters/blockers like akismet with this wonderful theme, and if not what would you suggest I use for spam and seo?

    • Jeremy Englert

      Yes, all WordPress plugins should function fine with these time. Let me know if you run into any issues.

      • Henry Lemmon

        Thank you for joints, I tried to use foundation with wp myself but I am not there yet. thank you very much.

  • labcoatmedia

    Dude…. you rock.

    • Jeremy Englert

      Thanks man! Would love to see how you end up using it.

  • Ben Yoshiwara

    Thanks for the theme! Do you need to run sass to compile the scss after adding new scss files?

    • Jeremy Englert

      Yeah, if you add new scss files, I would recommend re-compiling.

  • Diana Myers

    How would I go about getting the template to kick into the mobile version when viewed in portrait on an iPad or Kindle Fire?

    • Jeremy Englert

      Diana, because the grid is done in percentages, Foundation doesn’t necessarily break down their media classes by device – however, the “medium” visibility class is what will display on most tablets.

      What specifically are you trying to achieve that you need to change the display? Because there are a few ways to do it:
      – Use visibility classes: http://foundation.zurb.com/docs/components/visibility.html
      – Use Sass to change the grid’s “breakpoints”: http://foundation.zurb.com/docs/components/grid.html

      • Diana Myers

        I understand the concept of the “medium” visibility class for content, but how would I apply that so the mobile version of the menu displays when viewed on a iPad in portrait view? I have 9 top-bar menu items and currently they are displaying as 2 lines on the iPad in portrait view. You can view the issue on the IPad here: http://quirktools.com/screenfly/#u=http%3A//206.130.122.55&w=768&h=1024&a=22&s=1 — Thanks, Diana

        • Jeremy Englert

          You can change the top-bar “mobile break-point” in the settings.scss file around line 1176.

          • Diana Myers

            I’m using the css version, so I changed the ems in foundation.css on lines 1436, 1662 and 3876 to 52em and it works!!!

          • Jeremy Englert

            Awesome! Glad you got it working.

        • Jeremy Englert

          By the way, nice site! Digging the footer widget area – very nice!

          • Diana Myers

            Thanks 🙂

  • http://www.112fryslan.nl/ Edwin Tjallings

    I have a problem with the clearing function. In the css version shows no thumbs but with the sass version its working fine. How can i fix this?

    • http://www.112fryslan.nl/ Edwin Tjallings

      I found a bug that is causing this in the css version. Joints.php line 125 custom.modernizr.js does not exist. In the sass version line 125 says modernizr.js.

      • Jeremy Englert

        Thanks Edwin! This has been fixed.

  • Henry Lemmon

    Hello Jeremy,
    I want to get the top-bar menu to be text only, or have the a’s or the li’s appear transparent I am using sass version, so I try to change the corresponding variables in settings to a color value of none, and I get complaints from the compiler. I am just trying to get a text only menu.

    • Jeremy Englert

      Hi Henry, “transparent” doesn’t seem to work in the _settings.scss file, however, you can use RBGA colors and set the opacity to 0 – that should do the trick.

      • Henry Lemmon

        yes rgba with opacity 0, but tell me if this is ok also?
        I changed the var on line 67 and line 68 of “_top-bar.scss to a hardcode #fff and since that cant be lightened by any % is that ok.. that works also, but mabye the rgba is better? css3 is needed to render rgba what do you think? thanks

        • Jeremy Englert

          The only issue with modifying those files is your changes will be overwritten if you ever upgrade the Foundation version. I try to keep all changes in the _settings.scss file or by overwriting the default styling in the _small.scss file. Try to avoid modifying any of the Foundation files.

          • Henry Lemmon

            I see thank you. I will use the rgba transparency.

      • Henry Lemmon

        Thank you very much I will use the rgba

  • mariarodriguez1983

    Thanks for the them Jeremey. I am wondering if someone else is having issues -at least in firefox- with the orbit slider.

    In my case it seems to stop from time to time, without a clear concrete replicable pattern. Pause on hover is expected to be disabled. So it works for a time but suddenly it stops working. It tends to happen more when you switch to other window and then switch back to firefox, although as stated there is no clear replication pattern.

    • Jeremy Englert

      I can’t seem to replicate this – are you having this issue on a fresh install? Can you share a demo link?

  • Henry Lemmon

    I want to make the top menu float to the right, so I hacked style.css, because I could not see a variable to change, and now each time I do “scss –watch scss:css” and make a change to settings I lose my hacks there has to be a better way. I am new to foundation and i am liking joints.

    • Jeremy Englert

      Henry,

      You’ll want to make your changes to the Sass files, not the CSS files. If you want it to apply to all screen sizes, make your changes to the small.scss file. If you only want it to apply to medium screens and up, make your changes to the medium.scss file and so on.

      Hope this helps! Let me know if you have anymore questions. Always glad to help!

      • Henry Lemmon

        I think the menu floats left by default, so can not find anything in the _large.scss, can I add my own styles to the _large.css file? I will try and see what happens. I am learning… I actually added the media querys at the end of style.css, but if I can add the styles to the propper files that would be even better. Thank you.

        wow that is kool.

        • Jeremy Englert

          Any changes you make to styles.css will be overwritten when you compile your Sass/Scss files. Media queries are already in place and they match the visibility classes found in Foundation 5.

          Remember, any code you write in large.scss will only apply to large screens (and up).

          If you’re trying to get the menu to float right, check out line 95 of the Functions.php file. Give it a menu class name of “right”.

          • Henry Lemmon

            I only want the nav.top-bar to float right for medium and up, so should I make the change in functions or just add that class with the appropriate rule to _medium.scss.

          • Henry Lemmon

            Thank you

  • Henry Lemmon

    am I allowed to add classes and rules to any of the scss files, if i can’t find a way to accomplish a layout or presentation change?

    • Jeremy Englert

      Correct, that’s the best way to go about editing files.

      • Henry Lemmon

        Thank you, I am learning fast this sass, with your custom theme I am having the best run at making a great site custom site.

  • Willow

    Hello Jeremy, I used your theme and I found it great! But I’ve got a little problem: i created an articles’ page (like a blog) wihich uses a customized template, created by me, with the same content of the index that’s in the theme. If I don’t include the code I don’t see any article. If I put a number of post per page, then I see articles in the first page, according to the maximum number I decided. Then I shoul see the aother articles in the second page BUT, when I go to the second page, below it indicates me always page number one, the url instead indicates page number two, actually it still shows the first page. So, I can’t display the other articles in no page. If I decide post per page -1, I can see al the articles in one page, but I wanted to split them in different pages. How can I do it? Do you have any tip?
    Thank you for any insight!

    • Jeremy Englert

      Willow,

      I’ll need a little more details on this to help. Can you send me a demo link?

      • Willow

        Hi Jeremy, I solved the problem right yesterday. Actually I put a wrong setting in WP that influenced all the rest, it wasn’t a problem with the theme. Thank you for your kind reply and…great theme!

  • Guest

    Hey @Jeremy Englert:disqus ! Thank you a million times for this theme. It’s great! I want to make a suggestion for better child theme integration. Check out your library/joints.php file on lines 125, 131, 134, 137, and 145 (or just search the document for ‘get_stylesheet_directory_uri’). If you simply change that to ‘get_template_directory_uri’, you’ll make your theme child theme-friendly right out of the box. I concede you may have reasons for using get_stylesheet_directory_uri over get_template_directory_uri that I don’t know about, but if it doesn’t matter to you either way, then perhaps you could include that in your next update. I’m choosing to use a child theme so that anytime Foundation and JointsWP are updated, I can update the parent theme without losing my changes. Thanks SO MUCH for a theme that saved me a TON of time!

  • http://getmodernmarketing.com Philip Stancil

    Hey @jeremyenglert:disqus! Thank you a million times for this theme. It’s great! I want to make a suggestion for better child theme integration. Check out your library/joints.php file on lines 125, 131, 134, 137, and 145 (or just search the document for ‘get_stylesheet_directory_uri’). If you simply change that to ‘get_template_directory_uri’, you’ll make your theme child theme-friendly right out of the box. I concede you may have reasons for using get_stylesheet_directory_uri over get_template_directory_uri that I don’t know about, but if it doesn’t matter to you either way, then perhaps you could include that in your next update. I’m choosing to use a child theme so that anytime Foundation and JointsWP are updated, I can update the parent theme without losing my changes. Thanks SO MUCH for a theme that saved me a TON of time!

    • Jeremy Englert

      Great suggestion! I’m actually making some changes to the theme, so I’ll add this to my list.

      I used to overlook Child Theme support as JointsWP was never really intended for that, however, the amount of people asking for it has changed my mind. However, my recommendation will always be to build directly on top of the theme.

      • http://getmodernmarketing.com Philip Stancil

        Hey Jeremy! I was trying to find out on the website (and on GitHub) if you had updated the theme since I posted this child theme code, and I wasn’t able to find any type of changelog. Do you maintain a publicly viewable changelog? I ask because you make what I assume are important updates, like updating from Foundation 5.1.1 to 5.2 on March 9, and I think that knowing about those updates could help us keep the foundation (pardon the pun) of our theme up-to-date, no matter what we build from there. What are your thoughts on this? As it is, I had to download the theme, only style.css and compare it to my live site’s style.css to see the Foundation version was different. Anyway, it’s my opinion a changelog outlining which lines on which files were changed would be beneficial to JointsWP! Just a thought!

  • Henry Lemmon

    Hello Jeremy,
    I have a static page with some links that lead to category-gallery.php, and on that gallery page I have many posts being displayed in sets of three across. “medium-4 columns” On the static page i code in anchors referring to the id of each post using the #post-id. The anchors work but I can not for the life of me figure out why they always cut off the title of the post with the browser window? even if I add a id to the h2 surrounding the_title(); call the anchor always only shows the body and the image but not the header?

    • Jeremy Englert

      Hi Henry,

      Can you send me a demo link?

      • Henry Lemmon

        I am developing on my localmachine with wamp, but I will set this up on a http server and if when I duplicate this anomoly I will bring this up again. my bad.

  • Henry Lemmon

    Hello Jeremy,
    I have posts looping out onto a three in a row using medium-4 columns. I close the row for each three posts with a if statement testing for mod 3 = 0. if I have a remainder of 1 post it will float to the left, but if there is 2 posts on that row it assigns a float right to the last of type. How can I stop this from happening?

    • JeremyMG

      Henry,

      First off, I’d LOVE to see your code using the IF statement to close the rows – I’ve been looking into doing something similar. Can you put this into a Codepen and send it to me?

      However, if you add a “end” class to the last post, it will keep it from floating right.

    • Jeremy Englert

      Henry,

      First off, I’d LOVE to see your code using the IF statement to close the rows – I’ve been looking into doing something similar. Can you put this into a Codepen and send it to me?

      However, if you add a “end” class to the last post, it will keep it from floating right.

      • Henry Lemmon

        I want to send you the code, but what is a codepen

      • Henry Lemmon

        ok i made a codepen how do I send it?

      • Henry Lemmon

        I am using jointswp with a category template so the template page, whenever it is called will display all the posts in that category. the number of posts are not predictable, and where the last one will fall is also up in the air, so if I can find out how to get a count of the posts, and mabye I can devise a if test for the last div with the class of med-4 columns and pop the .end class on it. I will have investigate a query that I can run on the number of posts in that category… unless you have a suggestion.

  • http://firelite.co exius

    What’s the actual Foundation version (i.e. v5.x.x) used for Joints-WP as of December 2013?

    • Jeremy Englert

      I believe 5.0.2. However, you can easily upgrade the Foundation version.

      • http://firelite.co exius

        Thanks Jeremy!

      • http://firelite.co exius

        I’m not quite sure how to upgrade it. Will JointsWP be upgraded to Foundation v5.1.1? It would be nice to have the new Equalizer feature.

        • Jeremy Englert

          The newest version of JointsWP uses Foundation 5.1.1.

          If you want to upgrade an existing website, simply download the newest version of JointsWP and grab the Foundation JS and Scss/CSS files and replace the old Foundation files.

          • http://firelite.co exius

            excellent

  • Henry Lemmon

    http://codepen.io/anon/pen/qjrmv

    here is the codepen for the IF statement to close the rows

  • Henry Lemmon

    Here is the code for the IF to close the row’s as they fill up. I got this code from

    http://stackoverflow.com/users/1139444/kwelch

    here is the CodePen.

    http://codepen.io/henrylemmon/pen/zwdvl

    • Jeremy Englert

      That looks like EXACTLY what I need. Thanks a ton!

  • Davide

    Hi Jeremy. It seems Orbit is not working correctly anymore with the new updates. I mean, it seems it just doesn’t start. Could you help us?

    • Jeremy Englert

      Check out the newest version. Foundation 5.2 made a lot of upgrades to Orbit.

      • Davide

        unfortunately there is a bug with Orbit in 5.2! It starts but stop at slide2. There is a fix in foundation forum. It seems we have to add “self.start();” after line 384 of “foundation.orbit.js”.
        But…using JointsWP…The problem is that even if we update foundation js files our pages are always using foundation.min.js. So we have to update also foundation.min.js @jeremyenglert:disqus How do you use to update foundation.min.js? THANKS! 🙂

        https://github.com/zurb/foundation/commit/ea03319894f20398d1a5db22fb1487e050574e58

  • Diana Myers

    Hi Jeremy – How can I get the “jointswp page navi” to work on a page template with on the home page? — Thanks, Diana

    • Jeremy Englert

      Can you send me a demo link?

      • Diana Myers

        Hi Jeremy – fortunately it worked out that I didn’t need the page navi on the home page! Thanks for responding.

  • Alexander Staroselsky

    Great theme, thank you so much for this! If one was looking to utilize libsass with JointsWP, would you have any suggestions or resources on best way to integrate it for compiling SASS? Would it be just adding a gruntfile.js to the theme or is there a more effective way to compiling and minifying the SASS?

    Thanks!

    • Jeremy Englert

      Most people tend to use CodeKit to compile the Sass in the theme. If you do not want to use certain elements, you can simply remove them from the _foundation.scss file.

      I am not familiar with Grunt.js, but I have received many requests about this. I’m going to attempt to look into this soon.

  • riyota kasamatsu

    Thanks for the great work with this theme. I’m using it to remake my e-commerce site. When I have been working with it i found that I’m not able to use the jetpack carousel, for image galleries, and image galleries in posts are styled a bit strange. If I use the three column gallery, and have six images in the gallery the second row and first image (or the fourth image) is not aligned with the other images in the row.
    When I test any other foundation bases theme I don’t get these problems. First i thought the carousel problem could have something to do with jquery, but probably that is not the case. Any ideas of what in Joints could be causing these issues?

    • riyota kasamatsu

      @jeremyenglert:disqus Hi again, I noticed that some other foundation 5 themes had the same issue (spine, wp-foundation) and there was discussion here http://wordpress.org/support/topic/jetpack-carousel-not-working-1 about a fix for wp foundation, though this doesn’t seem to be the reason for not being able to use jetpack carousel on joints. Could you or someone help me with this issue.

      • Jeremy Englert

        Can you send a demo link please?

        • riyota kasamatsu

          @jeremyenglert:disqus thanks for the reply. At the moment I’m developing it on my computer. If you have some ideas of what could cause this, I notice that there is a filter in joints.php, that modifies the gallery and when I take it out the original wordpress layout appears. But the trouble with jetpacks carousel continues. The jetpack carousel is there in the code, when I check it with firebug, though it doesn’t launch. I hope to be able to put the new site up sometime soon, so if I haven’t found a solution to the problem I might get back to you. And I will get back if I find a solution.

          • Jeremy Englert

            Without a link, it’s hard to say. But Joints uses jQuery 2, maybe Jetpack isn’t compatible?

            You can test this by changing the jQuery version back to the original.

          • riyota kasamatsu

            @jeremyenglert:disqus Thanks again. I doubt it is jQuery2, but I didn’t check it. I solved my problem with using the foundation clearing instead. But the problem with jetpack carousel is still there. Thanks again.

  • Davide

    EQUALIZER. I have issues with Equalizer. It seems it perfectly works in “desktop” (large) view but it’s not working when I resize the window (responsive – medium, large).

    • Jeremy Englert

      Others have pointed out this issue on the Foundation forums. It seems to fix itself when you re-fresh the page. However, I’m going to continue to follow the issue on the forums and hopefully someone comes out with a fix.

  • Katherine Kroll

    Jeremy,

    Thanks so much for this theme, it’s great! Quick question:

    I installed this plug-in so that I could have different display types for each category of post: http://wordpress.org/plugins/custom-post-template/

    However, when I try to use it, copied the “loop-single” page, renamed it “loop-single-whatevernewcategoryname” and the plug in registers that there is in fact a new post template other than the default. However, when I use it for a post, it renders JUST the html inside the “loop-single…” template without adding the header, footer, etc. etc.

    Is this how you would recommend implementing different displays for different single category posts? And if so, how do I get the plug-in to use the new single post template correctly?

    If this is not how you would recommend accomplishing this, how would you?

    • JeremyMG

      Hi Katherine, if you are simply trying to create different templates for each category, you can do this without the plugin. Check it out here:
      https://codex.wordpress.org/Category_Templates

      But to answer your question, you’d need to create an entire page, not just the partial/loop. So in your case, you would need to create single-whatevernewcategoryname.php and loop-whatevernewcategoryname.php. In your single-whatevernewcategoryname.php file, make sure you include the partial for loop-whatevernewcategoryname.php.

      Hope this helps!

    • Jeremy Englert

      Hi Katherine, if you are simply trying to create different templates for each category, you can do this without the plugin. Check it out here:
      https://codex.wordpress.org/Category_Templates

      But to answer your question, you’d need to create an entire page, not just the partial/loop. So in your case, you would need to create single-whatevernewcategoryname.php and loop-whatevernewcategoryname.php. In your single-whatevernewcategoryname.php file, make sure you include the partial for loop-whatevernewcategoryname.php.

      Hope this helps!

      • Katherine Kroll

        First, I had been looking at the page you linked to, but that only helped me create different page templates for each category, not different post templates for each category, am I missing someting?

        But regarding the plugin, so I did create the entire page. What I don’t understand is, where do I “include the partial for loop-whatevernewcategoryname.php” in the single template?

        • Katherine Kroll

          So let’s call the custom post type “gallery”. In my top level directory I have “category-gallery”, which is a page that displays the previews for all the gallery category posts, which is exactly what I want.
          However, I now want each of those gallery style posts to use a different template other than single. In my top level, I have “single-gallery.php” which calls get_template_part( ‘partials/loop’, ‘single-gallery’ ); (mimicking the style of the regular single).
          In the partials directory, I have “loop-single-gallery”, which is what renders, but without the header and footer, even though “single-gallery.php” in the above directory has the get_header and get_footer calls.

          • Katherine Kroll

            Oh my goodness. Sorry, I figured it out on my own I believe. I was trying to implement categories like custom post types. I added a category filter function to my functions.php file and that seemed to make everything work. Thanks!

  • Brian Feeley

    Hey Jeremy. Thanks so much for this project! Has been working out great. One question about the new bower-enabled version. I’m confused as to why there are 2 versions of _settings.scss now? Should the one in ‘library’ have the “foundation/_functions” call pointed into the bower directory now?

    • Jeremy Englert

      No, you don’t want to point it to the Bower version because then it will be erased everytime you update your Bower components. You want to keep your _settings.scss file separate.

  • Diana Myers

    Is anyone else having problems previewing posts without saving them first? Another issue, new categories are not added until the post is saved and then you have to check the category and re-save the post.

  • Jamison Hiner

    Can you help me set this up in codekit, when I save a file even before I make changes, I get this error

    Syntax error: File to import not found or unreadable: normalize.
    Load paths:
    /Users/jamie/Desktop/Dev_Websites/Steiergroup/wp-content/themes/steier_template/library/scss
    /Applications/CodeKit.app/Contents/Resources/engines/bourbon/bourbon/app/assets/stylesheets
    /Applications/CodeKit.app/Contents/Resources/engines/neat
    /Users/jamie/Desktop/Dev_Websites/Steiergroup/bower_components/foundation/scss
    on line 19 of /Users/jamie/Desktop/Dev_Websites/Steiergroup/wp-content/themes/steier_template/library/scss/style.scss
    Use –trace for backtrace.

    • Jeremy Englert

      What version of CodeKit are you using?

      • Jamison Hiner

        I’m using the latest code kit 2

        • Jeremy Englert

          This issue should be resolved.

    • Guest

      This theme looks great! I’m unfortunately having similar issues. I’m using CodeKit 1.9.3 build 8403. I’m a bit new to using SASS with foundation from within a theme folder (I’ve used it with Foundation outside of my themes and copied the compiled css afterwards). All I did was drag the Joints theme folder into CodeKit, opened up library/scss/style.scss and hit save and got the following error:

      http://snag.gy/WnO3C.jpg

      Backtracing didn’t really provide any less-confusing information. Would love a schooling lesson when you get a moment 😀 – thanks for working on an epic theme like this!

      • Jeremy Englert

        Working on finding the issue now. Its a real head-scratcher that different versions of CodeKit are throwing different errors.

    • Jeremy Englert

      This should be resolved.

  • DavidG

    I am trying the latest version of Mixture.io with libsass as a pre-processor (Super fast for compiling!). With a fresh copy of JointsWP, I am getting the error: ‘Sass C:xampphtdocsjointswp-contentthemesJointsWP-masterlibraryscssstyle.scss:11: error: file to import not found or unreadable: “\fonts.googleapis.comcss?family=Open+Sans:300italic,400italic,700italic,400,300,700” A ‘. If I comment out that line it then says it cant find the joints/gallery import and so on. The files are all there though. I’m stumped on this one. Any thoughts would be appreciated.

  • Leigh Walker

    Will we trying this out for sure. Thanks!

  • Christina

    Hi Jeremy. With a fresh installation of the CSS version, the mobile menu doesn’t work, but with the Sass version it does. It seems there is some style missing, but I’m not sure what? Thanks!

    • Jeremy Englert

      I’m going to take a look at this issue.

  • Stuart Nelson

    Great theme Jeremy! It’s seriously awesome. I have a question. I’m creating a 1 page site. I have my sticky nav bar at the bottom of the window. I have three pages aside from t homepage. I’d like these pages to appear over the homepage inside of a dropdown dropdown content box.

    Any advice on doing this?

    • Jeremy Englert

      Any example links? I’m trying to wrap my head around exactly what you are trying to achieve.

  • shipwreckzombies

    Hi jeremy thanks for the theme – stoked to see Bones and Foundation combined 🙂

    I have some questions about keeping up with your development via Git. Is it possible to fork the project, clone it to my local repository, plug it into wordpress and build a site, but also merge updates with your repository (upstream?)

    I’m new to Git, is this how it works or not really? Do I just download the zip and install the theme and then manually keep up with changes?

    Thanks!

    • Jeremy Englert

      in order to do something along these lines, you’d have to setup a “Child Theme”. While this is possible with JointsWP, I do not recommend it.

      • shipwreckzombies

        Can you suggest a method for upgrading, or is it done manually?

  • Henry Lemmon

    Hi Jeremy
    do we remove the bower_components file when we launch the site?

    • Jeremy Englert

      No, these files are linked to in the theme.

  • Henry Lemmon

    Hello Jeremy
    Thanks for all the wonderful work and support for this great theme.

    I am confused by the bower_components. Should I just act like they are not there? use scss and compass normally?
    now what gets removed and what stays when I launch the final project?

    can you point me to something to read or give me a brief description

    • Jeremy Englert

      Leave all Bower components in place, even after the project has launched. Bower allows you to quickly update all 3rd party integrations (like Foundation, jQuery, etc) as they are all located in one file.

      However, if you do not want to use Bower, you don’t have to. You can even rename the folder if you’d like, but then you’ll need to update the paths in the Functions.php and Joints.php files.

  • Henry Lemmon

    Hello Jeremy
    I can still change any of the php files and not loose my changes when we update?

  • Henry Lemmon

    Hello Jeremy
    below is what my command prompt says when I type sass –watch scss: css inside of my library
    Microsoft Windows [Version 6.0.6002]

    Copyright (c) 2006 Microsoft Corporation. All rights reserved.

    C:wampwwwwordpresswp-contentthemeshenrythemelibrary>sass –watch scss:css

    >>> Sass is watching for changes. Press Ctrl-C to stop.

    write css/login.css

    DEPRECATION WARNING on line 225 of ..bower_componentsfoundationscssfoundationcomponents_global.scss:

    Assigning to global variable “$default-float” by default is deprecated.

    In future versions of Sass, this will create a new local variable.

    If you want to assign to the global variable, use “$default-float: left !global” instead.

    Note that this will be incompatible with Sass 3.2.

    DEPRECATION WARNING on line 226 of ..bower_componentsfoundationscssfoundationcomponents_global.scss:

    Assigning to global variable “$opposite-direction” by default is deprecated.

    In future versions of Sass, this will create a new local variable.

    If you want to assign to the global variable, use “$opposite-direction: right !global” instead.

    Note that this will be incompatible with Sass 3.2.

    DEPRECATION WARNING: The return value of index() will change from “false” to

    “null” in future versions of Sass. For compatibility, avoid using “== false” on

    the return value. For example, instead of “@if index(…) == false”, just write

    “@if not index(…)”.

    on line 12 of ..bower_componentsfoundationscssfoundation_functions.scss, in `exports’

    from line 296 of ..bower_componentsfoundationscssfoundationcomponents_global.scss

    from line 5 of ..bower_componentsfoundationscssfoundationcomponents_grid.scss

    from line 10 of ..bower_componentsfoundationscssfoundation.scss

    from line 27 of scss/style.scss

    DEPRECATION WARNING on line 13 of ..bower_componentsfoundationscssfoundation_functions.scss:

    Assigning to global variable “$modules” by default is deprecated.

    In future versions of Sass, this will create a new local variable.

    If you want to assign to the global variable, use “$modules: append($modules, $name) !global” instead.

    Note that this will be incompatible with Sass 3.2.

    DEPRECATION WARNING on line 18 of ..bower_componentsfoundationscssfoundationcomponents_block-grid.scss:

    Assigning to global variable “$block-grid-default-spacing” by default is deprecated.

    In future versions of Sass, this will create a new local variable.

    If you want to assign to the global variable, use “$block-grid-default-spacing: $column-gutter !global” instead.

    Note that this will be incompatible with Sass 3.2.

    write css/style.css

    • Jeremy Englert

      These warnings are coming from Foundation, not the theme. From my understanding, Foundation is working on weeding out all deprecated elements.

      • Henry Lemmon

        Thanks Jeremy,
        Jointswp out of the box with the latest version of ruby, sass, and compass threw all the errors. I rolled back to sass 3.2 and compass 0.12.1 and the errors went away. what do you think? I would like to use all the latest software with joints.
        thank you.

        • Jeremy Englert

          Henry,

          The errors come from Foundation and are not JointsWP specific. I would assume Foundation will fix these errors with the next major update.

  • Henry Lemmon

    hello Jeremy
    tried to fix all those deprecation warnings by changing things in the respective files (4) about 6 errors total. got rid of the errors, but now most of the css for the website disappears when you type sass –watch scss:css in windows command prompt.

  • http://www.sarahacrowley.com Cera Crowley

    I’m working with the newest version of JointsWP and it seems that the dropdowns in my WordPress site will not work. I have my site started with styles and thought maybe I had overrode something. But I tried just the blank template with no styling, it shows the same result. I tried deactivating all my plugins to see if that was why with no change. Is anyone else having this problem?

    • Jeremy Englert

      Are you using the CSS or Sass version? Can you provide a link?

      • http://www.sarahacrowley.com Cera Crowley

        I was using the CSS version. I actually backed myself down to the last Joints before the update and it’s working now.

        gabriel.mirandacreativewebsites.com

  • Henry Lemmon

    Hello Jeremey
    Can we edit the component files like we used to before they were relocated to the bower folder.

    • Jeremy Englert

      Hi Henry,

      Sorry about the delay in my response – I’ve been neck deep in a couple of other projects. You should never make direct changes to any of the Foundation files as they will be overwritten when you update Foundation. If you don’t plan to ever update Foundation, then you can modify any files you’d like (however, this is not recommended).

  • Henry Lemmon

    Hello Jeremy
    Thank you for your help and I appreciate the wonderful theme.

    I rolled back the versions of sass and compass to 3.2 and 0.12.1 respectively and the deprecation warnings went away. I would get a warning when I set compass to watch, then one more warning about 5 or 6 variables that were deprecated then we would not overwrite the style.css file any longer. It would just watch and do nothing when you saved. I had to remove the entire theme and replace it with a clean set of theme files then it would overwrite two times and stop.. I rolled back sass and compass and the warnings stopped stopped? I used the theme as is in its entirety.

  • Henry Lemmon

    Hello Jeremy
    I stripped out all the files for sass and js out of the bower_components file. added them all to the library, corrected all the links to work with the file structure. the compiler cried a bit, but I got it all working. I know I want to use the bower package manager but I gotta figure it all out.

  • Henry Lemmon

    Jeremy
    Question: Install nodejs, and bower and run the compass watch? is that all I have to do to use jointswp with foundation5 and bower package manager? I wish there was a step by step for setting it all up

    • Jeremy Englert

      Henry, maybe this video will help:

      https://www.youtube.com/watch?v=8n9eNLSjg7U

      • Henry Lemmon

        Thank you Jeremy.

      • Henry Lemmon

        Hello Jeremy, really want to love this theme, because it is the best adaptation of foundation/wordpress that I have found

        Today with a new load of joints wp and wordpress, all the updated gems, sass compass using git I get the same warnings when I compile, and it cant find the foundation.js?
        Thanks.

  • Henry Lemmon

    Hello Jeremy

    Here are the errors:

    Microsoft Windows [Version 6.0.6002]

    Copyright (c) 2006 Microsoft Corporation. All rights reserved.

    C:wampwwwwordpresswp-contentthemeshenrythemelibrary>gem update foundation

    Updating installed gems

    Nothing to update

    C:wampwwwwordpresswp-contentthemeshenrythemelibrary>sass –watch scss:css

    >>> Sass is watching for changes. Press Ctrl-C to stop.

    >>> Change detected to: scss/_small.scss

    DEPRECATION WARNING on line 225 of ..bower_componentsfoundationscssfoundationcomponents_global.scss:

    Assigning to global variable “$default-float” by default is deprecated.

    In future versions of Sass, this will create a new local variable.

    If you want to assign to the global variable, use “$default-float: left !global” instead.

    Note that this will be incompatible with Sass 3.2.

    DEPRECATION WARNING on line 226 of ..bower_componentsfoundationscssfoundationcomponents_global.scss:

    Assigning to global variable “$opposite-direction” by default is deprecated.

    In future versions of Sass, this will create a new local variable.

    If you want to assign to the global variable, use “$opposite-direction: right !global” instead.

    Note that this will be incompatible with Sass 3.2.

    DEPRECATION WARNING: The return value of index() will change from “false” to

    “null” in future versions of Sass. For compatibility, avoid using “== false” on

    the return value. For example, instead of “@if index(…) == false”, just write

    “@if not index(…)”.

    on line of ..bower_componentsfoundationscssfoundation_functions.scss, in `exports’

    from line 296 of ..bower_componentsfoundationscssfoundationcomponents_global.scss

    from line 5 of ..bower_componentsfoundationscssfoundationcomponents_grid.scss

    from line 10 of ..bower_componentsfoundationscssfoundation.scss

    from line 27 of scss/style.scss

    DEPRECATION WARNING on line 13 of ..bower_componentsfoundationscssfoundation_functions.scss:

    Assigning to global variable “$modules” by default is deprecated.

    In future versions of Sass, this will create a new local variable.

    If you want to assign to the global variable, use “$modules: append($modules, $name) !global” instead.

    Note that this will be incompatible with Sass 3.2.

    DEPRECATION WARNING on line 18 of ..bower_componentsfoundationscssfoundationcomponents_block-grid.scss:

    Assigning to global variable “$block-grid-default-spacing” by default is deprecated.

    In future versions of Sass, this will create a new local variable.

    If you want to assign to the global variable, use “$block-grid-default-spacing: $column-gutter !global” instead.

    Note that this will be incompatible with Sass 3.2.

    write css/style.css
    all my gems are updated and I got a fresh jointswp from the website.

    I even tried the bower install myself>

    The only thing that solves the errors is to roll back the version of sass and compass?

  • nathan0shumate

    This is great, thanks for making. I was butchering bones to make it do the same thing, found this and it saved me a ton of time.

    • Jeremy Englert

      Glad you like it! I’d love to see anything you throw together with it.

  • Jin Su Park

    Hi Jeremy, I love your theme but I found a small issue, I am currently using the CSS version of jointsWP however, in the joints.php where you enqueue scripts, loading path jquery 2.1.0 is /bower_components/foundation/js/vendor/jquery.js this should be changed to /foundation/js/vendor/jquery.js shouldn’t it? Since the CSS version doesn’t have the bower_components folder?

    • Jeremy Englert

      Hi Jin,

      Thanks for pointing this out. This has been corrected.

  • lokitoki

    sorry for bothering you but how do i use this accordion properly? i set up 2 sample accordion posts and applied them to the same category. now how can i integrate this category or those accordions into a page? thank you so much for any help and the work on this theme.

    • Jeremy Englert

      Hi,

      The accordion post type is only setup to display posts. If you need something more flexible that you can apply to a page, simply use the markup found in the Zurb docs.

      http://foundation.zurb.com/docs/components/accordion.html

      • lokitoki

        so it is not intended to animate.
        thank you for your help

  • Henry Lemmon

    Hello Jeremy,
    I want you to know that I finally got it all set up with bower and running great. I am glad because I cannot find a theme that uses foundation and wordpress that comes close to being as good as jointsWP.
    Thanks.

  • Henry Lemmon

    Hi Jeremy,
    Now when I do the bower update it works well but it gets rid of the bower_components/foundation/js/vendor directory and it’s contents? “the vendor dir is gone”? it just wipes that out when I update foundation update or bower update?

  • Albert

    Great theme!
    How can I override links style in the recent entries widget without affect all links (uses default style for links globally) but I not like edit core files to add a new class. It’s possible? There are some defined on any scss file?
    Thanks Jeremy!

    • Jeremy Englert

      I’m sure the widget has an ID that you can target with your Scss.

  • Robin Cox

    This line “” gives a validation error (which doesn’t semm to hurt anything). But what is it for?

  • Robin Cox

    Anyways, this theme is brilliant, thanks a bunch!

  • Logan

    Jeremy, thanks for this. I have a quick question. I am not super familiar with the command line so I used the app, Scout, to setup and get everything going. When I go to run/compile the scss file I am getting some errors and I can’t figure out how to fix them. Could you be of assistance?

    I have been able to fix some, but I can’t figure out this one:

    error style.scss (Line 206 of _grid.scss: Invalid CSS after “…xports(‘grid’) “: expected selector or at-rule, was “{“)

    When I go and look at the said file, (/bower_components/foundation/scss/foundation/components/_grid.scss) this is the line it is referring to:

    @include exports(“grid”) {

    I am not seeing the reason why it is giving an error, can you help me out? Thanks man.

    • Logan

      Nevermind this question. After doing some research and banging my head on the wall, the issue was that the Scout app I was using only supported sass version 3.1.9, and this was causing compiling issues. Once I updated to the latest version of Scout (0.7.1) this fixed the issue because it supports sass 3.2.1.

      Anyway, if anyone else has this issue of compiling errors within the Scout app, be sure you have the latest version installed.

  • Richard

    I was trying to use this theme because I used Foundation 5 on another project. The problem I am having is that when I try to use the grid on some pages, wordpress keeps adding and empty elements. How do I use JointsWP so that wp will not add this extra stuff?

    • Jeremy Englert

      This seems to be an issue with all WP themes. Just try to avoid having any blank lines and that should help the issue.

  • Germano Assis

    I don’t know how or where to include foundation equalizer :'(

    • Germano Assis

      It’s right include it in joints_scripts_and_styles() in joints.php ?

    • Jeremy Englert

      Equalizer is already included.

  • eileen

    Hello Jeremy,

    I am trying to implement the search box and have found the code in joints.php. I would like to modify the the layout in my template. I would like the search button to be no the right of the search box as opposed to beneath the search box. Basically like this Foundation form example i have attached. Can you please let me know how I can accomplish this? I am new with this and cannot figure out how to integrate the joints_wpsearch function with the css for my template. Thanks.

    • gzt

      Hi Eileen & Jeremy, I’m having a similar problem. What is the best code to have the search within the top-bar appearing as the last link in the navigation? I can create with static html like in the images & also: http://codepen.io/Phil-D/pen/AgKnl but I not sure how to get the same results with Joints. Do you have any suggestions?

      • Greg

        Hi Eileen, gzt and Jeremy.

        Replying to old comments, I know. But I’m wondering if you found a way to do this in JointsWP?

        • Jeremy Englert

          You should be able to add the joints_wpsearch function after the nav call function.

          • Greg

            Thank you for your quick reply!

            In library/joints.php I see:

            // adding the joints search form (created in functions.php)
            add_filter( ‘get_search_form’, ‘joints_wpsearch’ );

            I also found the joints_wpsearch function, where $form is defined, in that same file (but not in functions.php)

            Maybe I’m on the wrong track, but I’d like to use get_search_form() to read searchform.php template file if it exists and your $form if not. I was thinking of putting that logic in functions.php but maybe I should put it in library/joints.php. Any thoughts on that?

            Anyway, I’m still plunking away at this. Fairly new at both WP theme dev and Foundation so I’m struggling to get joints_wpsearch to echo as expected. I shant give up!

          • Jeremy Englert

            The joints_search function will be removed in JointsWP 3 in favor of the
            “WordPress way” of handling the search. There was nothing really
            different about the joints_search – it was simply carried over from
            Bones.

            You can check out the JointsWP 3 branch here – it’s not
            ready for production, but you can see a searchform.php has been added
            (with HTML5 support) and the joints_search function is gone:
            https://github.com/JeremyEnglert/JointsWP/tree/JointsWP-3

            However, I recently did something very similar, here is the code I used:
            http://codepen.io/anon/pen/XJYQjd

            It stripped down just to show the part you need. The website is here (the styling will be different):
            http://bledsoelaw.com/

          • Greg

            Jeremy,

            Thank you! Very helpful, indeed. Onward I go!

      • Nicholas Ajose

        Hi GZT I have been trying to implement the Foundation multilevel off-canvas menu in Joints (w/o search) as you have done to no avail. Would appreciate if you might share your solution?
        Many thanks
        Nick

    • Nicholas Ajose

      Hi GZT I have been trying to implement the Foundation multilevel off-canvas menu in Joints (w/o search) as you have done to no avail. Would appreciate if you might share your solution?
      Thanks Nick

  • eileen

    Nevermind! Thanks. I figured out I could float both inputs, make the search box 80%wide and the button 20% wide and it works

  • http://peterle.me/ Peter Le

    When I preview the WordPress site on a mobile the admin bar (#wpadminbar) is detached from the top. It’s an easy fix, but is anyone else getting this problem?

    http://i.imgur.com/u0ATHxQ.png

    • Adriano Corte Real

      Same is happening to me. Did you figure it out?

      • http://peterle.me/ Peter Le
        • Jeremy Englert

          This will be updated in JointsWP 2.

          • OzzyLovesBabyShampoo

            It’s not fixed…the WordPress navbar is still detached from the top AND the site menu disappears entirely. See screenshot. At least before there was still a menu for the website.

  • lokitoki

    how could i insert Portfolio into a menu. so that i can use foundation popups for one menu item?
    I did not find anywhere the possibility to add custom html like data-reveal-ajax into the wordpress main menu

    • lokitoki

      i made it like this. it is added as last item of a menu. i do not know how to change the order with php code but at least it works

      add_filter ( 'wp_nav_menu_items', 'your_custom_menu_item', 10, 2 ) ;
      function your_custom_menu_item ( $items, $args ) {
      if ( $args->theme_location == 'main-nav' ) {
      $items .= 'Portfolio';
      }
      return $items;
      }

      • Jeremy Englert

        Very impressive. I’ll have to remember this.

  • http://tyleroakleaf.com Tyler Oakleaf

    Hi, I’m having trouble with the offcanvas sidebar. It just drops to the bottom of the page instead in the small size instead of actually being an offcanvas sidebar. Have tried on two different servers to no avail. Any advise on how to get it working would be wonderful. Thanks!

  • steven_nc

    Really interesting theme. I am having trouble getting responsive videos. Not sure if it is a left over from previous theme, a plugin, or a bad setting. What is the best way to put YouTube (or other) video on the site?

  • MelB

    Hi, so a little new to WordPress Dev but have some familiarity with SASS/SCSS. Just downloaded joints and have tried making changes to the _small.scss file but none of the changes are showing up on my local testing site. Any advice?

    • Jeremy Englert

      Are you using a program like CodeKit or using the command line to tell your files to compile Sass files/changes? I highly reccomend CodeKit 2 if you are on a Mac.

  • linx

    Hi, does anyone have any solutions that i can incorporate to get the jointsWP working on ie7 and ie8?

    • Jeremy Englert

      Foundation 5 doesn’t support IE7 or IE8 – however, there are some ways to get it to work. Check out the Foundation forums.

  • linx

    Hi, can anyone advise me on how i can get JointsWP to work on ie7 and ie8?

  • Bill Siebold

    I am using Woocommerce with JointsWP – wondering if anyone has experience with template overrides and /or styling the WooCommerce product listing / archives.

    • Jeremy Englert

      JointsWP 2 will be more WooCommerce friendly. I recently ran into this issue as well.

  • jkinley

    Hi again. I was wondering if JointsWP supports adding the special classes to top-bar. Specifically, I’d like to be able to use .button on one of the links. When I do, it breaks. Is this because we don’t have .has-form on the li elements? Any help always apreciated.

  • jkinley

    What is the proper way to remove the Custom Types and Accordion types in the Admin? This is potentially confusing for a client. Is there a specific reason why these are by default included with JointsWP?

    • Jeremy Englert

      In the functions.php file on line 33 and 34 – you can simply remove these lines or comment them out. They are included by default so users realize they are included with the theme. JointsWP 2 will handle this slightly different though.

  • jkinley

    Hello there. Just wondering. With Gravity Forms how you style elements with Foundation. I have GF installed and their CSS deactivated. But I I have tried adding Foundation class names and nothing seems to work. Any advice? Thank you as always.

    • Jeremy Englert

      What classes are you trying to apply?

      • jkinley

        Hmm. I guess I wasn’t thinking. The ready classes don’t seem to work because, um, I disabled their css. Any tips on styling the form? I always have trouble styling Gravity Forms. You can see in the image, that the layout does not look that nice with the advanced name field. Can we use some of the form features on the foundation site? I guess you do this by targeting the classes that Gravity Form spits out? Thanks.

  • Thomas Wilson

    Hi Jeremy,

    Firstly – thanks for an excellent theme! It’s been awesome to work with so far and I’m stoked to be able to quickly implement my initial investigations into foundation into a wordpress build.

    Everything has been self explanatory so far, but i’ve now hit a snare….

    I would like to use a fixed nav top bar for screen sizes large and up, and off canvas nav for small and medium screens.

    I figured I would edit the header.php file with some visibility classes – alas after spending a morning on it I haven’t been able to reach a decent solution.

    The way I have the header is like so:

    <!-- You only need to use one of the above navigations.

    Offcanvas-sidebar adds a sidebar to a "right" offcanavas menus. -->

    I tried a bunch of combinations with the visibilty classes but nothing achieved what I was after. Figured I’ve probably gone about it the wrong way.

    Could you offer any advice on how best to set up?

    Thanks
    Tom

    • Guest

      Sorry it stripped out the PHP and comments – here is a screenshot for reference –

    • Guest

      Sorry it stripped out PHP and comments, here is a screenshot

    • Jeremy Englert

      Thomas, the default JointsWP install should do exactly what you’re asking – it uses a topbar navigation on medium and up, then uses an off-canvas navigation for small devices. If you want to edit these files, try checking out the partials/nav-offcanvas.php file.

  • Thomas Wilson

    Hi Jeremy,

    I’ve just updated Codekit which has in turn broken my site! Seems to be a result of the included SASS update.

    http://incident57.com/codekit/versionhistory.html

    http://foundation.zurb.com/forum/posts/18856-sass-342-compilation-problem

    There are details here on how to fix, but I can’t locate the relative files in Joints?

    Any help would be much appeciated.

    Thanks

    Tom

    • Jeremy Englert

      Hello, this seems to be an issue with Foundation and Sass 3.4 – trying to find a fix.

      • joshmcfaul

        I applied the fix to the _foundation.scss file which fixed the issue. However, after doing so, selecting elements in the chrome inspector is sluggish. I’ve tried this a few times on a blank JointsWP theme, and can’t figure out what else it would be?

    • NielsPilon

      Hi Tom,

      Had the same issue and after updating the file it works again. You can find the file in the /bowser_components/ map which you can find in the root of your theme.

      • Thomas Wilson

        Thanks so much Niels, Bravo your a champ!!
        Much obliged,
        Tom

  • Pingback: Google()

  • http://www.legiondesigns.com Kevin Ray

    Is there a reason that the off-canvas menu isn’t functioning properly. It is only as tall as the specified bar height instead of all the way down the side.

    Screen – http://legiondesigns.com/joints.jpg

    • http://www.legiondesigns.com Kevin Ray

      So then this is obviously not compatible with WordPress 4.0?……FAIL

      • Jeremy Englert

        Kevin, that is incorrect – JointsWP is 100% compatible with WP 4.0…Not sure what led you to believe otherwise.

        I’ve ran into a similar issue and it normally has to do with the code not being setup correctly (normally an unclosed div or a div with a weird height value).

        If you have a link, I can take a closer look. But if you load up a blank JointsWP install, you’ll see that the offcanvas navigation works 100% fine.

  • Thomas Wilson

    Hi Jeremy,

    This morning I made a simple css edit > re-feshed the page the I found most of the foundation features are disabled i.e the top bar, grid and off canvas menu have disappeared/ no longer load correctly. It’s really confusing??? I have been over the stylesheets and everything is in order.

    As posted below I had wondered if codekit’s sass update was the cause?

    Do you have any advice on what might cause this? Or how to troubleshoot such a problem?

    Has anyone else had similar problems?

    Any help would be most appreciated

    Thanks

    Tom

    • Thomas Wilson

      Hi Jeremy,

      I have run a comparison of the compiled css form the broken site and a recent version I had online. There are large blocks of foundation CSS missing. E.G – see screenshot.

      I would presume this meant the settings.scss wasn’t being compiled correctly? But as you’ve no doubt guessed I’m new to this workflow so don’t really know….. I’ve thoroughly enjoyed the sass and joints ride thus far, but now I feel like im stuck up shit creek without a paddle….

      Please could you advise if this is likely to be a personal error on my part, or if in fact there is an issue with the latest version of codekit, sass 3.4.2 and foundation as decribed here – http://foundation.zurb.com/forum/posts/18856-sass-342-compilation-problem

      Any help would be greatly appreciated

      Thanks
      Tom

      • Jeremy Englert

        Hi Kevin,

        It does seem like Foundation has some major issues with Sass 3.4. I’m working on getting fixes in place as I am running into similar issues.

        • Thomas Wilson

          Hi Jeremy,

          Great to hear, I had assumed as much – please keep me updated here. Good luck!

          Thanks to hear.
          Tom

          • Guest

            Hey guys, I just saw this thread. I had the same issue the other day when I updated to codekit 2. This is what I read to fix it: ttp://foundation.zurb.com/for…

          • jkinley

            Sorry for the double post. Plus, it is showing as guest and not me. Not sure what happened.

          • Thomas Wilson

            Yes thats what I used too! Initially I had trouble locating the file “_foundation.scss” but thankfully Niels steered me in the right direction.

          • Guest

            I had a similar issue when updating to codekit 2. Here is the fix that worked for me: ttp://foundation.zurb.com/for…

        • NielsPilon

          Hi Jeremy,

          Running into the same issues here after updating to Codekit 2. I’ve already downgraded Sass and Compass as suggested at the Foundation forums http://foundation.zurb.com/forum/posts/18630-scss-compiles-but-resulting-css-file-incomplete but that didn’t solve the issue unfortunately.

          Hope you can find a fix soon.

          Thanks
          Niels

          Edit: this solution solved the issue for me using Codekit 2 http://foundation.zurb.com/forum/posts/18856-sass-342-compilation-problem:

  • jkinley

    Hi Jeremy. Anyway to get the joints search into the top-bar? I tried, but not having much success getting it to fit. Thanks!

    • Jeremy Englert

      This may be tricky. I’ll look into adding it to a future version.

  • jkinley

    Hi there! I was wondering if anyone had a solution to the gaps that form in the header when resizing the browser? It seems it can get buggy when transitioning from topbar to tabbar and vice versa.

    • Jeremy Englert

      Do you have a link?

  • Michael McDonald

    I’m getting started with the CSS version of Joints. I want to use different Google fonts and I was wondering how to edit the call to Google fonts in the header. I can’t seem to find the code anywhere to make the change.

    Also, thank you so much for creating this theme. I looked at tons of Foundation and Bootstrap themes, they were crazy complicated. I look forward to moving to the SASS version soon.

    • Jeremy Englert

      It should be in the css/styles.css file.

  • Brian Tippets

    I’m fairly experienced at making websites, but I’m just getting started using SASS/SCSS and Foundation/JointsWP so excuse my beginner question. I’m trying to add a border to the bottom of the top bar. Normally this is simple, but the SASS is throwing me off. According to Foundation’s documentation you should make custom style changes to a file called app.css. That doesn’t even exist (that I see) in the JointsWP setup, so I guess my main question is this: where is the best place to put custom styles when using JointsWP?

    • Jeremy Englert

      If you want it to apply to all size devices, place it in the library/sass/small.scss file. This file contains all of your base styles.

      • Brian Tippets

        Thanks Jeremy. I appreciate it. Also, thanks for creating this theme. I can tell it’s going to helpful for my projects moving forward as I get more familiar with Foundation and everything else. Take care.

  • Dea

    Hi Jeremy
    Thans for this nice theme. I have question about it. How can i add pagination and next and previous link in the end of each post
    thank you for answer

  • Dea

    Hi Jeremy

    Thanks for this nice theme

    i have a question how can add to post button next and previous post?

  • Chris Lusk

    How can I integrate WooCommerce with this theme? I a noob so step by step would be great 🙂

  • http://www.raeannewright.com/ Raeanne Wright

    Hi there, Jeremy. Firstly, thank you for Joints! I am absolutely loving the theme and how efficiently its coded. I am primarily a designer and front-end developer, so javascript is my weak point and I’m struggling to figure something out that’s probably quite simple! I am adding the Slick Slider to my site (http://kenwheeler.github.io/slick/) and can’t quite figure out how to add the scripts. I see that they should be added to the scripts.js file (‘add all your scripts here’) but I don’t know the syntax for doing so… any assistance is greatly appreciated! Thanks so much!

    • Jeremy Englert

      @raeannewright:disqus, I actually recently tried to add Slick to a project I was working on and ran into an issue. However, I’ve never tried installing it on a blank JointsWP install. Let me give it a shot over the holidays and see what I can figure it out.

      • http://www.raeannewright.com/ Raeanne Wright

        Awesome, thanks Jeremy! Keep me posted 🙂

        • jkinley

          I have successfully integrated Slick Carousel with JointsWP 2.0 Beta. It works pretty well I suppose, but mainly for a hard-coded solution. I ended up using Soliloquy with the Carousel Add-on. This is much easier and is more user-friendly to update, which makes it good for a client site, or when you don’t always want to mess with code. This solution costs some money, but you do get support.

          If you want to pursue Slick then you need to enqueue the CSS and JS files first. This can be tricky as you need to put the files in a good spot and make sure you are using the correct paths to the files. If you have done that, then you need to add some code to the scripts.js file you mentioned. The easy way to do this, is to grab one of the snippets of code they have for examples on their site ( see attached image). Once you do that, you will have to play with the breaking points and slick settings to get the results you want. Hope this helps.

          • Jeremy Englert

            Huge thanks! I’ll be sure to reference this post whenever someone asks about Slick.

          • http://www.raeannewright.com/ Raeanne Wright

            Just realized I forgot to respond to this… thank you! I was able to get it working after all 🙂

  • Missus Delicious

    Hey Jeremy,

    First of all, thanks for putting this together. It’s been a real treat to learn more about Foundation with WordPress.

    Everything has gone pretty smoothly except for one issue: I’m having a tough time using excerpts within the theme. In most of the other themes I’ve used, when you add an excerpt to a post it’s used in the index and archive pages out of the box and shows a “read more” button but I can’t seem to get the same thing going easily here. Before I start hacking away at the code, will this have to be coded in manually or am I looking in the wrong place?

    • Jeremy Englert

      Sorry for the delayed response.

      Check out this file: /partials/loop-archive.php

      The change “the_content” to “the_excerpt” – that should do what you’re looking for.

      • Missus Delicious

        Oh dang, I forgot to mention that I tried that already and it seemed to only selectively show the “read more” link under my posts. I suspected that this was due to the fact that many of the posts are very short (so it shows the whole post instead of truncating it), but upon further testing today it appears to be totally random.

        I updated all plugins where applicable and disabled any I suspected of interfering or I can live without, but no dice. I also took one of the problem posts, tried to add more content (it’s my understanding that 55 words is the default cutoff, so I did about double that), added in an excerpt, and even inserted a read more link in the editor, and still nothing.

        Frankly, since this likely either a personal problem or a programming one, I’d be happy to just have it display the excerpt (or if not available, the first X words) followed by a “read more” link for every post. That should be the default behavior, right?

        If I’m the only one with this problem, then I’ll just need to dig a bit deeper into my setup and compare it to the behavior on a fresh install.

  • Bob

    Hello Jeremy, One of my clients wants me to develop a parallax site using your theme. Is this easily doable? How do I create parallax effects?

    • Jeremy Englert

      @disqus_ZZL7hMagdR:disqus, parallax features aren’t built into Joints, but like most things, they can be easily added. If you Google around, you’ll find a ton of awesome tutorials. Here is one I found that is a full CSS solution: http://davidwalsh.name/parallax

  • Bob

    Hello Jeremy – One of my clients has asked to create a parallax site using your theme. How do I create Parallax effects?

  • jkinley

    Is Joints officially Joints 2.0 now? Based on GitHub, it looks as so. Happy Holidays. Thanks for all your hard work, Jeremy.

    • Jeremy Englert

      Correct! I need to update the CSS version, but the Sass version is ready to go.

  • Gary McCready

    Hi, I’m working with a developer who inherited our about-to-go-live site, and in the midst of some final changes, our front-page news/announcement posts seem to age-out of the first page after a few days and instead wind up on the page 2 +, leaving a nice hole on our front page. Now, I think it would be quite illogical for a post to disappear after a few days of being on the front page, but some said it is a feature. Any clue to how to allow x number of most recent posts of any age (arranged chronologically) appear on the post area first page?

    The development website is http://faith.hopeworksyouth.info/

    • Jeremy Englert

      Gary, it appears your developer must have done something to make the posts “age out” after a few days. Normal WordPress functionality would keep them in place until newer posts pushed them to page 2. It could be a plugin or coded into the posts query – its hard to tell without having full access to the website. You may also want to have your developer look at the mobile version of the website, it looks like a few things aren’t displaying properly.

  • Brian Burke

    Hi Jeremy, thanks for your hard work on this theme; it’s been a life-saver for me.

    I’m currently working on a website (http://theclayman.com/v2/) with pretty heavy navigation, dropdowns etc. For smaller screens I’m using the off-canvas menu, but unfortunately the dropdown/multilevel functionality disappears, and instead there is just one long list of menu items that must be scrolled through.

    Is there an elegant way to include dropdown functionality in that off-canvas menu?

    Many thanks.

    • Jeremy Englert

      @disqus_a5RRlLEnC1:disqus, unfortunately, there is no “out of the box” solution for adding dropdowns to the offcanvas menu. However, it should be easily achievable with a little bit of jQuery. Simply use CSS to hide the child elements and then use jQuery to toggle the class on/off when clicked.

      PS – I noticed your mobile nav isn’t opening, not sure if you are aware of this.

      • Brian Burke

        Thanks for the reply. I’ll look to solve the dropdown issue using your suggestion.

        I wasn’t aware there was a problem with the mobile nav, however. I’ve tested it on many different browsers/platforms and it works. May I ask which device(s)/browser you used?

  • Marisa Di Monda

    HI Jeremy

    Thanks again for the theme!! I am just having some trouble with my toggle menu button. I have changed the media queries in the css so the toggle is always visible and I can have that drop-down menu but the toggle button doesn’t actually work until the screen is 40em.
    Is there something in the js causing this?
    CHeers

    • Jeremy Englert

      I’m guessing you’re talking about the full width image? Or are you talking about changing the background color?

    • Jeremy Englert

      Can you share a link?

  • Pingback: cheap North Face Down Vest()

  • jkinley

    Hi Jeremy, I am trying to edit Joints/Foundation to get the retro ‘page’ look (see attached). I realize this is not common practice these days and I don’t really like it, but a client wants it. Any ideas on how best to handle the css with Foundation? I am playing with it, but not sure what would be the best way with the default Joints templates. Any ideas greatly appreciated.

    • Jeremy Englert

      I’m guessing you’re talking about the full width image? Or are you talking about changing the background color?

  • jkinley

    Jeremy, I noticed that the top-bar toggle is not working on my iPhone. Have you or anyone else had issues with this?

  • Brian Tippets

    Probably another newbie question, so hopefully it’s easy to answer and I’m just overlooking something. In the _settings.scss file there is a group of global variables near the top that look like they should affect the body of the site pages:

    $body-bg:
    $body-font-color:
    $body-font-family:

    I’ve tried enabling them but they don’t seem to have any affect on the pages. I end up having to go into the style.css file and manually change these specific styles. Is there some trick to getting it to pull from those variables listed above instead? It would be nice to keep the edits there if I could.

    • Jeremy Englert

      @brian_tippets:disqus – I’ve noticed this as well and it seems to be a bug in Foundation. However, there is a bit of a workaround.

      So lets say you changed the $body-font-family variable (on line 130 of the settings.scss file. You now need to go through and un-comment every line you want that change to apply to. For example, on line 199, you’ll see ‘$header-font-family: $body-font-family;’ – if you un-comment that line, your change will now apply. As mentioned above, I believe this is a bug and I’ll be reporting it to the foundation team.

      Side Note – You should avoid making changes to the style.css file. That file is going to be overwritten anytime you compile your Sass changes. Put you custom CSS into your Scss files.

      • Brian Tippets

        Thanks Jeremy. I should have noted that I wasn’t actually making the changes in that style.css sheet, that was just where I noticed the original styles were. Either way, I’ve applied what you said and it works.

  • Alex Popp

    Jeremy, I’m using JointsWP with CodeKit and wondering what the best option is to connect the bower_components in Joints so I can update them easily (or add more) via CodeKit?

    • Jeremy Englert

      @alexpopp:disqus – are the current bower_components not showing up in CodeKit for you?

      https://www.youtube.com/watch?v=iiMMWGInPrg

      • Alex Popp

        I fixed it. Turns out I don’t understand CodeKit like I thought I did. Loving Joints though!

  • Giuseppe Paccione

    good theme, i think themes should not modify core WP behavior, like jquery overwrite.

    • Jeremy Englert

      @giuseppepaccione:disqus – WP is packaged with an older version of jQuery. Foundation “requires” jQuery 2.0.

      However, I have used older versions of jQuery with Foundation and didn’t notice any issues – so you should be fine if you want to use the packaged version of jQuery.

  • Pingback: Moncler BLEU Jackets()

  • Brian Tippets

    Does anyone know if there’s a way to integrate the UberMenu plugin (http://wpmegamenu.com/) into this theme? From their own Knowledgebase, it looks like it doesn’t work out of the box with a stock Foundation install, but with a mod it does (see here: http://sevenspark.com/docs/ubermenu-wp-foundation). However, I think this theme must take things a step further because I can’t seem to get the fix to work. It would be nice to be able to have some of the additional functionality in the menus that this plugin allows but I don’t know enough of the programming side to make them work together.

    • Jeremy Englert

      That write up doesn’t look like it’s for a blank Foundation install – it is specific to a WP theme called “WP Foundation” which was made by 320press.

      I’ve never used Ubermenu, so I can’t be certain what the issue is. However, JointsWP doesn’t use the normal wp_nav_menu call. I may change this in JointsWP 3 – but I’m not 100% sure yet. Despite it not being the “WordPress way” I really like the way it is setup in JointsWP now.

  • Greg Pare

    Maybe it’s because I haven’t had enough coffee today, but for the love of all things, how can you center the entire main navigational menu? Foundation is a little new to me and while I can float the nav left or right, “margin: auto auto” doesn’t work and I can’t tell if it’s because certain parent divs are collapsed or floated… Again, it might just be me, but any help would be greatly appreciated.

  • fpfan

    Hello! How do I include magellan (foundation.magellan.js)? I suppose I should enqueue the script but what’s the best way to do it? In joints.php, or should I paste magellan the code in scripts.js?

    • Jeremy Englert

      Magellan is included with the theme by default – you shouldn’t need to add anything. Are you having issues?

  • Thomas Wilson

    Hi All,
    Great to see things have been freshened up here Jeremy and that further developments are in the pipeline. I love Joints!
    I’m having an issue with a few sites in development (sorry no links just at the mo), but I wonder if anyone else has had this problem….
    I’m using a fixed Top bar and when I scroll right to the top of the page the top bar disappears, then when I scroll down again it reappears?
    Any help would be much appreciated

    • Jeremy Englert

      Does this issue only occur when the admin bar is visible?

      • Thomas Wilson

        Hi Jeremy,

        Thanks – I disable the admin bar so its not visible.
        BUT….. I have now tested while logged out and the problem seems to have stopped so it is perhaps still related somehow.

        Cheers!

  • Carmen Borrelli

    I have a question about compiling the scss. I’m customizing the settings in library/scss/_settings.scss and then compiling library/scss/style.scss. It seems that mostly all of my settings customizations are taking effect except for on the body tag:

    body {
    background: #fff;
    color: #222;
    padding: 0;
    margin: 0;
    font-family: “Helvetica Neue”, Helvetica, Roboto, Arial, sans-serif;
    font-weight: normal;
    font-style: normal;
    line-height: 1.5;
    position: relative;
    cursor: auto;
    }

    The default settings are not being overridden. I’m sure I’m just overlooking something simple, but I haven’t been able to locate the problem. Thanks.

    • Jeremy Englert

      Try removing the global import from the top of the settings file.

  • Thomas Wilson

    I’d like to use Foundations data interchange to swap out images for various screen sizes – is there anything I need to do to Joints to make this possible?

    I’ve set it as per the F5 docs but it doesn’t seem to work? Do I need to call any extra scripts?

    Thanks
    Tom

    • Jeremy Englert

      It should work by default. Here is a piece of code I use regularly to swap out different logo images for retina/HD devices.

      http://codepen.io/anon/pen/LErvyz

      • Thomas Wilson

        Great Thanks Jeremy!

  • Daniele Sabatini

    Hi Jeremy,
    I want to set up a different background-color for the current displayed page but I can’t use the active class in the navigation bar, what should i do?

    Thanks

    • Jeremy Englert

      Why can’t you use the active class?

  • Marc

    Hi, thank you for making this theme! I am using the CSS version and I have 2 questions:
    I am trying to get the scroll to top button to work. Is there some documentation about this?
    I saw that there is the possibility for multiple languages, what those this include?
    Many thanks in advance.

  • NielsPilon

    Hi Jeremy, is there any specific reason why Joints deregisters the default jQuery that comes with WordPress core and replaces it with the one of Foundation which is jQuery 2.1? I had to revert it to the jQuery of WordPress core to solve a plugin conflict (Easy Fancybox) Will I loose any Foundation functionality after doing this? So far it all seems to work fine.

    • Jeremy Englert

      @NielsPilon:disqus, Foundation 5 “requires” jQuery 2. However, as you noted, Foundation appears to work fine with the WP’s default version of jQuery.

  • http://www.raeannewright.com/ Raeanne Wright

    Hi Jeremy,

    I have a strange bug – I’ve used Joints on a few sites so far and haven’t encountered this yet: the ‘back’ link that shows up in the responsive nav when viewing submenus is showing up for *all* breakpoints. I’m not sure if it’s a Foundation thing or the theme itself. Any ideas? I can’t seem to find anyone else with this issues online… Thank you! 🙂

    • Jeremy Englert

      Can you provide a link?

      • http://www.raeannewright.com/ Raeanne Wright

        I’m developing locally so not at this time. I am hoping to get the site up soon so I will keep you posted. Thank you!

      • http://www.raeannewright.com/ Raeanne Wright

        Hi, again! We finally soft-launched the site today so I’m working out a couple bugs and this one is still on my list. Would love any thoughts you may have. Thank you so much!

        http://www.holygrailofgames.org/

        • Jeremy Englert

          Awesome site! Really cool – probably one of my favorite JointsWP creations. 🙂

          I noticed the navigation has “back” links even on desktop, was that on purpose?

          • http://www.raeannewright.com/ Raeanne Wright

            Wow, thanks!! It is a really unique project that required something equally so… 😉

            But yes, the back links issue is why I was touching base with you again (per my previous msg). It is NOT intended and I can’t figure out why it’s happening. Would really appreciate your thoughts if you have the time. Thanks again!

          • Jeremy Englert

            Honestly, I’ve never ran into that issue. Did you change the jQuery version or making any changes to the Foundation JavaScript?

          • http://www.raeannewright.com/ Raeanne Wright

            Hmmm, OK. I don’t think so… at least not intentionally as I am a front-end coder and tend to steer clear of JS. I don’t want to waste your time with it as it sounds like a deeper investigation is needed. I’m recruiting a Developer friend at this point… thank you bunches for your help 🙂

          • http://www.raeannewright.com/ Raeanne Wright

            Hey, just a heads up that I figured this out, in case anyone else stumbles upon the same issue. It was a simple CSS specificity issue – I had display:block set on #navigation li, and that was causing the back links to show when they should have been hidden. All set now! 🙂

  • ironwulf

    Hi Jeremy! I got a question. I’ve been developing a new project using joints SASS. So far I have no problems using it on the layout of a new wordpress site except one – JPEG Compression. I noticed that all the jpegs I upload via the media upload turns out pixelated or of low quality despite having a “Very High” optimization from my image editor. I tried the disabling the JPG compression via the php functions hack and a few plugins to no avail. Would appreciate your advise.

    • Jeremy Englert

      Hmmmm. JointsWP most likely isn’t causing this issue – the theme makes no modification to the media uploader. Have you tried switching themes to see if the problem persists?

      • ironwulf

        Apologies I wasn’t able to update soonest. Found the problem was with the ISP. Seems like they were desampling images to save on bandwidth hence the pixelated images. TOok me some time to find out though as I thought it was also a plugin problem

  • Boško Škrbina

    Hi there Jeremy! First than all many thx 😉 your basic theme is pretty nice!… So I got a question, maybe is a stupid one but I don’t figure out ;(. I want to insert a 100% width slider in a page but always show fixed in the center, even if I selected full-width from “Page Attributes -> Template”. How can I achieve this? (PD: I checkout “page-full-width.php” and found you include: — / / — This has relation with my issue? many thx! 😀

    • Jeremy Englert

      You’ll have to put the full-width content above the “row” div.

      • Boško Škrbina

        Hi again Jeremy, thx for your quick anwser. Sorry again but I did it and didn’t work ;(. Just to be sure we both are talking about the same thing :D. I installed the theme, then created a new page entered the edit mode and in the text box begin to write my code like another HTML page. I’m doing smth wrong? I even try with a div in 100% and still centering the content.

        • Jeremy Englert

          You’ll need to edit the theme files. There isn’t a fullwidth page by default.

          If you want the content to span the entire width of the page, it can not be inside of a DIV with the class of “row” or “columns”.

          • Boško Škrbina

            Roger that! 😉 Any way thx Jeremy.

  • Pingback: Google()

  • ironwulf

    Noticed that there’s no automatic support on paged posts. I tried adding your pagenavi function. Any leads on how to enable that on the theme?

  • ArtPenley

    I have styled the nav so that it shrinks to a smaller sticky fixed nav on scroll, but it activates instantly when I begin scrolling. My mission is to have it activate at say 100px down the page. I’m sure this is an easy fix but i’ve just spent many hours trying to figure this out and would really really appreciate it if someone could help me (pulling hair out) – i’m digging JointsWP by the way. Any help would be amazing. Thanks, Tom

    • ArtPenley

      Still no luck with this? Editing the foundation topbar js doesn’t seem to do anything? any ideas?

      • Jeremy Englert

        There isn’t a way to do this with Foundation/Joints by default, but its really easy with some jQuery. Here is some code I wrote for a recent project that accomplishes what you’re looking for.

        http://codepen.io/JeremyE/pen/raXmYz

        Once you hit 100px+ down the page, it adds a “Light Header” class to the header. Once the page is back near the top, it removes that class.

        Hope this helps!

        • ArtPenley

          thanks so much for your help, I really appreciate it, i’ll give this jQuery a whirl 🙂

        • ArtPenley

          Do you know how to remove the default Joints ‘fixed’ on scroll nav? or does this JQuery just over ride it? Thanks again

          • Jeremy Englert

            Simply remove the “fixed” (or “sticky”) class from the navigation.

  • Brittany

    This may seem like a silly question but I recently downloaded the JointsWP CSS theme and .scss styles are overwriting what I put into the style sheet. Where should I be making style changes so that I can customize the theme?

    • Jeremy Englert

      Hi Brittany, the CSS version of Joints shouldn’t have any SCSS files. Are you sure you didn’t download the SCSS version?

      • Brittany

        Hey Jeremy – Thanks for the response. I am positive I downloaded the CSS version. Here is the development site where the current theme is live: neuconcepts.us/foundation. Via FTP the themes name is showing as JointsWP-CSS-master.

        • Jeremy Englert

          Hmmm. This is a headscratcher for sure. From your screenshot, it looks like the file “type.scss” is overriding the styles, however, “type.scss” isn’t even a file in the Sass version of JointsWP. Even if Scss files did exist, they can’t be read by the browser, so they shouldn’t be overwriting your CSS.

          EDIT – Just realized type.scss is a file from Foundation. But it still shouldn’t be overwriting your styles. Sometimes you need to put “!important” on your styles to override the Foundation defaults. Have you tried that?

  • http://www.raeannewright.com/ Raeanne Wright

    Hi Jeremy,

    The built-in pagination isn’t working for me, and I found that others have had this issue, too: https://wordpress.org/support/topic/theme-jointswp-pagination-not-working

    I’m using the built-in joints_page_navi, and it’s working fine on the archive page but not on the index. (site: http://www.nyfanfairness.com/in-the-news/ )

    Any advice is much appreciated!
    Raeanne

    • Jeremy Englert

      I’m going to try changing up the pagination in JointsWP 3 to be more consistent with how other WP themes do it – I love the current functionality, but also want to make sure the theme is setup to do things the “WordPress” way.

      That being said, it appears pagination needs a few more arguments when being used on the homepage:
      http://wordpress.stackexchange.com/questions/97155/pagination-not-working-on-home-page

      Side Note: Lovin’ the website! Very nice!

      • http://www.raeannewright.com/ Raeanne Wright

        Thanks so much, Jeremy! After looking into this, I discovered that it was actually a permalink issue… I had set the category base and didn’t need to. Once I removed it, it worked fine 🙂

        Thanks for your help and your compliments… very grateful!

  • Thomas Wilson

    Hi All,

    I know sliders aren’t everyones cuppa, but I find clients tend to want them.

    I’ve been using Orbit but find it is prone to glitches here and there, What sliders are people generally using with Joints? Anyone integrated Slick?

    Thanks

    Tom

    • Jeremy Englert

      IE8 isn’t supported by Foundation 5, but you can do some stuff to make it work:

      http://foundation.zurb.com/forum/posts/241-foundation-5-and-ie8

      • Thomas Wilson

        Thanks Jeremy,

        I had seen that – When he says

        “Then to fix the rem issue, just add a link to this polyfill js file at the bottom of your body tag:https://github.com/chuckcarpenter/REM-unit-polyfill

        Does that need to be wrapped in script tags or anything?

        • Jeremy Englert

          You’ll want to wrap it in script tags, just like the other scripts you’re adding to the header. You’ll also need to “downgrade” your jQuery to 1.x (2.x won’t work in IE8).

          I’ve used this method a few times and it works well – but far from perfect.

          EDIT – I saw that you also had a question about sliders (I can’t seem to find it now). I recommend using Slick, it integrates into JointsWP/Foundation very well.

          • Thomas Wilson

            Thanks Jeremy,

            Yes I did post about Sliders too but accidentally deleted I now realise.

            I tried Slick but couldn’t seem to get it configured properly – where would I add the initilization script? And do I need to alter for wordpress use?

            $(document).ready(function(){
            $(‘.your-class’).slick({
            setting-name: setting-value
            });
            });

          • Jeremy Englert

            Add it to the script.js file. Change the “$” to “jQuery” to avoid conflicts with other plugins. Remove “setting-name: setting-value” or it will throw an error.

          • Thomas Wilson

            Thanks Jeremy!

            Getting there, only I’ve run into this issue – http://foundation.zurb.com/forum/posts/18344-issue-with-interchange-and-slick-slider

            I tried popping this

            jQuery.each(el, function(){this.src = path;});

            into foundation.interchange.js

            But no joy…

            Have you come up against this, any suggestions on how to resolve or alternatives to data-interchange?

            Tom

          • Jeremy Englert

            Never ran into this issue before. Is the issue in IE8 or all browsers?

          • Thomas Wilson

            All browsers, only seems to occur when using data-interchange with slick

  • ArtPenley

    Hi, I’m having some issues with media elements.js with JointWP, for some reason when I add an audio player the default browser audio player styles override the mediaelements styles? I wondered if there was something in jointsWP that is causing this? Thanks for your help.

    • Jeremy Englert

      @artpenley:disqus, sorry, I’ve never worked with MediaElements – however, JointsWP (nor Foundation) have any type of video styles by default.

  • Shary Junco

    This starter theme looks great, this is 100% open source right?

    • Jeremy Englert

      The theme is completely open source. Most of the theme is licensed under GPL, while Foundation is licensed under MIT. So essentially, their are two licenses but both are open source.

  • Nicholas Ajose

    Hi Jeremy
    Many thanks for this excellent theme, one question that might have been asked before.

    I have been trying to implement the Foundation off Canvas multilevel navigation (li.has-submenu, ul.left-submenu classes) with only partial success.

    Do you know of a method to incorporate this in the Joints theme? I recognise that the Top-Nav handles multilevel (albeit in a different manner) but the Off Canvas aesthetics would be ‘icing on the cake’.

    Many thanks
    Nick

    • Jeremy Englert

      This question seems to be coming up a lot recently, which really makes me want to find a way to make it work. However, Foundation 6 is going to make changes to how the Off Canvas menu works, so I’d hate to waste a ton of time for something that most likely is going to change. Let me see if I can come up with a quick fix in the meantime.

      • Nicholas Ajose

        Hi Jeremy and thanks for your reply.
        I am currently sub-contracted on a commercial project and whilst the client will be more than happy with the Top-Nav solution I feel that for users, the ’off-canvas’ multi-level menu is the way to go. Recognising that Foundation 6 may (or may not) incorporate this feature, it is a tricky question whether to invest the time in what might be an obsolete solution but I’d be more than happy to contribute/compensate should you work out a fix.
        Many thanks
        Nick

        • Jeremy Englert

          I actually put a hold on JointsWP 2 development so I can focus on JointsWP 3. But let me take a stab at it and see what I can come up with. Taking a look at the Foundation documentation, it should be easier than I thought. If I can come up with a solution, I’ll respond here. You can also shoot me an email at jeremy@theadgarage.com.

          • Nicholas Ajose

            Will do, thanks and good luck
            Nick

  • Bryony

    Hi, this is probably a very simple solution – but i’m new to this theme and trying to make parts of my site full width e.g the nav bar – no padding and an 100% max width. is there already a class which i can use to do this, i’m worried about creating my own new classes and messing up the styles which are already there

    thanks!

  • Bryony

    Hi,

    I’m looking to have my logo contained inside my nav bar, and have the whole thing sticky as you scroll down the site. Is this possible?

    Thanks!

    • Jeremy Englert

      Very possible! Simply replace ‘bloginfo(‘name’);’ with your logo. You may need to adjust your CSS/Sass a bit as well.

      EDIT – It kept removing the PHP stuff from the code I was pasting, but I think you can tell what line I’m talking about.

  • Antoun

    Hi,

    I have to work a little bit on the design of a website made with your theme, but i don’t know it, and not very good knowledge of WordPress in general. Is it easy to custom the banner? Where can i find it in the code?
    How can i see the different pages in the code, you know for example here we can see “Home”, “FAQs”,”Demo” and “Blog”, but when you open this code in your text editor, does each page have her own page, like home.php, and so on?

    Thanks, and sorry for my english 🙂

    • Jeremy Englert

      Hi Antoun,

      It sounds like you’re just getting started with WP – I’d highly recommend becoming familiar with the WordPress Codex. Essentially, each template gets its own files. You select a template when creating a page in the CMS.

      https://codex.wordpress.org/

  • Marvin Sohiong

    Hi,

    Im using get_template_part( ‘partials/nav’, ‘main-topbar’ ) as my nav style and make it fixed, the problem is there is a white space on the top, left and right after i click the menu, please see attached image below, i can’t make it to work like your http://jointswp.com mobile menu.

    Thanks…

    • Jeremy Englert

      Marvin, did you resolve this?

      You’ll need to remove the navigation from the columns. Columns add left and right padding.

      • Marvin Sohiong

        I put data-options=”scrolltop: false; on my nav top-bar and make it fixed, is that ok?

  • Jon Maher

    Hi there,
    I’m wondering if you could help me. I’m wanting to use the loop-archive-grid (which I have working fine and styled etc) but I want to pull out a the first post to style differently as a featured post. I’ve read up on multiple loops as my first idea using offset doesn’t work with pagination apparently, but I’m stretching my skills/knowledge a bit.

    I know how to create my loop for the featured post (I’ve added code at the top of loop-archive-grid, but it’s embedding the $do_not_duplicate bit into the existing loop that I’m struggling with. Any help much appreciated, and thank you 🙂

  • Marvin Sohiong

    Where can i find the wp_enqueue_style and wp_enqueue_script?

    • Jeremy Englert

      library/joints.php.

      If you’re using JointsWP 3 (beta) it will be in assets/functions/enqueue-scripts.php.

      • Marvin Sohiong

        Thanks much…

  • jkinley

    Jeremy, I just installed v3 and it seems that the top off canvas is not working. I am looking into it and I let you know if I figure something out.

    • Jeremy Englert

      Odd, let me take a look. Sass or CSS version?

      • jkinley

        I just downloaded the SASS version. I click on the hamburger and nothing happens. I have not edited anything so I don’t think I did something dumb.

        • Jeremy Englert

          I see a couple potential issues that need cleaning up. I’ll push an update tonight.

          • jkinley

            Thanks, Jeremy. Overall, I like the new version. The organization and file structure is clean and easy to understand. Going to start upgrading my site!

        • Jeremy Englert

          Did you set a menu in the backend?

          • jkinley

            Yep

          • Jeremy Englert

            I found the issue. The foundation.min.js file has an error in it. If you need a quick fix, you can enqueue foundation.js instead.

          • Thomas Wilson

            Hey Jeremy,

            I’m getting the same errors as above and the off canvas menu isn’t working.

            How can I fix this up?
            I use codekit 2 and everything was working fine locally.

            Not too sure how to ‘enqueue foundation.js instead’ – can you please advise.

            Loving the new version otherwise! Great work

            Cheers
            T

          • Thomas Wilson

            Sorry disregard – I see the comment below!

            Thanks

      • jkinley

        I just realized in WP admin, that there is no selection available for Top Nav. This could have something to do with it maybe.

      • jkinley

        I am also getting Javascript errors in the console. Sorry, but this is a little out of my realm. Hope this feedback helps.

    • Jeremy Englert

      This has been resolved. Thanks for letting me know.

  • jkinley

    Jeremy, is there a reason why you don’t use the wp_register_script function in enqueue-scripts.php? All the tuts I see on enqueueing state that you must register the script before using wp_enqueue_script. Are you doing this somewhere else?

    • Jeremy Englert

      wp_register_script is optional. You can pass all of the necessary parameters into wp_enqueue_script.

      https://codex.wordpress.org/Function_Reference/wp_enqueue_script

      “You could either link a script with a handle previously registered using the wp_register_script() function, or provide this function with all the parameters necessary to link a script.”

      I prefer to use wp_enqueue_script on its own – its cleaner and (normally) less of a headache.

  • jkinley

    There are no longer _small, _medium, _large stylesheets in the SCSS folder. Have you done this a new way or can we just copy those files over from the previous version?

    • Jeremy Englert

      Check this out: https://github.com/JeremyEnglert/JointsWP/issues/84

      Let me know what you think.

      • jkinley

        That’s cool. Yeah, I didn’t like switching back and forth between those files. This is better. Unfortunately, codekit does not recognize _main.scss and automatically make it output _main.css. When I tell it to do so, it is throwing up an error and it won’t compile. Not sure what the deal is…

        • Jeremy Englert

          JointsWP comes with a codekit configuration file – it was probably clashing with your local settings. To avoid this in the future, I completely removed the codekit configuration file. That way people can set it up however they want.

          • jkinley

            Hi Jeremy. Sorry for the barrage of posts and thanks for the prompt replies. I hope my efforts help others. So the TopBar menu is working again, but I still can’t get CSS working. I have tried a few times and made sure the codekit configuration file is gone, but codekit is still throwing up errors. Here is what happens when I try to compile _main.scss. Let me know if you have any ideas. I don’t think I am doing anything different than I have in the past, but I am not an expert when it comes to preprocessing. Thanks!

          • jkinley

            Ok. So I hope this helps others that are still wrapping their heads around preprocessing. The reason, my updated styles in _main.scss were not visible is because by default, JointsWP 3 enqueues the minified version of styles.css:

            // Register main stylesheet

            wp_enqueue_style( ‘site-css’, get_template_directory_uri() . ‘/assets/css/style.min.css’, array(), ”, ‘all’ );

            I changed it to:

            // Register main stylesheet

            wp_enqueue_style( ‘site-css’, get_template_directory_uri() . ‘/assets/css/style.css’, array(), ”, ‘all’ );

            and now it works. I suppose I’ll keep it like this during development, but then I’ll change it back to the minified version when the site goes live. But then I suppose, I’ll have to update CodeKit to process a minified version of styles.css. Make sense?

          • Jeremy Englert

            I pushed an update to fix this. Thanks for figuring this out – I owe you.

          • jkinley

            So in your mind, what is the correct workflow for this? As I said in the above post, have CodeKit output the non-minified version during dev and then switch to minified for live? Or, is it better to just have codekit, make the minified version from the start? Better yet, why doesn’t codekit output both? I suppose that Gulp will solve all of this, but I am not there yet.

          • Jeremy Englert

            Gulp is ideal, as it compiles and minifies everything (Scss and JS) using the configuration from the Gulpfile.

            However, JointsWP is setup to fit into your workflow. Do whatever you’re most comfortable with.

            I always minify my styles from the start. If you’re using Sass, theres no reason to not use minified CSS files. But I also know some people who like to wait to minify until they push to production.

  • Jameson N

    Hey Jeremy,

    Curious where I should enqueue my custom js? I just updated to the newest JointsWP on a new site build, and it doesn’t seem to matter where I enqueue my scripts, they always load before JQuery is loaded. Any help would be appreciated, thanks

  • Marvin Sohiong

    I can make the topbar transparent to the background but when i scroll down, the topbar element changes to white color, any ideas on how to implement it the right way?

  • Marvin Sohiong

    I can make the topbar transparent to the background but when i scroll down, the back of the topbar element changes to white color, any ideas on how to implement it the right way?

  • andrea

    Hi Jeremy,

    I was asked to edit the a minimal design on the website. I was supposed to make the watch button stay as red. Whenever I point the cursor in the watch video button, it becomes red. As I tried editing it, it leads me to style.css but then I always get trapped on that part, i’m not sure if I still have to edit things in the header.php or index.php

    thanks for your help.

    • Jeremy Englert

      Sorry for missing this. If you’re changing styles, all of those changes should go into your style.css file – not a PHP file.

      Are you using the CSS version of Joints?

  • Adrien L

    Eyh Jeremy! I’m working on JointsWP-CSS, again, and for the best!

    I’m doing some nice little functions like an AJAX lazy load of posts (I managed to make it possible to put several of these buttons on one page, yaaay), and I’m wondering, are you interested in that kind of user contributions to your theme? It wouldn’t be too much hard work for me to clean this up, and it might go into some subfolder of assets/functions and assets/js.

    I saw you had some accepted pull requests on JointsWP, but it’s mostly bug corrections. I would for sure understand that you want to keep your theme clean as it is. But, like me who use your assets functions mostly for inspiration and not out of the box, maybe other users would be interested to see how I made it.

  • http://pebutler3.com P.E. Butler III

    Hello @jeremyenglert:disqus I am currently using JointsWP for a blog rebuild and I have an issue that, well, makes me feel a little simple. What would be the best way to removed the topbar li dividers? I’d prefer not to display: none or similar. Thanks

    • http://pebutler3.com P.E. Butler III

      Well, I figured it out! I would still be curious as to your suggestion..

      • Jeremy Englert

        @pebutler3:disqus, you can edit the walker in the /assets/functions/menu-walkers.php file (which is how I would do it). Or, you can use CSS to hide the dividers.

        Which method did you use?

        • http://pebutler3.com P.E. Butler III

          Awesome. I used the walkers. Hadn’t noticed it before posting original comment. Thanks for the quick reply!

  • Jason Kadlec

    I’m trying to understand how SASS works not as in how do I use it… but does the server stack need to have SASS installed to work?

    Both WPEngine and CloudWays ( sales support so maybe they don’t know) — seemed to indicate they didn’t support SASS & would not allow the end user to install it.

    That said, I’ve just installed the SASS version of JointsWP-Master.zip onto a CloudWays / DigitalOcean setup and the theme looks fine.

    Does this mean that they already have SASS running on the stack?

    or

    Does it mean that SASS has a fallback and if the server stack doesn’t support it, things will just revert to regular CSS ( in which case I should probably install the CSS version?)

    Or something else?

    • Jeremy Englert

      @jason_kadlec:disqus, Sass won’t work on any webserver – it must be used “locally”. Browsers actually don’t “read” Sass at all. You will write your styles using Sass and then use a compiler (CodeKit, Gulp, Grunt, etc) to turn that Sass into CSS – which browsers can then read.

      Hope this helps!

  • Penny Badowska

    Theme is great – really getting to grips with Foundation5, Sass and WordPress. However, I have been trying to add fixed background images to a front page, but I can’t get them to stay fixed. I have copied the existing page-full-width.php, and made a new loop called “front-page”, which seems to be working. And then I have added in the CSS, with the appropriate class, ” display: block;

    height: 350px;

    background-position: center center;

    background-attachment: fixed;

    background-size: cover;”

    But it doesn’t work.

    Am I missing something?

    Thanks

    Penny

  • Gerardo Aguilar

    Hi, Awesome theme, I love foundation. Jeremy I can’t use any slider (vegas, huge it,…), always send me an error message jQuery is not defined, how can I solve it?

    • Jeremy Englert

      Joints loads jQuery in the footer – some plugins seem to have issues with that.

      Check out Line #11 on assets/functions/enqueue-scripts.php. Change the “true” to “false” – this will load jQuery in the header.

  • Thomas Wilson

    Hey Jeremy

    I’m working on a project for which they would like a full screen background video intro the same as this – https://www.uship.com/

    Just wondering if you’ve developed any similar projects or if you have any tips for the best setup here?
    Thanks
    Tom

    • Jeremy Englert

      I wish I could be of more help, I’ve never tried something like that with Joints.

  • Penny Badowska

    Hi Jeremy

    Really basic question, which I have so far failed to solve. How do I make the footer menu into a vertical menu, rather than a horizontal one? I have tried changing .sub-menu ul to “display: block”, and any other variation I can think of, but nothing happens.

    Thanks in advance for your wisdom!

    Penny

  • Darryl Sullivan

    love joints. busted out a few sites with it already. got a client wanting ecom compat. will woocommerce play nice with joints?

    • Jeremy Englert

      I’ve built a few sites using WooCommerce and Joints – they seem to get along quite well. You’ll have to make some template tweaks, but the process is fairly painless.

      PS – Sorry for the slow response! 🙁

      • Darryl Sullivan

        Good to know Jeremy. Thx for the reply. I’ll go ahead with the project on joints. I really feel comfortable with joints. We’ll planned and organised base theme. Thanks again.

  • http://iamchaka.com John Chaka

    For some reason I had to rename the template name for Full Width (No Sidebar). If I change it to anything else, my customization shows up. If I name it back to original name, I lose everything except navigation and anything in “the_content” I think there is a conflict between ‘page-full-width’ and ‘template-full-width’.

    • http://iamchaka.com John Chaka

      Nevermind. I re-downloaded it and ‘page-full-width’ is not there, just ‘template-full-width’ I think I had it left over the previous project.

  • Darren Knight

    Is anyone having trouble getting the drop down menu in nav-topbar.php to work? I tried both the css and Scss version in both Chrome and Firefox and I can’t click on the links. The link URL shows up in the tool tip at the bottom of the browser, but clicking has no effect.

    • Jeremy Englert

      Hi Darren, it’s a known bug with Foundation. They are completely rewriting the dropdown menus and hope to have it updated before Thanksgiving.

  • Anthony G.

    Hey Jeremy… During my transition from F5 to F6, Gravity Forms broke. A “display:none;” style is being added to the form. Not sure if this is a localized issue from my transition, or a theme issue, but I thought it was worth mentioning…

    https://www.gravityhelp.com/question/why-is-there-a-style-attribute-of-displaynone-being-added-my-form-isnt-showing-up/

  • Dan

    Great job! I cant figure out why .off-canvas-content wont be padded right/left when adding .reveal-for-medium to the off canvas menu according to F6 docs. Works on a pure foundation install but not in your theme.

    • Jeremy Englert

      Hi Dan, Thanks for checking out JointsWP!

      I’m not 100% sure I understand what you’re trying to achieve. Do you have a link you can share?

      • Dan

        Thank you for taking the time to answer! I was trying to make the off-canvas menu show persistently on larger screens and followed the instructions on F6 docs to add a reveal-for-medium class to the off-canvas menu. Did not work in jointsWP but I’ve now found out what the issue was:

        In the version I downloaded from you yesterday the off-canvas settings have a $maincontent-class set to ‘main-content’ while the latest F6 version is using the class ‘off-canvas-content’ to style the effects you want to achieve by adding the reveal-for-medium class.

        Works great now as I changed the class! Thank you for the work you’re doing!

  • susan

    Hi Jeremy, probably a really simple answer to this, but I can’t quite work it out…favicon – wanted to remove all the joints default ones so deleted all the image files and also the bit in the header referencing the favicons. This removes the favicon from all but the home page in Chrome where it refuses to budge. Am I missing something obvious with this? here is the home page link http://176.32.230.249/zenways.org/
    Thanks. Susan

    • Jeremy Englert

      Hi Susan,

      I don’t see a favicon on my end. Favicons tend to be kind of hard to clear from the cache.

      Here is what I see in Chrome.

      • susan

        Ah thanks Jeremy – you must be right about the cache. I tried clearing the cache again on my laptop and the favicon still showed. But then looked at the page on different laptop and it does not show.

  • Ryan Patterson

    Hey Jeremy,

    I have a quick question and not sure if you have encountered this issue before. I’m using the Foundation 6 SASS version of JointsWP and using CodeKit to compile the SASS. Everything was working great until I finally decided to view my site in Safari and Opera. For some reason the last column in each row is being pushed below the preceding columns. When I inspect the element the column width’s equal the row width, so not sure whats going on. I first thought it might be a rounding issue with Safari, but after testing with columns that don’t have a fractions of percentages, the last column is still being pushed below.

    When I view an untouched, fresh version of JointsWP, everything is good. So the only thing I can think of is CodeKit may be the culprit. And unfortunately I can’t seem to get my environment setup correctly installing manually via Terminal. So as of now, CodeKit is the only way I can use SASS on my Mac.

    Anyways, just didn’t know if you had ever heard of or ran into this issue yourself.

    Thanks,
    Ryan

    • Ryan Patterson

      I found the issue, I imported the flex grid but never commented out the float grid import. After I read the flex grid documentation I realized they don’t play well together. So I commented out the flex grid import and decided to just stick with the float grid. All is good now!

      • Jeremy Englert

        Awesome! Glad you got it worked out.

  • Nathan

    Is there a possibility to add abide form validation to the comment form of WordPress?

    • Jeremy Englert

      What form plugin are you using?

      • Nathan

        Thanks for your reply! I’m using no form plugin. It’s about the standard comment form, not a contact form. In the meantime I have installed this plugin for the validation, because I could do nothing to make it work with Abide: https://de.wordpress.org/plugins/ns-comment-validator/
        This works pretty good (with jQuery Validation Plugin), but it would have been nicer to solve that with the standard tools of foundation.

  • Jaime

    Such a nice theme, just what I was looking for!

  • http://www.bj2design.com/ Bjarni Wark

    Just a note when using tiled galleries (jetpack) that it does not pick up wp-joints settings of 1200 but defaults to 500. http://jetpack.me/support/tiled-galleries/#content-width

    Using Foundation6.2 and WP-Joints of as March 3rd 2015.

    Im still trying to figure out why this is and will get back to here when I do.
    https://github.com/JeremyEnglert/JointsWP/commit/c03adbc4278b186465a3ac74e0cda8af9eb32848

  • Jordan Luckett

    Hello! I am creating a custom template. If I paste the html snippet code into the page itself it keeps all foundation styling. If i use the code in the php file everything shows up fine but the styling/spacing goes away… I’ve been going nuts to try to figure out why!! ha! Please help! Thanks

    • Jeremy Englert

      Can you send me an example of how the PHP file looks?

      What do you mean by “into the page itself”? Through the WYSIWYG?

      • Jordan Luckett

        Hey, thanks! Yes I meant pasted in the WYSIWYG text editor vs. pasting the code directly onto the php file. The PHP file would be untouched if using the WYSIWYG editor. But if pasted in PHP, see screenshot attached. Thank you for your help! https://uploads.disquscdn.com/images/83981fe918873df5225e1bceb2cfecd139b5cf12de294723727186d526fffe52.png

        • Jeremy Englert

          Everything looks correct (although, you can probably get rid of the div with the class “columns” as the previous div already has a .columns class).

          What issue/error are you getting?

          Edit – you may have to remove the loop. WordPress is checking if any posts exist on the page – and since they don’t, it probably won’t load the content.

  • DisQusDan

    This theme would be more awesomer if it had foundation styles in the editor.
    I usually create pages for non-savvy users and it would be super if they could just select “button” or “callout” from the formatting dropdown.
    And since I’m not savvy enough to add this myself without googling for hours, can you give me (and others) some pointers where to look? Thanks!

  • Jason Shoemaker

    Great job with the theme! I’ve been tinkering a bit and have gotten stuck with how to implement the form input features found here: http://foundation.zurb.com/sites/docs/forms.html , specifically the “input-group” classes. Are these features part of the current css version (3.0)? I tried updating the foundations.min.css in the vendor directory, but then the top nav blew up. I wanted to check to see if there was a reason this feature was left out before diving back into the code. Thanks!

  • Lindsay

    Love the theme! Thank you! I am having an issue with the search function. The search in the topbar isn’t working. It does nothing. Any ideas?

  • http://blog.kenmau.com Ken Mau

    Hi Jeremy,
    I incorporated THE EVENTS CALENDAR plugin but the responsiveness of the calendar seems to not work on WPJoints theme, I switched to Twenty Sixteen theme to see if it worked there and it did. Any idea why this could be happening? Any conflicts in functions.php? Thanks in advance!

  • http://www.dekadent.se/ Robban

    Thanks for all your hard work on this! One question: I’ve been trying it out locally for the last couple of days and using the gulp sass version, my images often have trouble loading. They are placed in assets/images/ as suggested, but they are often broken. I’ve tried changing the path in all ways imaginable, but still broken images. I have never had this issue with a WP-theme before. Any thoughts?
    Thanks again!