I recently found myself really wanting to use RequireJS with WordPress, to manage the various JavaScript dependencies a client site had. Unfortunately, this was easier said than done.<\/p>\n\n\n\n
WordPress is historically not very compatible with RequireJS, as it provides jQuery and a myriad of other JavaScript files out of the box, which are difficult to shoehorn into your RequireJS configuration. There are loads of WordPress plugins out there which rely on jQuery being a global variable in the page.<\/p>\n\n\n\n
Also, any attempt at loading RequireJS into the page will often result in errors because many JavaScript modules first check if We need I managed to hack together a solution, and it seems to work rather well.<\/p>\n\n\n\n First of all, edit header.php (I put this just above the We’re going to store any Then require your modules as normal. Well, as semi-normal: as mentioned previously, many JavaScript files will check if At this stage, all we’re doing is adding Now edit footer.php (put this right before the closing Only at the very end of the document do we go “now I’m ready to load RequireJS. WordPress has done its thing, so it should be safe for us to do ours now”.<\/p>\n\n\n\n So, this is pretty standard stuff: we’re downloading the RequireJS library from a CDN and initialising it with a config. jQuery is a strange special case handled in lines 11-13: we want our modules to be able to pull in jQuery as a module, but know jQuery is probably a global already, so here we’re creating a jQuery AMD module on the fly.<\/p>\n\n\n\n The magic happens on lines 15-17: now that we have RequireJS, we can go ahead and download all the things we’ve queued already (and call their callbacks if those were passed as arguments).<\/p>\n\n\n\n There you have it – RequireJS working nicely with WordPress and all its plugins!<\/p>\n","protected":false},"excerpt":{"rendered":"require<\/code> is defined before they execute. This means that the very act of including RequireJS in the page will change how some code is executed, and cause you lots of headaches!<\/p>\n\n\n\nrequire<\/code> to be defined so that we can make lots of lovely require<\/code> calls throughout our webpage, but we can’t actually define require<\/code> until all of WordPress’ native dependencies and plugin JS files have sorted themselves out.<\/p>\n\n\n\nEdit your header<\/h2>\n\n\n\n
wp_head()<\/code> call):<\/p>\n\n\n\n<script>\nwindow.queueForRequire = [];\n \nwindow.r = function (deps, callback) {\n window.queueForRequire.push({\n deps: deps,\n callback: callback\n });\n};\n<\/script>\n<\/pre><\/div>\n\n\nrequire()<\/code> calls in a queue: queueForRequire<\/code>.<\/p>\n\n\n\nrequire<\/code> is defined and misbehave if it is, so instead of mocking require<\/code>, I’ve made a custom function r<\/code> which we’ll use instead.<\/p>\n\n\n\n<script>\nr(['subscribe-cta'], function (subscribe) {\n console.log('This is my callback');\n});\n \n<?php if (is_home() && apply_filters('require_slider', $shouldLoadSlider)) : ?>\nr(['slider']);\n<?php endif; ?>\n \n<?php if (is_archive() || is_home()) : ?>\nr(['infinite-scroll']);\n<?php endif; ?>\n<\/script>\n<\/pre><\/div>\n\n\nrequire<\/code> calls to a queue – nothing is being downloaded just yet.<\/p>\n\n\n\nEdit your footer<\/h2>\n\n\n\n
<\/body><\/code> tag):<\/p>\n\n\n\n<script src="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/require.js\/2.2.0\/require.min.js"><\/script>\n<script>\n require.config({\n baseUrl: '\/wordpress\/wp-content\/themes\/tc-magazine-core\/js',\n paths: {\n 'readmore': 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Readmore.js\/2.1.0\/readmore.min'\n },\n waitSeconds: 15\n });\n \n if (typeof jQuery === 'function') {\n define('jquery', function () { return jQuery; });\n }\n \n for (var i = 0; i < window.queueForRequire.length; i++) {\n require(window.queueForRequire[i].deps, window.queueForRequire[i].callback);\n }\n<\/script>\n<\/pre><\/div>\n\n\nRequireJS with WordPress<\/h2>\n\n\n\n