jQuery included with Genesis?

[johndove]

Hi,

I'm new to Genesis frameworks and recently bought the Corporate theme. And I just bought the Adaptivate responsive plugin, which failed to install. The doc installation instructions say "make sure jQuery is installed on your page..." I was certain that Genesis themes CAME with jQuery, but I cannot find it. In the Genesis theme directory, at wp-content/themes/genesis/lib, there is a js directory, but it does not include jQuery. - ??

Also, incidently, Studiopress forum does not accept my password from one day to the next. I constantly have to get a new one. What's up with that?

Any help is appreciated. Thanks.

John

[Brad Dalton]

Genesis and StudioPress child themes are responsive out of the box so a plugin like that may not be needed or help.

It looks like its not really a plugin but rather plugin files which you need to install manually. which should be supported by the author of those files.

Is there some reason you're not happy with the Corporate child themes responsiveness?

---

Tutorials for StudioPress Themes.

[johndove]

Hi Brad,

Thanks for the quick reply. As far as I can tell, it doesn't have any responsiveness. Here's the site I'm working on: http://wp.woodensun.com (which is just the corporate theme modified). Shrink the browser down to any size... it isn't responsive at all... what am I missing?

Thanks,

John

[Brad Dalton]

You are right. I think it will be updated at some stage.

Maybe you might like to use another child theme which offers the same features.

This is a great theme http://demo.studiopress.com/agency/

---

Tutorials for StudioPress Themes.

[johndove]

Too late. I don't want to start over. I'm hoping that plugin will work. Just to confirm, jQuery does not come with Genesis themes (unless the specific theme requires it?)

[Brad Dalton]

Already included in the core so you only need to enqueue jQuery on the front end where you want to use it.

The code for this maybe included in the download files for your plugin.

---

Tutorials for StudioPress Themes.

[johndove]

Brad,

I know I'm straying a little out of my support zone here, but yes, the jQuery is included with the plugin. Obviously this code needs affect the whole site, so where exactly is "the front end"?

Thanks,

John

[Brad Dalton]

Where do you want to use it on your site? Every page?

Are you sure the jQuery library is included in the plugin? No need to load it twice as WordPress already loads it in the backend.

The jQuery code for the plugin will be in the files.

I'm not familiar with the plugin you are using however the plugin author should supply and support installation for premium products.

Here's an example of how jQuery scripts are loaded from the child theme.

For a plugin:

Can't test this because i don't have access to third party premium scripts.

Hope that helps John.

---

Tutorials for StudioPress Themes.

[johndove]

Thank you!

[johndove]

Brad,

I'm hoping you can give me a little final push here to help me understand this. Here are the instructions for the plugin: http://woodensun.com/install.html.

What I don't get is:

B) Basic Usage:

$('html').adaptivate({
               'widths': [240, 320, 480, 640, 768, 960, 1024, 1280, 1440, 1600, 1920, 2400],
               'format': 'width_{operator}_{width}',
               'orientationFormat': 'orientation_{orientation}'

re "Then you can include it on your page by editing the template."
});

I think this has to be called via the method you sent me above with the wp_enqueue_scripts in the functions.php file? I get that I have to point to the .js file, I just don't know where the bit of code above fits into the equation. Exactly where/how do I incorporate that? If it does go in the wp_enqueue_scripts code you sent, a quick code mockup of exactly how it's supposed to look would be very helpful.

Thanks so much,

John

[Brad Dalton]

Hi John

I would need to spend some time to read and absorb the installation instructions as well as test the solution locally as its third party script and not Genesis or WordPress.

---

Tutorials for StudioPress Themes.

[Gary Jones]

Brad - I think the OP just needs:

jQuery(function ($) {
    $('body').adaptive();
});

echo'd in a <script> (might as well be inline since it's so short, or throw into a file and enqueue that instead). Use of body instead of html, since the site is XHTML, and the class attribute on html is only valid in HTML5.

John - any reason why you're not using CSS media queries? It would actually be a lot simpler. I'm not sure if you realise, but all the plugin appears to be doing is adding in a load of class values to the markup - you would still need to write the CSS for each width class that it adds that you wanted to target. If your content is such that it breaks at a point that doesn't match one of the classes, then you'll need to customise the default arguments for the JS plugin. You're also loading one or two JavaScript resources, which wouldn't really be needed. The only "benefit" of using a JS solution, is that you can target IE8 - however, no phones or tablets come with IE8, so the only people who wouldn't get a nicely responsive appearance would be those on desktop machines with a non-maximised window - and that's not something you should spend time worrying about.

My suggestion would be to drop this plugin, and invest in a developer who can make your site responsive using media queries with an hour or two of their time.

---

WordPress Engineer, and key contributor the Genesis Framework | @GaryJ

[Brad Dalton]

Thanks Gary.

I don't think it would be very difficult or time consuming to use media queries in any SP child theme to make it responsive.

---

Tutorials for StudioPress Themes.

[johndove]

Thanks very much guys. Let me first say that I contacted the developer of the plugin and the guy is a #[email protected] He's simply out to sell his plugin and not offer a thing in the way of support.

all the plugin appears to be doing is adding in a load of class values to the markup – you would still need to write the CSS for each width class that it adds that you wanted to target

Gary - I suspected this might well be the case. The reason I'm not writing my own (at least only as a solution of last resort) is that I'm not very good at it. As ubiquitous as mobile is now, it's hard to believe that someone hasn't come up with a plugin to do all the heavy lifting, with only minor tweaks required. I simply can't find anything like that. Do you guys know of anything? Even a "vanilla" stylesheet with just the basic properties coded would be a help. GoDaddy offers a mobile service where you just click a button and in seconds the site is mobile, looks great and works perfectly. I can't believe there isn't a plugin to do this.

and invest in a developer who can make your site responsive using media queries with an hour or two of their time.

I wish I knew where I could find one. Locally, I can't buy help. No one is interested.

Thank you guys VERY MUCH for your input, and if you have any further suggestions, I'd love to hear them.

John

[Brad Dalton]

Another option is to use the Slim Jetpack/Jetpack plugin which includes a mobile theme or a mobile plugin like WPtouch.

---

Tutorials for StudioPress Themes.

[johndove]

Thanks Brad. I was aware of that one, and there's another one called Responsive Select Menu. These are fine for phones, but no good for tablets. Unfortunately, we're expected to make it look good on everything from the size of a refrigerator to a postage stamp.

[Gary Jones]

Unfortunately, we’re expected to make it look good on everything from the size of a refrigerator to a postage stamp

And media queries are the way to do that. If you need a starting point, then copy and paste the MQ from the bottom of the Sample theme (also Genesis itself) style.css into your child theme, and amend further from there. No JS needed.

---

WordPress Engineer, and key contributor the Genesis Framework | @GaryJ

[johndove]

Okay guys, I've spent the past couple of hours on writing my own media queries and with a couple of corrections to my code it won't look half bad. Even though I know it's not exactly kosher to post this in a theme-based forum, since you guys have been so nice, I'm wondering if you would take a look and tell me what I need in just a couple of places.

'widths': [240, 320, 480, 640, 768, 960, 1024, 1280, 1440, 1600, 1920, 2400]

There's no freakin' way I can get that granular (though I wish I could). Here's what I've got:

@media only screen and (max-width: 1024px) - social buttons only

@media only screen and (max-width: 980px) - search form only

The main sizes I'm doing are for:

@media only screen and (max-width: 767px)

@media only screen and (max-width: 500px)

Okay, problems (just a few):

1. I am using Nivo Slider on the home page and I have the Slider Size set to "responsive." But it isn't responsive. I have it inside a text/html widget with a width of 63.2%. If I don't give it a width, it's width is 100% and that's no good. Not sure what to do here.

2. at 767 and 500, my text for the 3 middle modules (Showroom, Photo Gallery, About Wooden Sun - .home-middle-1, .home-middle-2, .home-middle-3) does not wrap naturally (100%) and I don't have a width on those classes. How do I get the text to wrap?

3. ...and any other advice you'd like to offer. : )

Thanks very much guys, for your help.

John

[johndove]

Sorry, the url again is http://wp.woodensun.com.

[Gary Jones]

When I narrow your site down to 540px, I'm still seeing several fixed widths of 1000px for container classes - these are making all of the 100% widths fill the available space, hence a non-responsive slider. #inner and #featured are both 1000px, #content is still 960px etc. Fix these (and others), and the rest of it will become responsive.

---

WordPress Engineer, and key contributor the Genesis Framework | @GaryJ

[Author]

Posts