Help w/ jQuery scripts & wp_enqueue_script WordPress
- SOLVED
Hey there,
I'm having some issues registering jQuery scripts. I'm a designer who is fairly new to coding, rather proficient in HTML and CSS, but Java is still new to me.
I am trying to properly register a few Js scripts in a client site:
[[LINK href="http://www.dev.bdbshop.com/"]]dev.bdbshop.com[[/LINK]]
The first is a simple jQuery call to action bar for the header:
[[LINK href="http://haatch.com/WOAHbar/"]]http://haatch.com/WOAHbar/[[/LINK]]
(documentation and code is there)
It seems the theme has a custom functions-header.php file that .functions.php call .js from as well as the standard functions.php calling scripts. However, I am going nuts as to where/how to setup and reference the code(s). The functions-header.php is located in the theme/includes file.
I'd also like to call a separate .css file for the plugin as opposed to putting it all in style.css.
I know how to call stylesheets via: <link href="http://www.mydomain.com/css/mainstyles.css" rel="stylesheet" type="text/css" />
but according to WP codex it should also be done using the enqueue script, so I'd like to register that as well. I am lost.
Here's the functions.php
[[LINK href="http://pastebin.com/B4AhPsye"]]http://pastebin.com/B4AhPsye[[/LINK]]
and header.php
[[LINK href="http://pastebin.com/ygB6CkXZ"]]http://pastebin.com/ygB6CkXZ[[/LINK]]
and functions-header.php
[[LINK href="http://pastebin.com/20R780R9"]]and functions-header.php[[/LINK]]
Help?
Answers (2)
Plugarized answers:
add the following to line 170 of your theme's functions.php or header functions for enqueueing the required js scripts first, upload the Woahbar js to the /js/ folder.
wp_deregister_script('jquery');
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js', false, '1.9.1');
wp_deregister_script('jquery-ui');
wp_register_script('jquery-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js', array('jquery'), '1.10.1');
wp_register_script( 'woahbar', get_template_directory_uri() . '/js/WOAHbar.js', array( 'jquery' ), false, true );
wp_enqueue_script('jquery');
wp_enqueue_script('jquery-ui');
wp_enqueue_script('woahbar');
As for the styles, I would suggest you add it to the main style as it reduces the http requests, meaning that the page loads faster, you can check at gtmetrix or pingdomtools to see your website load speed and http requests number.
<strong>more information about en-queueing scripts and registering them:</strong>
<blockquote>http://codex.wordpress.org/Function_Reference/wp_register_script
http://codex.wordpress.org/Function_Reference/wp_enqueue_script</blockquote>
<strong>If you need particular version of the google cdn js scripts go here and change the version accordingly</strong>
<blockquote>https://developers.google.com/speed/libraries/devguide#jquery</blockquote>
cunningfox comments:
LatinUnit,
I updated functions.php as above, added WHOAbar.js to /js but not working. Css has been added to bottom of style.css. From the documentation:
<blockquote>STEP 1 - CALL MAIN JS SCRIPTS:
You will need to add the following scripts BEFORE the </head> tag of your webpage for any of the following to work properly:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
*NOTE: You may already be calling one or both of these scripts in the page for other javascript purposes, so you may need to delete one or both lines for the WOAHbar to work properly. </blockquote>
As you posted, do I need to call a specific version of java for each plugin? Is that what the _register_script & _deregister_script do?
<strong>Do I need to 'register' (via the helpful Google library link) version 1.7.1 or 1.8.16 to get this to work? Is Jquery not backwards compatible w/ previous versions?</strong>
Believe me, I read both those codex articles about 5 times each, as well as countless articles online. I have no problem with Java in HTML, but adding new scripts into WP is a fairly new endeavor for me.
What is:
rray( 'jquery' ), false, true );
Thank you.
Plugarized comments:
<blockquote>array( 'jquery' )</blockquote>
the array means that the file requires jquery to run, 'false' is the parameter for an array and true means that it should load the js file in the footer.
I would recommend to read the listed codex links, they clear things out and explain these parameters in depth.
Plugarized comments:
sorry i didnt read the rest of your message, basically wordpress by default loads jquery, however the versions on google cdn are always uptodate, you can disable the code for that if you want to use local file.
most plugins work with default version of jquery so there is no need for a specific version for each plugin, however some may use new functions available in newer versions.
Plugarized comments:
If you want to grant me access, I will check what the issue is, please provide credentials via PM
Plugarized comments:
You can check the following jsfile to see it working (note, looks messy no images)
http://jsfiddle.net/a8Jmz/
Plugarized comments:
Get rid of the "display:none" style in the following <div class="woahbar" style="display: none;">