title: How to make a jquery plugin work with wordpress?
body: <p>I've been trying to get this jquery-plugin to work on a wp-site on a single page: <a href="https://github.com/almightynay/jQuery-Sakura" rel="nofollow noreferrer">https://github.com/almightynay/jQuery-Sakura</a></p>
  
  <p>But I'm clearly doing one or two things wrong. I came across the following two questions that I've been working with to try and get it to function, but still failing.</p>
  
  <p><a href="https://stackoverflow.com/questions/24969155/how-i-can-add-my-jquery-script-into-single-wordpress-page">How I can add my JQuery script into single wordpress page?</a></p>
  
  <p><a href="https://stackoverflow.com/questions/11159860/how-do-i-add-a-simple-jquery-script-to-wordpress">How do I add a simple jQuery script to WordPress?</a></p>
  
  <p>So. Here's what I've done so far.</p>
  
  <ol>
  <li>I added this to the header.php</li>
  </ol>
  
  <p><code>&lt;link type="text/css" rel="stylesheet" media="screen"
      href="wp-content/themes/themename/css/jquery-sakura.min.css" /&gt;</code></p>
  
  <ol start="2">
  <li><p>I added this to the functions.php</p>
  
  <pre><code>function add_my_script() {
  return '&lt;script&gt;
               //your jQuery here
               &lt;script src="wp-content/themes/themename/js/jquery-sakura.min.js"&gt;&lt;/script&gt;
  
  // domReady
  $(function() {
      $("body").sakura();
  });
  
  // windowLoad
  $(window).load(function() {
      $("body").sakura();
  });
  
          &lt;/script&gt;';}  
  add_shortcode( 'sakuraattempt', 'add_my_script' );
  </code></pre></li>
  </ol>
  
  <p>This differs slightly from what one of the previous questions I found said because I ran into a syntax error for <code>$('body').sakura();</code> that didn't like the single quote ', I tried double which was accepted, but don't know if that's correct.</p>
  
  <ol start="3">
  <li><p>I added shortcode [sakuraattempt] to the page.</p></li>
  <li><p>I uploaded the js and css files to wp-content/themes/themename/css/ (or js) and edited the filepaths in the two above code snippets in 1+2 to point to the same. The files were:</p></li>
  </ol>
  
  <p><code>jquery-sakura.css
  jquery-sakura.js
  jquery-sakura.min.css
  jquery-sakura.min.js</code></p>
  
  <p>The only result I get on the page is this blob of text appearing: </p>
  
  <p><code>// domReady $(function() { $("body").sakura(); }); // windowLoad $(window).load(function() { $("body").sakura(); });</code></p>
  
  <p>I would like to understand where I went wrong with this so that I can get this correct in future. There's a lot of nice jquery out there that I'd like to be able to fully understand how to implement by myself.</p>
  
  <p>Thanks for your time! I apologise if anything here is outside of typical Stackoverflow etiquette, this is my first post.</p>