Cause a field to be auto-focused when the page is done loading

So, wouldn’t it be user friendly, if when you went to a form page in a document, if the cursor was automagically positioned at the first field in the form?

Why, yes it would. Try:

	
Event.observe(window, 'load', function(){
     try {
          $('eventName').focus();
     } 

     catch (e) {}
});

after your </form> tag. This requires the prototype javascript library

WordPress inline field validation for plugins

On a recent plugin, I’ve been looking for a way to have powerful form field validation, while being really user-friendly. Using AJAX to do run a PHP server-side check from a form (to ensure that somebody can’t have duplicates) is the best way I’ve found. This is basically the same as what you’ll find on the WordPress.org Codex, but shorter, and more specific for this application.

Code:

1. Add an action on the init() action to call the sack JS script (deals with AJAX in WP)

wp_enqueue_script ( ‘sack’ );

2. Create an instance of the sack object, and create variables to pass into the PHP side.

function doesCalendarExist(wpurl, confirmationFieldName, calendarNameFieldID, submitButtonID) {

var ajaxObject = new sack(wpurl + ‘/wp-admin/admin-ajax.php’);

ajaxObject.execute = 1;

ajaxObject.method = ‘POST’;

ajaxObject.setVar( “action”, “doesCalendarExist” );

ajaxObject.setVar( “confirmationField”, confirmationFieldName);

ajaxObject.setVar( “calendarName”, document.getElementById(calendarNameFieldID).value);

ajaxObject.setVar( “submitButton”, submitButtonID);

ajaxObject.onError = function(){ alert(‘Ajax error’)};

ajaxObject.runAJAX();

return true;

}

3. Create an input field that can call javascript functions to populate the data, and a span that will hold the error message

<input name=“calendarName” type=“text” id=“calendarName” onblur=”doesCalendarExist(<?php echo bloginfo(‘url‘); ?>’, ‘span1’, ‘calendarName’, ‘submitCalendarAdd’);/>

<span id=“span1″ class=”formError”></span>

4. Create a PHP function that will read the data passed from the ajaxObject. Die() statements will pass JavaScript back to the page. The dieString variable is super useful to be able to add lots of different DOM changes.

function wec_ajax_doesCalendarExist(){

$confirmationField = $_POST[‘confirmationField’];

$calendarName = $_POST[‘calendarName’];

$submitButton = $_POST[‘submitButton’];

$calendars = calendarDA::getAllcalendars();

$exists = false;

foreach($calendars as $calendar){

if(strcasecmp($calendar[‘calendarName’], $calendarName) == 0){

$exists = true;

}

}

if($exists){

$dieString = “document.getElementById(‘”. $confirmationField .“‘).innerHTML=’This calendar already exists!’;”;

$dieString .= “document.getElementById(‘”. $submitButton .“‘).disabled = true;”;

die($dieString);

}

else{

$dieString = “document.getElementById(‘”. $confirmationField .“‘).innerHTML=”;”;

$dieString .= “document.getElementById(‘”. $submitButton .“‘).disabled = false;”;

die($dieString);

}

}

5. Add a WordPress Action to the init() that maps the sack action to the PHP function. you have to add “wp_ajax_” to the beginning of your action name from sack. the second argument is the name of your function that this action will call

add_action(‘wp_ajax_doesCalendarExist’, ‘wec_ajax_doesCalendarExist’ );



Javascript example to do an auto-generated slug on a WordPress Plugin


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

function duplicateField(field1, field2){
var theLength = document.getElementById(field1).value.length - 1;
var theString = document.getElementById(field1).value;
for(var i=0; i str.length-1) return str;
return str.substr(0,index) + chr + str.substr(index+1);
}
function changeColorBack(fieldName){
document.getElementById(fieldName).style.color = "#000000";
}

</head>
<body>
<p>
<input id="field1" onkeyup="duplicateField('field1', 'field2');" type="text" />
</p>
<p><br />
<input id="field2" type="text" onfocus="changeColorBack('field2');" /><br />
</p>
<p>
<span id="span1"></span>
<input id="submitButton" type="submit" value="Submit" />
</p>
</body>
</html>

Using WP_Query in WordPress 2.7

So I was trying for the last week or so to use three loops on a single page, to display categorized pages, and couldn’t figure out why it didn’t work. (I used the plugin page category plus to put pages in categories).

Anyways, if you want pages to be shown in a categorical listing, use post_type=page in the query string. Otherwise it’ll only show posts by default, which didn’t happen in previous versions! Mine looked like this: <?php $sportsQuery = new WP_Query(‘category_name=Sports Pages&post_type=page’); ?>

//Loop goes here…

Hope this helps somebody. I know I’ll be coming back to it when I forget!

For more info see: http://codex.wordpress.org/Template_Tags/query_posts

How to do multiple virtual hosts on OS X

  1. Download and install VirtualHostX (don’t forget to back up your existing config!!)
  2. Download and install Gas Mask (manages multiple hosts files, dumb name though)
  3. If you want to do this with WordPress and you have a database locally and another one on a dev server somewhere, you can do the following code:

if(eregi(“^mywebsitename.com$”, $_SERVER[HTTP_HOST]))

{

define(‘DB_NAME’, ‘dbremotename’);

/** MySQL database username */

define(‘DB_USER’, ‘dbremoteuser’);

/** MySQL database password */

define(‘DB_PASSWORD’, ‘dbremotepassword’);

/** MySQL hostname */

define(‘DB_HOST’, ‘dbremotehost’);

define(‘WP_SITEURL’, http://mywebsitename.com&#8217;);

define(‘WP_HOME’, http://mywebsitename.com&#8217;);

}

else{

define(‘DB_NAME’, ‘dbremotename’);

/** MySQL database username */

define(‘DB_USER’, ‘dblocaluser’);

/** MySQL database password */

define(‘DB_PASSWORD’, ‘dblocalpassword’);

/** MySQL hostname */

define(‘DB_HOST’, ‘dblocalhost’);

define(‘WP_SITEURL’, http://mywebsitename.com&#8217;);

define(‘WP_HOME’, http://mywebsitename.com&#8217;);

}