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.

• Stripe WordPress Plugin by Dig Labs
• Premium Subscribers WordPress Plugin by Dig Labs

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.
  
• Do not use the Boilerplate jQuery (leave those checkboxes unchecked in the 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!