Solution: Boilerplate Theme for WordPress + Dig Labs Stripe Plugin jQuery Issues

I am currently working on a subscription-based WordPress installation. For this project I am using a theme called Boilerplate. Users signup, pay their monthly fee (recurring or single payment) and get access to a set of restricted documents. After much research I settled on the follow plugins to handle payments and subscriptions.

The Problem
After installing both of them I ran into a problem where both the theme and the plugins were including jQuery at different times and different places and sometimes not at all. This broke jQuery for the entire site. The Stripe plugin payment form didn’t display correctly and you couldn’t submit it to run a payment. Also, some custom jQuery I had written stopped working too.

The Solution
After some back and forth with the Boilerplate theme developer (Thanks Aaron!) he came up with the following solution.

  • In Boilerplate Admin, enable and keep your custom JS (script.js) in the footer. Do this even if you don’t have any custom jQuery.
    Script.js settings for Boilerplate Admin
  • Do not use the Boilerplate jQuery (leave those checkboxes unchecked in the Boilerplate Admin).
    jQuery settings for Boilerplate Admin
  • And instead put the following at the very top of your custom JS file:
    if (!jQuery) {
    	document.write(unescape('%3Cscript src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"%3E%3C/script%3E'));
    }
    if (!jQuery) {
    	document.write(unescape('%3Cscript src="http://your.domain.com/wp-content/themes/boilerplate/js/jquery.js"%3E%3C/script%3E'));
    }
    
    window.$ = $ || jQuery;
    

Explanation
So, by default no jQuery is loaded by the Boilerplate theme. Once the custom JS file is included, it checks to see if jQuery has been defined. If not it loads it from the Google CDN. If that fails then it loads in your local copy. If you are on a page that uses either plugin listed above, then jQuery will have already been included. In this case when your custom JS file loads it checks and will see that jQuery is already loaded and will not include it again.

So that’s about it. I do believe this solution would work for any plugin in general that conflicts with the Boilerplate theme. If you’ve run into similar issues with any plugin please do share your experience in the comments. Happy WordPressing!

Posted in: Code Samples  |  Tagged with: , ,  |  Leave a comment
3 comments on “Solution: Boilerplate Theme for WordPress + Dig Labs Stripe Plugin jQuery Issues
  1. Joga says:

    Hi Christine,

    I have followed the steps you described above but it doesn’t work for me… I am working on a child theme, and added a custom script (jQuery). It works as a plain html but not in wordpress.

    Thanks,

  2. jibran says:

    Hmmmmm. I am not sure how this would function with using a child theme. Did you add the custom script to the child theme or the Boilerplate theme? My name is Jibran, btw. 😉

Leave a Reply

Most recent work

  • Our Restroom Our Restroom is an (inter)national crowdsourced campaign who’s goal is simple: compel businesses to make their single occupancy restrooms gender neutral. Championed by Kristin Russo, designed by Allison Weiss, built by me on WordPress.
  • How To Win At Feminism The badasses over at Reductress are at it again with their new book How To Win At Feminism.
  • Reductress I crank out on-going web projects for Reductress. Super fun as you can imagine.
  • Everyone Is Gay Everyone Is Gay is an indispensable question and answer resource for the LGBTQ community. Hell, it’s great advice for anyone with a body with an emotion or two. I made the site responsive among other things. Give it a look see.

Need hosting?

  • Media Temple My go to hosting provider. You get rockstar hosting and I make a little cash. No pressure, just clean honest fun.

Past work

  • Christine Chaney Creative The online presence of Seattle artist Christine Chaney. Specializing in architecture, art and apparel.
  • Get Your Shit Together This is a site dedicated to helping you get your shit together before an unexpected tragedy, like the loss of a loved one.
  • IHG Instagram Sweepstakes An awesome Instagram driven sweepstakes site for IHG.
  • Trivial Beersuit A site that provides professional pub trivia to bars and restaurants.
  • Audi YouTube Channel This site was a quick turn-around hair pulling adventure for the Super Bowl: revamping Audi’s YouTube Channel.
  • Teach.org The new Teach.org. Providing tools to help students become teachers.
  • Valhalla DSP A one man Seattle based company, writing pretty sick professional audio plugins. Check ’em out!
  • Microsoft Visual Studio 2012 Launch This sweet new Visual Studio 2012 Launch website sports a mobile first, responsive web design architecture and comes in 14 different languages.
  • Nice Manners Music Nice Manners is an LA based recording studio offering their clients all sorts of digital audio services. This is a demo of an internal genre based music search & player I built for them. I am ecstatic about launching this project—check it out.
  • Holiday Inn Tumblr A quick, fully responsive update to the Holiday Inn Tumblr page.
  • Microsoft's Art of Touch An artful HTML5 Microsoft website. Sadly, this site is no longer live.
  • Microsoft Hardware Healthy Computing Tool A useful little tool to help you find the perfect Microsoft mouse or keyboard.
  • Pella Professional Pella manufactures high quality doors and windows. This is their professional site.
  • Imaging the World A non-profit dedicated to providing ultrasound services in remote areas of the world.
  • Ginny Ruffner: A not so still life A site for a documentary film about Seattle artist Ginny Ruffner.

Blogroll