Menu icon Foundation
Can I add a body class using something in Foundation?

I'm working in WordPress and am new to Foundation (hiya). I'd like to use PHP conditionals to load partials depending on what screen size it is. Since Foundation is already in place on my WordPress install, it seemed to make sense to me to use what Foundation already has and build from that.

I've noticed in foundation.js in the beginning there's something like this:

var header_helpers = function (class_array) {
    var i = class_array.length;
    var head = $('head');

    while (i--) {
      if(head.has('.' + class_array[i]).length === 0) {
        head.append('<meta class="' + class_array[i] + '" />');
      }
    }
  };

  header_helpers([
    'foundation-mq-small',
    'foundation-mq-small-only',
    'foundation-mq-medium',
    'foundation-mq-medium-only',
    'foundation-mq-large',
    'foundation-mq-large-only',
    'foundation-mq-xlarge',
    'foundation-mq-xlarge-only',
    'foundation-mq-xxlarge',
    'foundation-data-attribute-namespace']);
            

         

So my thought was, can I take advantage of Foundation adding meta based on screen size to do the same thing except for adding a body class? Or is there another way I can add a body class that changes by screen size using Foundation's logic?

Even pointing me in the right direction would be helpful if not an exact answer. Thanks in advance. :-)

wordpressmedia-queriesclassesbody-class

I'm working in WordPress and am new to Foundation (hiya). I'd like to use PHP conditionals to load partials depending on what screen size it is. Since Foundation is already in place on my WordPress install, it seemed to make sense to me to use what Foundation already has and build from that.

I've noticed in foundation.js in the beginning there's something like this:

var header_helpers = function (class_array) {
    var i = class_array.length;
    var head = $('head');

    while (i--) {
      if(head.has('.' + class_array[i]).length === 0) {
        head.append('<meta class="' + class_array[i] + '" />');
      }
    }
  };

  header_helpers([
    'foundation-mq-small',
    'foundation-mq-small-only',
    'foundation-mq-medium',
    'foundation-mq-medium-only',
    'foundation-mq-large',
    'foundation-mq-large-only',
    'foundation-mq-xlarge',
    'foundation-mq-xlarge-only',
    'foundation-mq-xxlarge',
    'foundation-data-attribute-namespace']);
            

         

So my thought was, can I take advantage of Foundation adding meta based on screen size to do the same thing except for adding a body class? Or is there another way I can add a body class that changes by screen size using Foundation's logic?

Even pointing me in the right direction would be helpful if not an exact answer. Thanks in advance. :-)

This post has been closed. No new replies can be added.

Chris M almost 5 years ago

Hey Rachel,

The meta classes are added to the header, but (I believe) they're all always present, so don't let you target a particular screen size.

Foundation comes with Interchange: http://foundation.zurb.com/docs/components/interchange.html

This is probably more what you're looking for!

I hope this helps :)

Rachel Vasquez almost 5 years ago

Hi Chris,

Thanks for answering. I do want something like interchange, but not just for images, for partials being pulled in with PHP includes for example. I tried this and things broke. Am I doing this wrong or is interchange not meant for this?

<div data-interchange="[<?php include('partials/footer-sm.php'); ?>, (small)], [<?php include('partials/footer-md.php'); ?>, (medium)], [<?php include('partials/footer-lg.php'); ?>, (large)]"></div>

Or can I user interchange to apply classes in places?

Thanks.

Chris M almost 5 years ago

I haven't tried it myself, but I'm THINK that should work - I'm pretty sure interchange can load html partials, and your php should just be rendered as html. I don't have facility I test it right now, is interchange definitely working for you if you swap the php for images or normal html?

Don't know for sure if it'll work without trying it.

The other option is to use jquery to load the php depending on screen size...

Rafi Benkual almost 5 years ago

Interchange is for pulling in HTML partials based on media query. While you have the right idea, it needs to see an image or html extension. I was not meant for PHP.

If you are trying to change styles, you can target the body with a media query in CSS. If you need to add a class, jQuery is great for that. If that's not it, can you tell us what you're trying to do?

Chris M almost 5 years ago

Hey Rafi,

Would the php partials be rendered as html in the page that's served up? I'm not sure without trying, might be that it just doesn't work!

Otherwise, yeah adding a body class via jquery (or just loading the partials via jquery) might be easiest.

Rachel Vasquez almost 5 years ago

@Chris M, I had tried what I posted and it didn't work which is why I was confirming whether or not that was correct.

It looks like you're right, it wasn't meant for PHP. When I hardcode the url versus using something like an include or template_directory_uri() in WordPress, it doesn't work. And when I hardcoded the urls, it works but was giving me fatal errors in PHP that I know didn't exist outside being in the interchange structure.

So I guess interchange doesn't play nicely with PHP.

@Rafi What I wanted to do was swap out blocks of content that do have PHP in them using interchange. And since I can't do that, I wanted to use apply body class connected to Foundation's media queries so I can write a conditional that checks WordPress' body class for loading those blocks of content.

http://codex.wordpress.org/Function_Reference/body_class

I'm aware it can be done with jQuery, I just figured why write something from scratch when maybe there's something within Foundation that I could use as a starting point?

Brandon Arnold almost 5 years ago

As far as interchnage is concerned it's most likely a path problem.

You can try the solution here:
http://foundation.zurb.com/forum/posts/493-interchange-with-wordpress

Rachel Vasquez almost 5 years ago

@Brandon Arnold - not a body class, but definitely helps me to use interchange - I'll try this method and make any further comments there. Thanks. :-)

I would've liked the body class though, I feel it would've been a neater solution using WordPress conditionals if anyone's still up for offering a solution for that.

Rachel Vasquez over 4 years ago

I ended up just using JQuery to add a body class based on screen width which I based off of my foundation size for "small."

So something like this in case it helps someone in the future:

 function MobileClass(){
  var body = $('body'),
  viewportWidth = $(window).width();

  if( viewportWidth < 640 ){ 
    body.addClass('mobile');
  } else {
    body.addClass('medium-up');
  }
}

And I'm also using interchange rather than trying to use body class conditionals. The body class I'm using just for styling purposes.