My Review

I don't usually buy technical books; I'm more of a hands-on learner and the books that I've purchased in the past just collect dust. It's one of the reasons why I'm so impressed with jQuery Enlightenment. Besides being an eBook (and therefore can't collect dust), Cody has structured the book in a way that makes it perfect to have as a learning tool as well as a reference.

You can read the book top-down or skim through the topics, find something you're interested in, and get a detailed and easy to understand write-up on the subject. Cody takes the learning processes one step further by providing code examples, linked to JS BIN, that can be viewed and run in your browser. For someone like me, the concrete examples and ability to play with the concepts, helps reinforce the topics covered.

Whether you are a new jQuery users, or a seasoned jQuery developer, jQuery Enlightenment won't disappoint!

jQuery 1.4

The current version of jQuery Enlightenment was written for jQuery 1.3.2. I spoke to Cody about the recent release of jQuery 1.4 and his plans for an update. He is working on a new version of the book that he estimates will have twice the content (or more) and is tentatively priced at $30. Lastly, he plans to offer a limited-time discount on the update for existing jQuery Enlightenment owners. [Note from Cody: All of this information is subject to change]

Giveaway

As mentioned previously, I have 3 coupons available for free copies of jQuery Enlightenment. If you would like a chance to win, leave a comment below and on Wednesday (1/20) at 2pm PST, I will randomly select 3 people.

Winners!

The random number generator has spoken and the following people have won a coupon for a free copy of jQuery Enlightenment:

• Jim
• Sam De La Garza
• Bjorn van der Neut

I'll be sending the coupons codes out shortly. Congratulations, I know you'll enjoy the book.

SimpleModal Login handles logging into WordPress but does not handle user registration or the forgot password functions.

SimpleModal Login also supports themes, something I'm planning on adding to the SimpleModal Contact Form plugin as well.

If you have any feedback or issues, please let me know!

Download Project Page

Thanks to all who reported the issue, it has been fixed and 1.3.3 has been released.

If you're curious about the specifics, in IE7, $(element).width() (and height()) return a value that includes the padding and/or margin of the element. All other browsers return the actual height/width. This was throwing off the logic for determining how to size the container.

Changes in 1.3.3:

• Fixed IE7 issues with container dimension determination

If you have any questions, I strongly suggest using stackoverflow. If you find any bugs, please report them on the issues page.

Thanks for using SimpleModal!

Links: Project Page | jQuery Plugins Page

In case you are wondering, 1.3.1 was used in the demos but never officially released. The demos have been updated as well.

A number a container dimension fixes were added as well as a new option, autoPosition, which can be used to turn off auto positioning of the container upon creation and window re-size. I also shortened many internal variables to help reduce file-size. Hopefully it doesn't hurt the readability.

Complete list of features and changes since 1.3:

• Added autoPosition option which gives the ability to enable/disable the container positioning
• Changed data height() to outerHeight(true) and data width() to outerWidth(true). Thanks to Andrew Marcus
• Fixed bug that prevented % container dimension values from being used
• Aliased "this" to "s" wherever possible to reduce file size
• Reduced length of other internal variables to reduce file size
• Fixed container width determination, which fixes width/centering issues in IE6
• Fixed position type checking. Thanks to cavidae for reporting
• Fixed data width and height determination by appending the data element to body, then appending it to the wrap element after the dimensions are determined

If you have any questions, I strongly suggest using stackoverflow. If you find any bugs, please report them on the issues page.

Thanks for using SimpleModal!

Links: Project Page | jQuery Plugins Page

• 1024x768
• 1280x800
• 1280x1024
• 1440x900
• 1680x1050
• 1920x1200

• 1024x768
• 1280x800
• 1280x1024
• 1440x900
• 1680x1050
• 1920x1200

• 320x480 (iPhone/iPod)

• 320x480 (iPhone/iPod)

The wallpapers are free for you to download and use. If you'd like to show your appreciation, feel free to spread the word or dontate $1.

1. Use wp_enqueue_script()

The traditional way to include jQuery in an HTML page is with the script tag. When working with WordPress, you should *never* do this. To avoid conflicts and other potential problems, you'll want to load jQuery using the following code:

function my_init() {
	if (!is_admin()) {
		wp_enqueue_script('jquery');
	}
}
add_action('init', 'my_init');

You can replace my_init with something more meaningful, but choose a unique name to avoid conflicts. For plugin development, add the code in your plugin file, otherwise, add this code to your theme's functions.php file. The is_admin() check is to prevent script queuing on your admin pages.

WordPress References:

• wp_enqueue_script()
• add_action()
• is_admin()

2. Load jQuery from the Google AJAX Library

Since WordPress includes jQuery, calling wp_enqueue_script('jquery'); will automatically load the jQuery file located in wp-includes/js/jquery/jquery.js.

If you want to load jQuery from the Google AJAX Library, you'll need to modify the code as follows:

function my_init() {
	if (!is_admin()) {
		// comment out the next two lines to load the local copy of jQuery
		wp_deregister_script('jquery');
		wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.3.2');
		wp_enqueue_script('jquery');
	}
}
add_action('init', 'my_init');

There are a number of reasons why you would want to use the Google AJAX Library to load jQuery, but remember, Google has been down before, so be ready to comment out the first two lines if necessary.

Note: As mentioned by Milan in the comments, there are existing plugins, such as Use Google Libraries, that will do this for you.

3. Load jQuery in the footer

Using the code in the previous two tips, jQuery will, by default, be inserted into the head of your HTML page. If you would prefer to have jQuery inserted at the bottom of your page, you'll need to use the $in_footer parameter for the wp_enqueue_script() function. The modified code:

function my_init() {
	if (!is_admin()) {
		wp_deregister_script('jquery');

		// load the local copy of jQuery in the footer
		wp_register_script('jquery', '/wp-includes/js/jquery/jquery.js', false, '1.3.2', true);

		// or load the Google API copy in the footer
		//wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.3.2', true);

		wp_enqueue_script('jquery');
	}
}
add_action('init', 'my_init');

As with the choice to use the Google AJAX Library, there are reasons why you'd want to load jQuery at the bottom of your page. Note: if a script is loaded using wp_enqeue_script() that lists jQuery as a dependency and has $in_footer set to false, WordPress will place jQuery in the head instead of the footer, regardless of the $in_footer value for jQuery.

4. Add jQuery as a dependency

You've got jQuery loading and now you want to include a script that uses it. This is where the wp_enqueue_script() function really comes in handy. By passing an array of dependencies for the $deps parameter, WordPress will automatically manage the order and placement of your script tags.

For example, if you have a JavaScript file in your theme that leveraged jQuery, the following code would ensure that your file is loaded correctly:

function my_init() {
	if (!is_admin()) {
		wp_deregister_script('jquery');
		wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.3.2', true);
		wp_enqueue_script('jquery');

		// load a JS file from my theme: js/theme.js
		wp_enqueue_script('my_script', get_bloginfo('template_url') . '/js/theme.js', array('jquery'), '1.0', true);
	}
}
add_action('init', 'my_init');

The previous code example would load jQuery from the Google AJAX Library, place it in the footer of your page and then include your theme.js file. The $deps array allows for multiple dependencies and helps you manage the scripts that are loaded on your site.

5. Proper jQuery coding conventions

All of the previous steps are nullified if proper jQuery coding conventions aren't followed. The most common issue I see with jQuery and WordPress is the misuse of the $ variable.

It is important to know that the version of jQuery that comes with WordPress automatically calls the jQuery.noConflict(); function, which gives control of the $ variable back to whichever library first implemented it. If you are loading a different copy of jQuery, you'll need to manually call jQuery.noConflict();, if necessary, from one of your JavaScript files.

As a general rule, you should not use the $ variable for jQuery unless you have used one of the shortcuts. The following is an example of how to shortcut jQuery to safely use the $ variable:

jQuery(function ($) {
	/* You can safely use $ in this code block to reference jQuery */
});

So, I'd like to introduce WP-Paginate, a simple and flexible pagination plugin which provides users with better navigation for your WordPress site.

If you have any feedback or issues, please let me know!

Download Project Page

September's issue contains articles on:

• Wii Gaming with JavaScript
• Beginners Corner: Inline Documentation
• Administrative Systems with YUI
• Sound Manager
• JavaScript Patterns - More Functions
• JavaScript's Equality Operator
• Community News

After reading through the issue, I am impressed with the quality of the articles and would strongly suggest JSMag to any developer that is serious about JavaScript.

Michael Kimsal, the man behind JSMag and GroovyMag, generously provided me with a coupon code for 10 free copies of the September issue to share with others.

Leave a comment requesting a free copy and on Friday (9/4) at 2pm PST, I will randomly select 10 winners.

Congratulations to the 10 winners below!

Enjoy!

The way WordPress handles post pages is to provide links to the previous posts and next posts, using previous_posts_link() and next_posts_link() respectively. When redesigning my site, I wanted to paginate the post pages to provide users with a more usable, intuitive interface.

While there are a number of WordPress plugins that enable pagination, I chose to write my own. I wanted a something that was flexible enough to be used in a number of different situations, but most of all I wanted the experience and challenge of writing my own pagination function.

Overview

The code, while fairly compact, is a bit too much to display, so I've provided a download that contains the following:

• paginate.txt - The pagination functions to place in your theme's functions.php file
• paginate.css - The CSS to put in your theme's style.css file
• readme.txt - The details about the pagination code

Download

Demo

To see the pagination in action, check out the links at the bottom of the Photography or Blog pages on this site.

Usage

After you have downloaded the files and placed the code in your theme, you'll need to replace the WordPress next/previous links with this new pagination function.

For example, in the default theme's index.php file, you'd replace:

<div class="navigation">
    <div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
    <div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
</div>

With:

<php if (function_exists("emm_paginate")) {
    emm_paginate();
} ?>

The emm_paginate() function takes one optional argument, in query string format, which allows you to customize the output. See below for details on the available options.

Options

• page [Number:null]
  The current page. This function will automatically determine the value.
• pages [Number:null]
  The total number of pages. This function will automatically determine the value.
• range [Number:3]
  The number of page links to show before and after the current page.
• gap [Number:3]
  The minimum number of pages before a gap is replaced with ellipses (...).
• anchor [Number:1]
  The number of links to always show at begining and end of pagination.
• before [String:'<div class="emm-paginate">']
  The html or text to add before the pagination links.
• after [String:'</div>']
  The html or text to add after the pagination links.
• title [String:'__("Pages:")']
  The text to display before the pagination links.
• next_page [String:'__("&raquo;")']
  The text to use for the next page link.
• previous_page [String:'__("&laquo")']
  The text to use for the previous page link.
• echo [Number:1]
  To return the code instead of echo'ing, set this to 0 (zero).

If you have any questions or find any issues, please let me know. Also, if you use the code, leave a comment with a link to your site so we can check it out!

• Upgraded SimpleModal to 1.3
• Fixed the bug that was supposed to be fixed in SMCF 1.2.3 ;)
• Moved the JavaScript loading to the WordPress init() function
• Optimized smcf.js variables to reduce file-size
• Moved close (X) link HTML from smcf.php to smcf.js (the SimpleModal closeHTML option)

Other than those updates, nothing major was changed. I've been working on the plans for a new version of SMCF with lots of new features, so stay tuned.

For more information please visit the SMCF Plugin Page.