I found this great tutorial here: codrops
Demo
but I can't figure out how to get it to work in Wordpress! I'm a beginner/intermediate with Javascript, but I'm really not sure how to plug it into Wordpress. The Wordpress Codex mentions putting the script directly into the post since it won't be used site-wide. Has anyone successfully been able to get this to work? Can you give me instructions on how to do it?
Best How To :
Here is one way you could do it. By creating a short code in your functions.php file, you can include the js resources you need. Please note for this implementation, you must include the resources locally as defined on this line: element.src = '/wp-content/themes/custom_name_space/js/$src';
Or You can use some kind of plugin that lets you add custom js to a post.
/** you will need to include this invocation in the source file. */
$(function() {
Grid.init();
});
<?php add_shortcode( 'custom_name_space_addJs', function ( $atts ) {
/**
* create a javascript shortcode
* shortcode takes an id attribute and src attribute
* leaving src attribute blank will generate a 404 Error Code
*/
extract( shortcode_atts( array(
'id'=>'js-custom_name_space-script', 'src' => 'no-script.js', ), $atts ) ); return "
<script id='js-add-script-element'>
(function(w, doc) {
'use strict';
function downloadJSAtOnload() {
var element = doc.createElement('script');
element.id = '$id';
element.src = '/wp-content/themes/custom_name_space/js/$src';
doc.body.appendChild(element);
}
/* Check for browser support of event handling capability */
if (w.addEventListener) {
w.addEventListener('load', downloadJSAtOnload, false);
} else if (w.attachEvent) {
w.attachEvent('onload', downloadJSAtOnload);
} else {
w.onload = downloadJSAtOnload;
}
}(window, document));
</script>"; }); ?>
<!-- Then inside a wordpress post, write the needed HTML from the tutorial and use the short code -->
[custom_name_space_addJs id="thumb-grid" src="grid.js"]