{"id":746,"date":"2013-12-17T16:21:17","date_gmt":"2013-12-17T16:21:17","guid":{"rendered":"http:\/\/cruz.codecharismatic.com\/?p=746"},"modified":"2014-07-04T22:50:32","modified_gmt":"2014-07-04T22:50:32","slug":"solution-boilerplate-theme-for-wordpress-dig-labs-stripe-plugin-jquery-issues","status":"publish","type":"post","link":"https:\/\/codecharismatic.com\/solution-boilerplate-theme-for-wordpress-dig-labs-stripe-plugin-jquery-issues\/","title":{"rendered":"Solution: Boilerplate Theme for WordPress + Dig Labs Stripe Plugin jQuery Issues"},"content":{"rendered":"<p>I am currently working on a subscription-based WordPress installation. For this project I am using a theme called <a href=\"http:\/\/wordpress.org\/themes\/boilerplate\" title=\"Boilerplate WordPress Theme\" target=\"_blank\">Boilerplate<\/a>. 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.<\/p>\n<ul>\n<li><a href=\"http:\/\/diglabs.com\/stripe\/\" title=\"Stripe WordPress Plugin by Dig Labs\" target=\"_blank\">Stripe WordPress Plugin<\/a> by Dig Labs\n<\/li>\n<li><a href=\"http:\/\/diglabs.com\/subscribers\/\" title=\"Premium Subscribers WordPress Plugin by Dig Labs\" target=\"_blank\">Premium Subscribers WordPress Plugin<\/a> by Dig Labs\n<\/li>\n<\/ul>\n<p><strong>The Problem<\/strong><br \/>\nAfter 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&#8217;t display correctly and you couldn&#8217;t submit it to run a payment. Also, some custom jQuery I had written stopped working too.<\/p>\n<p><strong>The Solution<\/strong><br \/>\nAfter some back and forth with the Boilerplate theme developer (Thanks Aaron!) he came up with the following solution.<\/p>\n<ul>\n<li>In Boilerplate Admin, enable and keep your custom JS (script.js) in the footer. Do this even if you don&#8217;t have any custom jQuery.<br \/>\n<a href=\"http:\/\/codecharismatic.com\/wp-content\/uploads\/2013\/12\/Screen-Shot-2013-12-13-at-9.39.32-AM.png\" target=\"_blank\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/codecharismatic.com\/wp-content\/uploads\/2013\/12\/Screen-Shot-2013-12-13-at-9.39.32-AM-150x150.png\" alt=\"Script.js settings for Boilerplate Admin\" width=\"150\" height=\"150\" class=\"alignnone size-thumbnail wp-image-754\" \/><\/a><\/li>\n<li>Do not use the Boilerplate jQuery (leave those checkboxes unchecked in the Boilerplate Admin).<br \/>\n<a href=\"http:\/\/codecharismatic.com\/wp-content\/uploads\/2013\/12\/Screen-Shot-2013-12-13-at-9.39.08-AM.png\" target=\"_blank\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/codecharismatic.com\/wp-content\/uploads\/2013\/12\/Screen-Shot-2013-12-13-at-9.39.08-AM-150x150.png\" alt=\"jQuery settings for Boilerplate Admin\" width=\"150\" height=\"150\" class=\"alignnone size-thumbnail wp-image-755\" \/><\/a><\/li>\n<li>And instead put the following at the very top of your custom JS file:\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nif (!jQuery) {\r\n\tdocument.write(unescape('%3Cscript src=&quot;\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.10.2\/jquery.min.js&quot;%3E%3C\/script%3E'));\r\n}\r\nif (!jQuery) {\r\n\tdocument.write(unescape('%3Cscript src=&quot;http:\/\/your.domain.com\/wp-content\/themes\/boilerplate\/js\/jquery.js&quot;%3E%3C\/script%3E'));\r\n}\r\n\r\nwindow.$ = $ || jQuery;\r\n<\/pre>\n<\/li>\n<\/ul>\n<p><strong>Explanation<\/strong><br \/>\nSo, 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.<\/p>\n<p>So that&#8217;s about it. I do believe this solution would work for any plugin in general that conflicts with the Boilerplate theme. If you&#8217;ve run into similar issues with any plugin please do share your experience in the comments. Happy WordPressing!<\/p>\n<!-- AddThis Advanced Settings generic via filter on the_content --><!-- AddThis Share Buttons generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"<p>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<span class=\"ellipsis\">&hellip;<\/span><\/p>\n<div class=\"read-more\"><a href=\"https:\/\/codecharismatic.com\/solution-boilerplate-theme-for-wordpress-dig-labs-stripe-plugin-jquery-issues\/\">Read more &#8250;<\/a><\/div>\n<p><!-- end of .read-more --><!-- AddThis Advanced Settings generic via filter on get_the_excerpt --><!-- AddThis Share Buttons generic via filter on get_the_excerpt --><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[57,36,51],"_links":{"self":[{"href":"https:\/\/codecharismatic.com\/wp-json\/wp\/v2\/posts\/746"}],"collection":[{"href":"https:\/\/codecharismatic.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codecharismatic.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codecharismatic.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/codecharismatic.com\/wp-json\/wp\/v2\/comments?post=746"}],"version-history":[{"count":35,"href":"https:\/\/codecharismatic.com\/wp-json\/wp\/v2\/posts\/746\/revisions"}],"predecessor-version":[{"id":787,"href":"https:\/\/codecharismatic.com\/wp-json\/wp\/v2\/posts\/746\/revisions\/787"}],"wp:attachment":[{"href":"https:\/\/codecharismatic.com\/wp-json\/wp\/v2\/media?parent=746"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codecharismatic.com\/wp-json\/wp\/v2\/categories?post=746"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codecharismatic.com\/wp-json\/wp\/v2\/tags?post=746"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}