Adding Respond.js to WordPress

To get the Bootstrap columns, that we use throughout our WordPress theme, to work in Internet Explorer 8 we need to add the respond.js script. This tutorial will go over how to add the script to our theme the proper way.

Note: Although this method of adding the respond.js will work, it is not the best method to add the script since our WordPress theme only needs it for certain versions of Internet Explorer. Because of this, I recommend adding the respond.js script this way.

This video was also recorded after the Bootstrap menu and Bootstrap grid tutorials. Please don’t get discouraged that your theme doesn’t look like the one in the video. Just focus on the code in this tutorial and keep moving through the tutorials. Your theme will look the same in no time!

Steps

  1. Download Respond.js from here
  2. Unzip the download and move the respond.min.js file into your /js/ directory
  3. Open the functions.php file and enqueue the script around line 105. Your bootstrapwp_scripts function should look like the following:

  4. View the source of your WordPress site and scroll down to the bottom to determine if the script was added.

As I was writing this tutorial I realized that respond.js only needed to be added if the user was on IE < 9. As of now there is not a perfect way to add conditionals to the function while enqueue scripts. From what I have read, there is a ticket to get this added to a future release of WordPress. When this gets added, I will update this tutorial. For now, it shouldn't hurt anything for it to be added for all browsers.

Notes from the Video

The Bootstrap website goes over browser and device support here. This also goes over why we need to add respond.js

You can download Respond.js here.

Feedback

Please let me know what you think of this tutorial and if you need help with anything.

  • A very important step in order to appease Internet Explorer

  • Dony P

    Video gone …

    • The video is displaying on my end. Make sure you are logged in and your account is active.

  • kulkarni

    hi brad
    I have followed your video step by step, so far I can get the content as per your display. But the BS type layout is not happening.
    Any thoughts?

    • Once you get to the “Adding the Bootstrap Grid system to WordPress” tutorial you will start seeing a BS layout.

  • K A

    Hey Brad! Nice stuff – great to be able to follow the steps of making a pro theme from scratch, in a nice a understandable way, something I’ve been waiting on for years.

    Is it me, or is it on purpose that our current design doesn’t look like yours? If so it’ll be nice for others if you made a new version of this video where you’re design reflect the design that the viewer got themselves.

    • As you move through the tutorials your theme will look exactly like mine if you follow the steps. I recorded every steps of the theme development process, so there shouldn’t be anything left out.

      • K A

        Hey! Yeah but the thing is that when I follow your steps and my theme doesn’t look like yours I get confused. I understand that my will eventually look like it, but it was just some feedback, because it can be confusing for people

        • Yeah, I can understand how that could be confusing. It should actually only be in this tutorial where you see differences. I think I forgot the respond.js tutorials so had to bounce back and record them. Thanks for the feedback.

          • K A

            That make sense! yeah and thank you for the tutorials 😀

  • Jatin Johny

    Last Video ends with navigation bar looking weird. As this video started, i see a proper bootstrap navbar.
    What did you do in the mean time ?

    • Jatin, are you reading the written section of the tutorial? It answers this question exactly. Moving forward please ask your support questions in the forum if they are not covered in the tutorials.

  • Jatin Johny

    Your videos are not sync with your code.
    This video ends with code snippet:
    view 7.jp
    Next Video start with code snippet:
    view 8.jpg

    How am I supposted to resolve this ?

  • Ahmad Bagwi Rifai

    No video, just show
    Unable to connect

    Firefox can’t establish a connection to the server at player.vimeo.com.

    • Video is loading on my end in Firefox. Vimeo might have been down for a minute?

      • Ahmad Bagwi Rifai

        Some provider block vimeo in my country. Sorry no problem with your tutorial 🙂

        • Chema Gallego

          You can use a public proxy, a vpn or Tor browser

  • Nick Hiebert

    I did this and when you view the next video it shows the styles being applied and you’re able to see the sidebar on the right. My theme still shows everything being on the left side. I feel a video was removed or missed?

    Thanks

    • Nick Hiebert

      Sorry never mind, it looks like in the next couple videos it shows what I’m seeing. Perhaps you went backwards when you added it. Great content so far, something I’ve been wanting to learn for sometime now.

      Cheers!

  • José A. Neira

    In the past video of your theme appears without sidebar, and on this current video the sidebar appears. how did you do that?

    • The respond JS videos were created after the next video in the series. Continue with the tutorial. No steps are left out.

      • José A. Neira

        yes, I realized, thanks!

  • Andrew

    How come my site does not look anything like yours? All of my site content is shifted to the left, whereas yours is aligned nicely in the center?? I really don’t understand.

    • Keep moving along in the tutorials. You haven’t added the grid system yet.

      Note: this question was asked in the comment below.