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

• 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

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!

I've actually been working on this redesign, on again, off again, for the last year or so. Although the design has been through a number of changes, the technologies I wanted to build the site with have remained the same: WordPress and jQuery.

So, I'd love to hear your thoughts on the new design - please leave a comment. If you didn't see the previous version, here's a screenshot of what it looked like:

Go ahead and say it, it's OK, the previous version was ugly. Hopefully the new design is easier on the eyes.

As a side note, I'll be starting a series or articles that will cover the redesign and development process in more detail. The articles will focus on topics such as creating a custom WordPress theme, client-side development using jQuery, and website performance. If you are interested in any of those topics, be sure to subscribe or bookmark this site.

While working on a new site design, I found an interesting bug in WordPress 2.7. I created two new pages to use as "Front page displays", one called Blog and one called Home. To create the pages, I clicked on Pages > Add New, entered a Title and clicked Publish.

I then went to my Reading Settings (Settings > Reading) and set the static Front and Posts page to the pages I just created. Going back to my site, I tested out the new static pages only to find they didn't work.

After a lot of time and troubleshooting, I noticed on the Pages screen that there were two copies of each page I had created - with one still labeled as a Draft. After even more time troubleshooting, I finally discovered the issue. Unlike the Posts page, the Publish and Save Draft buttons are not disabled during an autosave. So, when I entered the Page title and clicked Publish, the autosave and publish requests were happening at the same time.

I opened a WordPress ticket and submitted a patch. The patch was applied by azaozz, but it looks like it won't be available until WordPress 2.8. To fix this bug yourself, open /wp-includes/js/autosave.js and change all occurrences of #submitpost to .submitbox:

function autosave_enable_buttons() {
	jQuery(".submitbox :button:disabled, .submitbox :submit:disabled").attr('disabled', '');
}

function autosave_disable_buttons() {
	jQuery(".submitbox :button:enabled, .submitbox :submit:enabled").attr('disabled', 'disabled');
	setTimeout(autosave_enable_buttons, 5000); // Re-enable 5 sec later.  Just gives autosave a head start to avoid collisions.
}

Now the buttons will be disabled during an autosave, just like it does on the Posts page.

WordPress Pumpkin set on Flickr.

While researching WordPress Theme tags and functions, I came accross a site called ThemeTation. Launched on June 5th, 2008 by Kai Loon, it is a well designed site that includes a WordPress related Weblog as well as free WordPress Themes (SuperFresh and Blue Blog).

What really caught my attention was the very informative series Kai Loon put together on creating a WordPress Theme from scratch. If you've ever considered taking on that challenge or are just interested in how WordPress Themes work, I suggest you take a look:

Part 1 - Structuring, Designing in Photoshop

Part 2 - Slicing and Coding

Part 3a - WordPress Implementation

Part 3b - WordPress Implementation cont.

Thanks Kai Loon!

Instead of overriding four WordPress functions and adding two new ones in my functions.php file, I have slimmed it down to just one:

/**
 * If more than one page exists, return TRUE.
 */
function show_posts_nav() {
	global $wp_query;
	return ($wp_query->max_num_pages > 1);
}

This function will tell me if there is more than one page...and if there is, I will show the posts navigation (next_posts_link and previous_posts_link). I updated my WordPress (index.php, archive.php and search.php) files with:

<?php if (show_posts_nav()) : ?>
<div class='navigation'>
	<span class='older'><?php next_posts_link('&laquo; Older Entries'); ?></span>
	<span class='newer'><?php previous_posts_link('Newer Entries &raquo;'); ?></span>
</div>
<?php endif; ?>

As for the single post next/previous links, I decided to remove the check because I'll always have more than one entry.

Much cleaner and less code ;)