Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Lessons:19Length:2.2 hours
  • Overview
  • Transcript

5.1 Add Compatibility JavaScript

There is certain functionality native to all modern browsers that optimally functioning websites rely on. Yet unfortunately there are still some not so modern browsers hanging around that don’t natively support these critical components. Learn how to solve that problem by adding some JavaScript-powered cross-compatibility in this lesson.

Related Links

5.1 Add Compatibility JavaScript

Hey this is Kezz and welcome back to WordPress Theme Creation with Underscores. In this lesson you'll learn how to add some JavaScript to your theme that will help a little bit some of the older browsers that are still floating around out there. Now we're gonna add a couple of scripts that will help to make sure that HTML5 elements, media queries and REM units are supported as widely as they possibly can be. The first of these two scripts is Modernizr. I want you to go to Modernizr.com/download. I'll provide a link to that for you below. We're gonna be using Modernizr to add support for HTML5 elements and media queries to some of the older browsers out there. We don't need all of these pre-checked elements, just because we won't be using them. So to begin with, you can uncheck Modernizer.load and you can uncheck Add CSS Classes. This HTML5 shiv that you see here will be providing the support for HTML5 elements, so leave that checked. And then the support for media queries will come from checking this box here. Once you've done that, hit the Generate button and you'll be given a JavaScript file that you can download. I want you to save that out as modernizer.js. The next script we're gonna be using is the REM unit polyfill created by Chuck Carpenter. This will make sure that the REM units that we've been using throughout our site are supported as widely as possible. There are only a couple little browsers that don't support REMs and this will take care of those. So grab yourself a copy of the script from GitHub. I'll provide a link for that as well. And download that as rem.js. Once you have you downloaded both of those files, go into your theme's js folder and paste them both in. Now we need to load both of those scripts into our theme. And we're gonna do that in the same way that we loaded in our custom navigation script earlier. In your Custom Functions file and inside your in queue style script function, drop in these two lines of code. These are both added in the same way that you've already seen. We use the WP in queue script function. We set a unique ID for these scripts. And you'll notice in both of these cases we're using the official names of each of these scripts. And that will make sure that if somebody else has already loaded Modernizr or if somebody loads Modernizr after us, there will only be one instance of that script as long as they also use the correct names. After that unique ID we have added the location of the files. And then you'll notice on the REM unit polyfill there are a couple extra parameters that have been added in. Now you can ignore those two that are set to false, because we are not actually passing any information there at all. So don't worry about what those two are for now. The last one is the one that we wanna have a look at, which we've set to true. This last parameter sets the script to be loaded at the bottom of the site before the Body tag, rather than in the Head section. And whenever you want to load a script in the bottom of the site, then you wanna set that last parameter to true. If you'd like to learn more about these parameters through this function, I'll give you a list to where you can take a look at the information on WordPress' official site. We use Chrome Developer Tools to make sure that both of those scripts are being loaded correctly. And sure enough, we can see in our Head section we have Modernizr being loaded in. And then way down the bottom, we have our rem.js file being loaded in as well. In the next lesson, you're gonna learn about a couple of little settings that might seem hidden unless you know to look for them. There are a couple of little things that you'll need to just set to make sure that everything is just right when a user comes to work with your theme. And you'll learn about those in the next lesson. I'll see you then.

Back to the top