Web Design   

WordPress

Adding jQuery to Wordpress

You could add your custom jQuery to Wordpress by using the script tag in your head template, but this method can cause conflicts with JavaScript in other Wordpress plugins.

Instead, use the wp_enqueue_script, the Wordpress-friendly method. You will need direct access to your Wordpress files.

  1. Go into wp-content/plugins, and create a new javascript folder.
  2. In this folder, place your .js file.
  3. In header.php, before <?php wp_head(); ?>, place this:
<?php
wp_enqueue_script('custom',
'/' . PLUGINDIR . '/javascript/yourscript.js',
array('jquery'),
'1.0' );
?>

That’s it. You don’t need to do anything additional to include the jQuery library, since it’s specified as in the array as a file that your script is dependent upon. In place of ‘jquery’ you can use Scriptaculous, jQuery UI Tabs, or any number of libraries that are built into Wordpress.

Those libraries, as well as additional information about the wp_enqueue_script can be found at codex.wordpress.org/Function_Reference/wp_enqueue_script.

According to the codex, this script can’t be placed above <?php wp_head(); ?>, but I’ve found that on the contrary, it works ONLY when placed above it. This same page of the codex also says that ‘$’ can be used instead of ‘jQuery’ inside the document ready function, which is also currently not accurate.

In other words, where you would use ‘$’ in your jQuery function, you MUST use ‘jQuery’ for every instance, not just in the document ready function. Feel free to test this with your own script; I’m not sure why the Codex is wrong on these points.

Show/hide function for questions and answers

Here’s a neat little script that allows a question and answer type format, where the questions are all listed as links, and clicking on one toggles the visibility of the corresponding answer.

$("p").hide();
$("a").click(function () {
$(this).next("p:first").slideToggle("fast");
});

Here’s a version for lists that can be used to build an accordion navigation menu:

$("ul li ul").hide();
$("a").click(function () {
$(this).next("ul:first").slideToggle("fast");
});

Thanks to this post on Stackoverflow for the inspiration:

http://stackoverflow.com/questions/248320/using-this-with-jquery-selectors/248335

My selectors allow you to have multiple questions listed on one page. The answers given to the question on Stackoverflow only allowed for one, since, if clicked, it would toggle ALL of the paragraphs simultaneously.

Using Variables in JQuery Selectors

If you want to use variables in combination with CSS-style selectors like so:

$("#navigation a.myHomePage, " + logo).hover(function() {
$("li.home").addClass("homeRoll");
}, (function() {
$("li.home").removeClass("homeRoll");
});

Make sure your variable homePageImage is written as a string:

var homePageImage = "#logo"

not an object:

var homePageImage = $("#logo")

or it won’t work.

Using JQuery Tools Tabs

The nice thing about these tabs (the reason I chose to use these specifically) is that you can have multiple instances on a page. Just give each tab set’s list and div pane a unique class, make sure to rename the styles to correspond to these unique classes, and don’t forget to include one function per tab set to activate them! You get some interesting results if you don’t use unique classes, like one tab set controlling what’s visible in another tab set.

Also, it is important to note that any child or descendant div will be hidden by default. However, since we can’t simply exclude the usage of divs within the tab panes (I want to be able to put whatever I want in them!), just put style=”display: block” on each descendant div.

Newer Entries »

Without ambition one starts nothing. Without work one finishes nothing. The prize will not be sent to you.
--Ralph Waldo Emerson

I'm a web designer and writer based out of Nashville, TN, where I live with my husband, step-daughter, and chihuahua.

moonkatcreations at gmail dot com

Recent Posts