Getting Started

About These Docs

JointsWP is a blank WordPress theme built that includes all of the power of Foundation 6. To learn more about specific Foundation components, check out the Foundation 6 Documentation.

The documentation laid out on this site will cover how to get started with JointsWP and how some Foundation components, such as off-canvas components and menus, are integrated with WordPress.


What comes with JointsWP?

JointsWP comes pre-baked with all of the great features that are found in the Foundation framework – simply put, if it works in Foundation, it will work in JointsWP. The theme also includes:

  • Sass or CSS Versions
  • Multiple Foundation Navigation Options
  • Motion-UI Support
  • Grid  Archive Template
  • Translation Support
  • Bower and Gulp Support
  • And much, much more!

What tools do I need to use JointsWP?

You can use whatever you want – seriously. You can use CodeKit, Grunt, Compass or nothing at all. It’s completely up to you how you decide to build your theme – JointsWP won’t get in the way of your workflow.

The Sass version of the theme does include Gulp and is optimized for a Gulp-based workflow. To get the most out of JointsWP and Foundation, Gulp is highly recommended.

  • https://chrisjallen.com/ Chris Allen

    Really great that you offer Gulp/Bower support out of the box, excellent starter theme!

  • Nicholas Ajose

    Hats off to you sir, Joints3 is superb!

  • http://www.joshuawinn.com/ forthewinn

    Thanks for the big push of updates lately. Looking great. Starting another new theme with it now.

    • Jeremy Englert

      Awesome! Let me know how you like the new version.

  • http://bonellicio.us Filippo Bonino

    amazing job, man

    • Jeremy Englert

      Awesome site! Seriously, amazing work.

      Everyone, I encourage you to check out http://www.bonellicio.us to see an awesome implementation of JointsWP.

      • Ryan Kidd

        Beautiful

      • Guilty Doggo

        Wow that site looks amazing. Thanks for the share I have a lot to learn 😀

  • TeacherMac

    Please note that “npm install” no longer works for Gulp: npm ERR! Error: No compatible version found: jshint-stylish@’^2.0.0′
    npm ERR! Valid install targets:

    Error: No compatible version found: gulp-sass@’^2.0.1′

    208 error Valid install

    • Jeremy Englert

      Worked like a charm for me. What version of Node.js are you using?

  • Andrew Marquis

    Would there be any issues when it comes to upgrading wordpress? I know you don’t have a crystal ball, but is there anything rigidly tying JointsWP to the version of WordPress it comes bundled with?

  • Jameson N

    Hey Jeremy, I was curious if you had a second to look at this:

    https://wordpress.org/support/topic/wp_query-page-navigation-for-custom-post-type-joints-wp-theme?replies=1

    If not, no worries! Thanks for putting out such a great theme.

    • Jeremy Englert

      Hmmmm. Let me try to replicate this.

    • Jeremy Englert

      Just to make sure I’m understanding this correctly, the pagination isn’t
      displaying when you attempt to display posts on a page template –
      correct?

      • http://www.jamesonnuss.com Jameson Nuss

        Correct. I have a page template and I want to get all posts of a custom post type, but display 6 per page. Pagination works perfectly on archive pages, but on the page template it doesn’t display. I am sure it is my error, I just don’t know why it isn’t displaying.

  • Gerardo Aguilar

    Hi, Many thanks, it is so useful! I’m curious of how can you implement an aside menu if only have two register_nav_menus: The main Menu and Footer Links, but if I need and aside menu like accordion for children pages?

    • Jeremy Englert

      You can register additional menus in the assets/functions/menu.php file.

  • dc619

    Looking forward to using your framework. However, I’m encountering a problem while trying to use Codekit 2.4. It keeps throwing “An unknown error occurred” whenever I try to compile styles.scss. Any idea what might cause this problem?

    thanks

    • Jeremy Englert

      Hi @dc619:disqus, it’s been awhile since I’ve used CodeKit – however, it is a popular choice when using JointsWP. Does it give you a line number or any reference point for the error?

      • dc619

        Hi Jeremy, it’s not providing a line number or any reference point. I installed npm, but gulp doesn’t appear to be working. I’m stumped at this point.

  • Kapil Gonge

    Anybody using Jointswp (Sass) with Ubuntu? How to “npm watch” from command line? Thanks in advance.

  • Brian Tippets

    Awesome theme. I really appreciate all the work that has gone into it. I’m having some issues though with the WYSIWYG tinyMCE editor though. The styling seems a bit off; like the editor window has no padding, so the text is right up against the edge. Also, the editor window seems to grow in height (it moves like an animation) on it’s own when you go in any page to edit it. When you embed a YouTube video in the editor it typically shows the video. It does this, but it slowly disappears from the bottom up as soon as you load the page. It’s very odd. It’s kind of hard to explain. There must be some conflicting styles. I can’t say it’s any plugins either, because just a clean WordPress install with the base JointsWP theme does the same thing, unless I’ve got some odd browser issue going on. Any help or feedback is appreciated! Thanks.

    • Brian Tippets

      Ok, it turns out at least part of this was the Distraction-free functionality of WordPress. When you’re on a page in the admin and go to Screen Options at the top -> Uncheck “Enable full-height editor and distraction-free functionality.” that stops the windows from moving around so weird. I’m still having issues with the videos just disappearing on their own. I’m not getting much feedback here though, so maybe it’s just an issue I have.

      • Darko Jankovic

        What browser are you using? In my case, WordPress 4.4 is running on Firefox 41.0.1 (Mac OSX 10.8 Mountain Lion), where I can reproduce the same issue you noted.

  • Thomas Wilson

    Hey Jeremy

    I posted a comment about using video backgrounds in Joints the other day and I wanted to follow up on that.

    I’m having a go at setting up video backgrounds with this code –
    http://www.newmediacampaigns.com/blog/adding-ambient-video-backgrounds

    I have read your comments on a github post about adding scripts to enqueue-scripts.php and added like so –

    wp_enqueue_script( ‘video’, get_template_directory_uri() . ‘/assets/js/site/video.js’, array(), ”, true );

    It seems to be working correctly as I can see the script video.js is listed in the footer.

    The problem is when the script runs the video element doesn’t receive the video sorce attribute correctly and remains ‘undefined’

    Here is a link to the prototype I’m working on – the video should load in the big white box under the top bar.
    http://roomswithstyle.com.au/melbmothers/gynaecology/

    I’d much obliged if you were able to offer any suggestions on what I’m doing wrong – it’s been a long day of head scratching!!

    Thanks

    Tom

  • http://gabrielbajada.com Gabriel Bajada

    Hey Jeremy, can we expect this (http://zurb.com/playground/motion-ui) in the next instalment of Joints?

    • Jeremy Englert

      Indeed! Hoping to launch the new version the same day Foundation 6 goes live.

      • http://gabrielbajada.com Gabriel Bajada

        Cool!

  • Dan

    why do you choose to not load the default wordpress jquery and load your own?

    • Jeremy Englert

      Foundation “requires” jQuery 2.x. However, I’ve found that almost all of the Foundation components work fine on the default WP jQuery.

  • http://beardsavvy.ca Joshua M

    Hi Jeremy, thank you for Joints! It’s been fun to explore, and through development with it I’ve learned a lot about Foundation, WordPress functions, and SASS. Foundation 6 is on the horizon… what are you up to these days and do you think you will you continue to work on Joints in the months ahead?

    • Jeremy Englert

      Hi Joshua,

      Glad you’re enjoying Joints!

      I was lucky enough to be part of the F6 Private Beta, so I got a head start on integrating F6 into Joints.

      It’s not production ready, but you can check it out here: https://github.com/JeremyEnglert/JointsWP/tree/4.0

  • Milic

    Great job! However I get a bunch of jshint errors when using v4 and sass version. Particularly when trying to do gulp or gulp vendor-js. It even stops it from compiling because it’s “too many errors. 67% scanned” How can I fix this or change the amount of errors that is accepted?

    • Jeremy Englert

      Those errors seem to be related to the Foundation and other vendor files – not anything specific to Joints. It appears to compile file, jshint just stops testing after 67%. I may turn off jshint for the vendor files, as they are obviously fine – jshint just doesn’t seem to agree with some of the code.

    • Jeremy Englert
  • Jack Fearing

    Hey Jeremy, when you updated your theme to foundation 6, did you remove the fixed and/or sticky menu feature? Just wondering because it was in your previous theme.

  • Jonas Schug

    Hi Jeremy. Working with JointsWP in combination with Revolution slider causes an error (jQuery not found). Now i have uncommented line 6 and line 9 of enqueue_scripts.php to get it run. Can you tell me what line 9 especially includes and if this include is important for JointsWP? Thank You

    • Jeremy Englert

      I recently made some changes to this file. On your line #9, are you calling vendor.js or jquery.js?

      • Jonas Schug

        Hi Jeremy, in #9 i call vendor.js
        It seems that line 9 doesn’t embed jQuery right.
        I’m looking forward to your answer 🙂

        • Jeremy Englert

          Check out the newest version, I changed the way the theme calls jQuery. Originally, it was bundled with other vendor files with caused issues with some plugins.

  • Jonas Schug

    Hi. Have you recognized the bug in the dropdown-menu? The items are NOT clickable. I’m not sure, but i think this is a foundation bug..

    • Jeremy Englert

      This is a known bug in Foundation. I believe they pushed a fix late last night. I will get that integrated into JointsWP today.

      • Rob Suckley

        can you tell me how to fix this issue please? great theme btw

    • Jeremy Englert

      This has been resolved.

  • Will

    Great theme! Thanks for the hard work. Quick question if I may…what nav template have you used for this site? Looking to emulate the same responsive format, ie top-bar with logo for medium up and then sticky top bar with logo and dropdown menu?

    • Jeremy Englert

      Will, this site is actually using Foundation 5 – so its a bit different. However, you should be able to build something similar using the new navigation patterns in F6: http://foundation.zurb.com/sites/docs/responsive-navigation.html

      You can setup different navigation types for different screen sizes.

      • Will

        Jeremy, thanks for that clarification. Didn’t want to reinvent the wheel if you had already done it 🙂

        Final question – the file foundation.scss in the vendor/foundation-sites/scss folder is presumably where you define what foundation css elements you want to include in a project. Would this not get overwritten by a bower update of foundation? Is there any way of defining what you want to include/exclude which will not get overwritten?

  • Bobby Ambrose

    Hello Jeremy. How do you get your template to show a fixed website instead of a full site? I know the F6 command but where do I put it for the header and body copy?

    • Jeremy Englert

      Hi @bobby_ambrose:disqus, I’m not sure I 100% understand your question. Full site vs. fixed site?

      • Bobby Ambrose

        @jeremyenglert:disqus Full site meaning Full width site (browser edge to browser edge). Fixed (being a certain pixel width exp: 960 pixels wide site). Foundation 6 has a class=”fixed” but I’m trying to figure where can I put it into my jointswp header to restrict my site to be a certain size.

        • Jeremy Englert

          @bobby_ambrose:disqus, I’m not familiar with the “fixed” class in Foundation. I know “fixed” was used in Foundation 5 for a sticky navigation.

          I tried searching the docs and couldn’t find any reference to a “fixed” class. Can you point me in the right direction?

          Big thanks!

    • Emily Johnson

      You just need to override the max-width of .row

      .row { max-width:none; }

  • http://www.freelancealot.co.uk/ Freelancealot

    Hi Jeremy,

    I’m using the previous F5 version of JointsWP and am getting the following error when I include the related posts function on the loop-single.php file.

    Notice: Undefined variable: tag_arr in /public_html/…/wp-content/themes/Horizon-Grenada/assets/functions/related-posts.php on line 8

    This is what’s on line 8: $tag_arr .= $tag->slug . ‘,’;

    It is displaying a related post underneath the error notice.

    Any clues?

    Cheers,
    Tracy

    PS: Can’t wait to delve into the F6 version.

    • Jeremy Englert

      @Freelancealot:disqus, thanks for the heads up! I’ll take a look into this. If you’re a GitHub user, it would be awesome if you could open this as a new “Issue”.

      • http://www.freelancealot.co.uk/ Freelancealot

        Okay, will do. FYI I got rid of the warning by adding $tag_arr = ”; right before global $post;

        But there may be a more elegant way of dealing with it.

        Cheers,
        Tracy

  • Penny Badowska

    I am still using the earlier version of JointsWP with Foundation 5. I want the top bar navigation to work on tablet as well as mobile. The burger bar comes up ok, but when clicked on a medium size screen (640-1024), the normal menu appears rather than the vertical menu. Link to my site is http://greengingerdesign.biz/. Just cannot fathom it out as I have changed everything I can think of in settings.scss. Do I need to change anything in nav-top-topbar.php? Thanks!

    • Jeremy Englert

      I see a couple of issues.

      It looks like you commented out the “off-canvas-wrap” class – you’re going to need that.

      You’ll also need to update your header.php file to call the off-canvas nav. Like this: https://github.com/JeremyEnglert/JointsWP/blob/3.0/header.php

      • Penny Badowska

        Thanks Jeremy

        I have altered my header.php, but was unaware of commenting out “off-canvas-wrap” – is this in the .main.scss file? I can’t find it anywhere. Sorry if I’m being obtuse.

        It works fine up to 640px, which is the size I have set for small, and I want the same style of menu for medium (640 – 1024px). But I still get the menu in a horizontal arrangement, as for the >1024px screen. I have fiddled around in the foundation files to get the main menu title showing, rather than the sub-pages, and the sub-pages now appear, but there is no “Back”, as on the mobile menu.

        Thanks for your patience!

        • Jeremy Englert

          In your header.php, you have the off-canvas-wrap class commented out. This is necessary for the off-canvas to work correctly. I think that’s the primary issue.

          • Penny Badowska

            Jeremy

            I have already uncommented it, following your earlier advice, but it hasn’t made any difference. Is there anything else you can suggest? I have tried changing “$topbar-breakpoint: #{9999px}” in .settings.scss, but that has no effect at all.

            Thanks again

            Penny

  • Matt Long

    Hi Jeremy, thanks for JointsWP, it’s great.

    I have a problem which I have not yet fixed.

    I’m developing locally in MAMP environment. I’m compiling with gulp. All assets and files are loaded successfully in local environment however when I FTP to live environment, this is the only asset being loaded by the theme: wp-content/themes/theme-name/assets/css/style.min.css

    No js is being loaded what so ever.

    Is this something you have experienced before? Am I missing something? Do I need to compile files within the browser, after they have been built using gulp?

    Any help is appreciated.

    Thanks. Matt

    • Jeremy Englert

      Hmmmm. Very odd. I don’t think it’s Gulp related.

      Do you have a link I can check out?

      • Matt Long

        Hi thanks for the swift reply. Issue resolved.

        Details if interested:
        Previously enabled WP MultiSite, then disabled WP MultiSite and it must have caused irregular behaviour.

        Sorry to have wasted your time… and again thank you so much for all your effort and work on this. It has allowed me to progress my workflow and i fucking love JointsWP… have recommended to colleagues.

        Take care. All the best. Matt

  • http://wwww.numero7.ch olivier requet

    Hey thanks for this awesome job, quick question, the “install with codekit” menu item above is not active, do you have any documentation about it ?

    • Jeremy Englert

      The documentation is now in place for this.

  • Hella

    Hi and thanks for a great theme!

    I’m having some problems with adding the xlarge and xxlarge breakpoints. When I try to add them in the _settings.scss file and _breakpoint.scss file I get an error in the later one. It says it gets invalid css on line 135. Which is this part:
    // Otherwise, wrap the content in a media query
    @else {
    @media screen and #{$str} {
    @content;
    }
    }

    I’m really not sure how to fix this. Maybe I missed something? What steps are there to add those two breakpoints?

    Thanks for your help!

  • pmviva

    I’ve seen several pages using _e() function with ‘jointstheme’ instead of ‘jointswp’, for example:
    https://github.com/JeremyEnglert/JointsWP/blob/master/parts/content-missing.php

    Is this correct or is it a typo error?

    • Jeremy Englert

      This should be corrected now. Thanks!

  • pmviva

    Hi I’ve found several links in the documentation not working, for example in Menu Types all links points to:

    http://jointswp.com/docs/#

    Are the docs complete or there is some issue?

    • Marvin Sohiong

      I think the docs is not yet completed.

  • http://www.alessandromarotta.it Alessandro Marotta

    I’m using this starter theme for my future sites. Thank you man! Keep up the good work! A++

    • Jeremy Englert

      Awesome! Would love to see sites you end up building.

  • http://www.dimension-internet.com Dimension Internet

    I got a problem, when I set a page for articles the feature image doesn’t work. The condition is not fulfilled and it’s empty…
    I’m stuck.

    • Jeremy Englert

      Very odd. Do you have a link?

      • http://www.dimension-internet.com Dimension Internet

        http://artandtours.us/ in the section “News”

        Featured image is set and is displayed if you unset the page for articles

        • Jeremy Englert

          I don’t think I’m 100% understanding the issue. I’m seeing images on my end.

          • http://www.dimension-internet.com Dimension Internet

            I’m talking about the “featured-hero” image 🙂 for the news page. “News page” contains articles.

  • Pertti Rytinki

    Hello, nice that i found jointswp. I am watching tutorials some frameworks and i deside to take foundation my workflow and then i see someone recommended joinswp.. yes.. Short question. I am beginner(totally) and want to learn to do things right and now i am feeling that i am not doing everything right.:p Not sure.. therei empty page put i have a feeling that that isn’t quite right.

    I am just starting to learn foundation frameworks and coding and hope doing clean, nice, fast websites in the future. I use localhost wamp version and cms WP offcource. Do yoy have so call “beginner video” or somekind other document for us? I have install nodejs, git and your package and wordpress. I try to run that gulp(Went my theme directory inside my theme folder, where is those other theme also) and try to npm install gulp.. it couldn’t run it. When i using wp, then there(CMS) i see, that is activated. When i go your template i see there is much many stuff, but i cant release those. I know here is most people more educated already and pro who dont need to go basics, but i want to learn and learn, that is my task right now. I have watch many tutorials already, but still it doesn’t open and my working isn’t now so fluent. foundation tutorials is quite a bit those who knows lot of stuff already. Could you or someone else help me out.. i know.. sound wtf.. go home leave this professional, but hey.. i want to be professional in future. That’s why i am here and ask stupid rookie question. maybe i laught this afrer few weeks or months.. :p

    thanks..

    • Jeremy Englert

      I’ll be making “Getting Started” videos soon – it’s at the top of my to-do list. But finding time to get to that list has been a bit of a challenge. But it shouldn’t be much further off. For now, the File Structure page is a great resource: http://jointswp.com/docs/file-structure/

      You need to be running ‘gulp’ from inside of your JointsWP folder (or whatever you named your theme) – not the “themes” folder. Give that a shot and let me know if that works.

      I’m glad you’re diving into JointsWP. WordPress theme development seems like a giant hurdle, but the best part is that you can learn it slowly while still building awesome sites. Feel free to ask any questions if you get hung up.

      • Pertti Rytinki

        I need a littlebit practice and more learn about basic. Thanks anyway. That gulp run inside a theme very well.. but then i think, that i what i do wrong because my pages doesn’t show that they should.. i think problem is here :p.. But hey, let me know, when you are doing that video.. then i see the, how it should be look and learn how to set those widget or plugins on. That’s why i think i need learn basic things(Where and when and how change code or activated those things) I use suplime text editor 3, i Have node.js and git also. i think i have to learn more about cmd or git(bash) command line text commands.

        I have understand also that, if i have install one time your set, i dont have to install that anymore, because then i can use git bash and install basicly anything what includes your project, only write command line new project like foundation new “project name”. Like i say, that video could help me and help me a learn do amazing thing your blank template etc. But hey, thanks anyway and i am continue learning.. :p Maybe someday. Maybe few question? how about seo, what you recommended? other plugin? page builder? what is good to know? what dont do?

  • Tom Legens

    Hey Jeremy, have you thought about adding gulp-sass-glob into the project. I’ve updated it in my projects but think it would be a useful tool for organizng scss files.

    • Jeremy Englert

      Thats looks pretty sweet. Do you mind sending me one of your Gulp files so I can checkout how you’re using it?

      • Tom Legens

        No problem, I sent it to your email.

  • Joby Kent

    Hey man,

    Love your work – just wondering though, whats the difference between JointsWP and FoundationPress? Are they effectively the same or does Joints include deeper integration with wordpress out-the-box?

    • Jeremy Englert

      They’re very similar. I’d say the integration with WordPress/Foundation is the same between the two themes (they both do a good job of integrating with WP without being over styled – if that makes sense).

      When the two themes started off – they were much more different. But over time, they seem to becoming more and more similar. However, there are a few differences:

      – JointsWP has less dependancies. While FoundationPress requires a specific workflow, JointsWP was developed to fit any workflow.
      – JointsWP is used by ZURB 🙂

  • susan

    Hi Jeremy, am hoping you can help me out with a problem I’ve encountered using a timetable plugin which has its own template file for single event posts. The problem is that using this template seems to break the page layouts so that they do not recognise paragraph breaks, image alignment and wrap around text. Although the plugin is bootstrap based, I tried it out with another foundation based theme (wp-forge) and it worked fine. So I don’t think it’s a bootstrap/foundation conflict. I also created another version of the site using a custom template which uses my foundation based posts template. Both versions are shown below. With my custom template there is a further problem of the sidebar not clearing if the main content is short

    If you have any ideas as to where I should look in order to fix this, I’d be really grateful. I’m using a foundation 5 version of Joints btw as the project was started a while back.

    Single event page using default event-page template and second version same content in theme post format
    bit.ly/1Sspsvs
    bit.ly/1R1qD3e

    single event page using plugin custom event-page template and second version using same content in theme post format

    http://goo.gl/at1yaS

    http://goo.gl/24tEtw

    single event page using custom event-page template with sidebar not clearing with short main content (not a problem using theme post format or using default single event template)
    http://bit.ly/1Qc0j1F

    Many thanks. Susan

    • Jeremy Englert

      This is definitely odd. It looks like P tags are being completely stripped out, which is what is causing the issue.

      The only thing that comes to mind is a function that JointsWP used to have that automatically removed P tags from around images (I forget exactly when this function was removed) – maybe that’s conflicting with the plugin somehow?

      • susan

        Thanks for your thoughts Jeremy. The version of JointsWP I am using was downloaded in October 2015 so not that old. Can you tell me how I can remove the function so that I can see if it resolves the problem – not just with the paragraph tags but also the non recognition of the image alignment and not clearing of the sidebar (if that is the correct way to describe it?). Susan

        • Jeremy Englert

          I’m pretty sure it was removed by then – but look for a filter that calls for ‘wpautop’ in your functions files. This is a super weird issue for sure.

          I don’t see any issues with the sidebar.

          • susan

            Thanks Jeremy – I’ll look into that. Meantime, this is the sidebar not clearing when main content is very short. Any ideas as to how to fix this gratefully received!
            http://www.ideology.uk.com/development/zenyoga.org.uk/events/zen-yoga-2/

          • Jeremy Englert

            Your sidebar isn’t “wrapped” with a column class. If you wrap it, it should fix the issue (see attached).

  • Dana Johnson

    Your work is amazing, Jeremy! Just completed my first JointsWP website: http://curtisjohnsonphoto.com/. Already diving into my next project and excited to work with Foundation 6. Keep up the great work!

    • Jeremy Englert

      @disqus_UPyyibADFI:disqus, this site came out great! Do you mind if I share this?

      • Dana Johnson

        Thanks! Absolutely. Share away!

  • jkinley

    Jeremy,

    Had any luck getting a flexbox sticky footer working with JointsWP. It’s so easy to impliment, but not working with JointsWP. I’ll keep playing with it and let you know if I find a solution.

    Jeff

    • Jeremy Englert

      Jeff, I’d LOVE to see what you come up with.

    • http://wwww.numero7.ch olivier requet

      Hi me too, i’m also looking for a working sticky footer… all the JS solutions i found on the foundation forum does not work properly.

  • Mike Langone

    Move theme to production – Is there a packager that allows moving a them to production. Or do all files get uploaded? IF not what files need to be included in a packaged zip file to be installed through WP-Admin? I dont think node_moduels or vendor but I could be wrong.

    • Jeremy Englert

      You could create a Gulp task for this. In fact, that would be a pretty cool task.

      The files you don’t need are node_modules and bower_components. You will need the vendor files.

      • Mike Langone

        So modify a gulp-zip plugin to exclude those folder? hmm I may take a shot at it if i have time. If not this would be a cool feature to include. I usually hand off theme files in a zip to the client, making it easy for them to just upload through the wp backend saves me a lot of explaining to them.

  • http://www.markpower.me.uk Mark Power

    Hi Jeremy. Thanks for being an absolute star and giving us Joints!
    I have a quick question with regards to the use of text-domain … am I right in thinking that the ‘jointswp’ should simply be replaced across all files – renamed to whatever suits the name of the theme going forward?

    Cheers

  • Nicola

    Hi I have been using JointsWP to build my first WP theme and love it however I have come up against a problem were the sass cannot be updated. I installed using gulp and have the gulp watch command running to compile the sass however I am currently getting get the following message :
    assets/scss/style.scss
    Error: media query expression must begin with ‘(‘
    on line 18 of stdin
    >> ./vendor/foundation-sites/scss/foundation”

    I have looked at foundation.scss line 18 and it is @import ‘components/visibility’; and I tried commenting it out but the error still come up. I am really at a loss on how to go about fixing this I am guessing it something I have done but cannot pin point what. I am new to foundation, sass and wordpress.

    • Jeremy Englert

      Hi Nicola, which version of Foundation is your theme running?

      • Nicola

        Hi Jeremy, seconds after posting this question I figured out the problem (even though I spent a couple of hours prior to this trying to solve the problem) I was stupidly looking for a problem within /vendor/foundation-sites/scss/foundation instead of looking in assets/scss/style.scss when I checked that file I figured out what was causing the problem. Thanks for such a quick reply anyway I feel really silly, would it be okay to delete this question?

  • Will

    Jeremy, I have a customised version of JointsWP so don’t wish to overwrite my theme to install foundation-sites 6.2. I therefore thought that running “gulp bower” would do the trick and update the /vendor folder….but no luck. Strangely though bower seems to think it has done it. The output I get in my command window is as follows:

    [19:08:34] bower cached git://github.com/zurb/foundation-sites.git#6.2.0
    [19:08:34] bower validate 6.2.0 against git://github.com/zurb/foundation-sites.git#=6.2

    But when I visit the vendor folder various foundation files state that they are still 6.1.2 and I can see in other ways that they have not updated. Maybe it’s a cache issue but I can’t figure out how to clean the cache…tried the following to no avail…

    // Bower – Clean Cache
    gulp.task(‘bowerclear’, function() {
    return bower({ cmd: ‘cache clean’})
    .pipe(gulp.dest(‘vendor/’))
    });

    Any help greatly appreciated as always…cheers, Will

    • Jeremy Englert

      Try completing deleting the vendor folder then run gulp bower.

  • Emmi Gainar

    Hi, I have a problem with my top-bar. It is working just fine in some browsers (Chrome and Firefox) and it is not floating like it should in others (Safari). I can not figure out what the problem is. I googled after some solutions but can´t find anything helpful: http://jointswp.imperativmedia.se. I would really appreciate a little help please 🙂

    • Jeremy Englert

      That’s odd. The float is working, but for some reason, the columns are showing up wider than they should, so it’s pushing the navigation down. If you make the logo large-4, it “fixes” the issue.

  • Emmi Gainar

    I have one more question: if i want to style things differently for different breakpoints (for example i want to float the meny to left on medium and float right on large and xlarge)… what is the best way to do it?

  • Elliissu

    I have very odd problem with navigation bar. It doesn`t matter which navibar i use (offcanvas, topbar, nav-bar etc.), but in Firefox (45.0) i need to double-click parent link to get open that page. Problem is only with those links who has child navigation (sub-menu). And problem seems to be only in Firefox. Can you say where the problem might be? I haven`t noticed same problem other browsers, only in Firefox (45.0).

    • Elliissu

      And actually there seems to be problem with Android-phone + Firefox (newest version), your demo-site (http://jointswp.com/demo/) menu doesn`t work at all…

      • Jeremy Englert

        I just updated to FF 45 on a Mac and I can’t replicate this issue. Let me keep looking.

  • Emmi Gainar

    Hello,
    I suddenly started getting this warning from Codekit:

    WARNING: Rename $grid-column-responsive-gutter to $grid-column-gutter to remove this warning.
    on line 41 of /Volumes/jointswp.imperativmedia.se/vendor/foundation-sites/scss/grid/_grid.scss
    from line 15 of /Volumes/jointswp.imperativmedia.se/vendor/foundation-sites/scss/foundation.scss
    from line 18 of /Volumes/jointswp.imperativmedia.se/assets/scss/style.scss

    … and I can not figure out what the problem is.
    Could you please help.
    Best,
    Emmi

    • Jeremy Englert

      Did you recently update the version of Foundation you are using?

      However, it appears your error is also telling you what files you need to rename. Have you tried that?

  • Matt F

    So far so good, but I have one snag that I cannot seem to figure out. I have a console error for foundation.min.js. The path is incorrect (there are a bunch of 20%20% after my WP location). How does this happen? Is this a permissions error? Thanks!

    • Jeremy Englert

      An older version of JointsWP had some extra spaces in the line that enqueues the script. Get rid of those and you should be set.

  • Jonas

    Hi Jeremy, I’ve built the website http://www.jubi-unterfranken.de based on JointsWP.
    There’s one thing with the mobile off-canvas menu.
    -> I can’t reach the menu-parent pages like “inklusiv”, “couragiert”, etc.
    Is there a way to make them clickable by fingertouch on the text?

    Thank you!
    Jonny

  • Daniel Crowe

    Great starter theme, have you ever considered adding in the media queries to the default style.css for the CSS version so we don’t have to bother with adding them. Seem like a simple little addition that would make for an easier start up for users

  • Brad Hartshorn

    Hi Jeremy, thanks again for JointsWP! I used it to make a humble site for some friends: http://patmorrow.com/. I’m starting on another with the new Foundation6 version now. Stoked when I saw that 🙂 I have a question about meta boxes. In custom-post-type.php, you have a comment suggesting checking out https://github.com/jaredatch/Custom-Metaboxes-and-Fields-for-WordPress, but the author doesn’t recommend it’s use anymore. Do you know any other good resources? Have you used Piklist? (https://piklist.com) it seems useful, but I’m having troubles getting things to show up on the front end because I’m a newb. I couldn’t get Advanced Custom Fields to work with an image gallery. Any ideas?

    • Jeremy Englert

      Thanks for the heads up – I’ll get that updated. There’s actually a newer version of CMB: https://github.com/WebDevStudios/CMB2

      I normally use CMB or Advanced Custom Fields depending on the project. However, I have also heard great things about Piklist and Pods.

      • Brad Hartshorn

        Awesome thanks a ton!

  • Gus

    I’m looking to using JointsWP. I’m a relative beginner when it comes to WP, php, css and html5. Have played around with a few WP themes, done some php/html handcoding in Brackets so not completely useless. I’m having a hard time getting my head around JointsWP SASS/CSS implementations, I’m sure it’s not rocket science but it’s just getting a start. I’tried looking for beginners tutorials for using JointsWP but to no avail. Did find stuff for Zurb Foundation 5 tutorials but outside of the WP environment. Does anyone have any suggestions that would help, would be much appreciated 🙂

  • Antonis Iliadis

    Hello Sir,

    Amazing your framework ! Respect to You…

    I have only one issue in this website and I am wondering if can you help me…

    Link:
    http://www.xscapereality.com/

    Question: Only in frontpage and only in the locations field where are images there there is a problem with jerky scrolling and only in the mobile mode… ( No Smooth! ) | Can you check it please and if you have any solution let me know!

    Thank you,

    Yours Sincerely,

  • http://schallcreative.com Fred Schall

    I never had the chance to thank you for your awesome work. Here’s my first attempt implementing JointsWP – https://nmymca.org. I’ll be rolling out a couple others. At the end, I had trouble creating a full height mobile menu. Other than that, everything was pretty smooth. Keep up the great work and thank you!

  • http://www.artpineda.com Art

    Thank you for this. Have made an effort to use this for my latest clients. Here’s a sneap peek……..

    http://webtesting.noip.me/

  • http://sebthiroux.com/ Sebastien Thiroux

    Hi, I’ve been using jointswp with sass to redesign my portfolio and for a reason I can’t see background images are never found. What am I missing?

    • http://sebthiroux.com/ Sebastien Thiroux

      Of course I just have to post a comment to find out what was wrong. I dropped the pictures in the images folder, but for another project :-/, maybe it’s time to take a break.

  • Brad Hartshorn

    Hi Jeremy, I’m having a weird issue with my off-canvas navigation not working on Samsung android browsers for a new site I’m building. I just built a site with the Foundation 5 version of JointsWP and never had an issue. When I tap the menu icon, the opacity transitions, but the menu won’t slide out. I posted it on stack overflow awhile back but haven’t heard anything so I thought I’d see if you know anything about this? Thanks for any ideas, and for JointsWP, of course! http://stackoverflow.com/questions/37802188/zurb-foundation-6-off-canvas-navigation-not-working-on-android-internet-browser

  • dfvink

    Hi Jeremy!

    Quick question; I’d like to start working with the related post function, but it seems there’s no documention yet – any pointers?

    Thanks!

  • Christina

    Hi Guys,

    I am trying to work with the starter theme JointsWP. It has Foundation 6 and Sass built in. Trying to re-design my portfolio, i got the theme on my wordpress site locally but when it came to compiling the sass and css file the theme broke and foundation is not working. it is giving me a undefined mixin error ‘buttons’ Have you ever experienced this? I wanted to learn sass but never set it up before with wordpress, do i need to compile my sass and css or is that done for me already.

    Did any of you run into this problem before?

  • Rob Suckley

    How do I go about changing the theme name, as I have many sites now using this theme but they are all called WPJoints-master, is it simply renaming the directory, or do I need to do anything else?

  • Damsel

    Can you use Sidebar Nav with Joints WP? I need to create a sidebar menu for each main nav item, that would be replicated in the sidebar for that page. What’s the best way to tackle this?

  • Osmosis

    Hello everyone, i just got started with jointswp and wordpress. I would like to increase the max number of columns to 24 instead of 12. is it possible?

  • http://www.markpower.me.uk Mark Power

    Hi Jeremy. Love the theme – using it on pretty much all my stuff.
    Quick question:

    How would I go about putting the search bar in the menu. I’m using nav-offcanvas-topbar; so I’d like the search box to be last item (top-bar-right) and then appear in the off-canvas menu when it goes to vertical on mobile screens.

    Thanks man!

  • Michael McDonald

    First off, what a wonderful, wonderful theme you have created. Very logical construction.

    I’m having a problem with the off-canvas navigation. Specifically the sub-menu does not slide open when using Safari & Chrome in iOS (iPhone). It works perfectly in Firefox (iOS) and in all desktop browsers. I’m using the CSS version (I haven’t gotten around to SASS yet). Any ideas or assistance is appreciated.

    Client site with issue: http://www.unruhfire.com/