DEV Community: Kevinleary.net

Move JavaScript to the Page Bottom in WordPress

Kevinleary.net — Tue, 03 Nov 2026 17:15:09 +0000

Steve Sonders outlines essential rules for speeding up websites on the front-end in his book High Performance Web Sites. He strongly advocates for developers to load JavaScript at the bottom of a page. When a website is loaded in a browser using HTTP, scripts don’t allow parallel downloads. This means that it may take 4 seconds to load a single JS file. Instead it’s best to load your CSS and images first, to avoid a flickr of un-styled content.

Move All WordPress JavaScript to the Footer

It’s easy to do this in WordPress, just add the following to your theme’s functions.php file.

/**
 * Load Enqueued Scripts in the Footer
 *
 * Automatically move JavaScript code to page footer, speeding up page loading time.
 */
function footer_enqueue_scripts() {
   remove_action('wp_head', 'wp_print_scripts');
    remove_action('wp_head', 'wp_print_head_scripts', 9);
    remove_action('wp_head', 'wp_enqueue_scripts', 1);
    add_action('wp_footer', 'wp_print_scripts', 5);
    add_action('wp_footer', 'wp_enqueue_scripts', 5);
    add_action('wp_footer', 'wp_print_head_scripts', 5);
}
add_action('after_setup_theme', 'footer_enqueue_scripts');

I highly recommend Steve’s book. Its straight forward recipe approach is very easy to digest, making it a quick and informative read.

Search Field Focus & Blur Effects with jQuery

Kevinleary.net — Tue, 03 Nov 2026 17:14:27 +0000

There is a newer version of this post available called Form input field focus & blur effects

Here is something I come across a lot at work so I thought I would turn it into a simple tutorial for reference to anyone out there that needs it. Basically what we want to create is this:

A search field that will display a value such as “Enter your search terms here.”
When a user clicks into that field the value will disappear, allowing the user to enter there search terms.
If a user clicks out of that search field without entering anything, the default value will return to the field.

This is a simple little JavaScript task, and with the help of the jQuery library, it’s even simpler and completely unobtrusive. Because sometimes you just want a bear bones version to work with, I’ll keep the styles to a minimum on this one. Here’s how we go about doing it.

First we need to start with a basic form structure

<form id="search-form" action="">
  <label for="search-input">Click here to search</label>
  <input type="text" id="search-input" name="search-input" value="" />
  <input type="button" id="submit" value="Go" />
  <div class="clearboth"></div>
</form>

For semantic purposes, and for all those without JavaScript enabled, I’ve added the label attribute in there. What we’re going to do is pull the text from the label and then hide it. After that we’ll put that text into the input’s value attribute. This way if a user has JavaScript turned off they will simply see a label and a search input.

jQuery Magic

Next we need to add some of that jQuery magic to spice things up. For those of you who are here simple to grab some code and get to work, I’ll post the JavaScript up front and explain step by step afterwards. Here goes:

$(document).ready(function(){
  // Get the text from the label element
  var labelTxt = $('#search-form label').text();
  // Put the text from the label element into the search field's value
  $('#search-input').attr('value',labelTxt);
  // Focus & blur effects
  $('#search-input').focus(function(){
    if ((this.value == '') || (this.value == labelTxt)) {
      $(this).val('');
    }
  });
  $('#search-input').blur(function(){
    if (this.value == '') {
      $(this).val(labelTxt);
    }
  });
  // On submit change the value while server side code is run
  $("#submit").click(function(){
    $('#search-input').attr('value','Searching...');
  });
});

So we start inside a $(document).ready() with a nested function as an argument so that your code will load after the document does. This allows for the unobtrusive targeting of elements, if you don’t run your code after the document’s load event there won’t be anything for JavaScript to work with.

First we need to grab the text from inside the Label element and store it in a variable. I’ve called that variable labelTxt. Next we’ll set the search input’s value attribute equal to the contents of the labelTxt variable using the attr() method.

Now we need to setup two functions. One for onfocus, an event that is triggered when a user selects a form field, and another for onblur, an event that is triggered when a user leaves that selected field (or de-selects it).

We use jQuery’s focus() method to nest a function that will set the value to be blank. Next we’ll use the blur() method to put the contents of the labelTxt variable (that we defined earlier) back into the value attribute of the search input.

As an added bonus you can use the submit() method to change the value to “Searching…” when the user hit’s the search button. This gives the user some instant feedback, hopefully letting them know that they’ve submitted there information and it’s time to chill while the server does it’s thing.

Working Example

See a working example

Safe MailTo’s With jQuery

Kevinleary.net — Tue, 03 Nov 2026 17:13:52 +0000

There is a newer version of this post available called jQuery Mailto Links Plugin: Version 1.1

Here’s a small snippet I created on the job, I thought some people may find it useful. It was built using jQuery version 1.2.3. The purpose of this snippet is reject those nasty spam bots from stealing your (or your clients) email address from mailto: links.

XHTML

<a dummy-href="[email]info[at]kevinleary[dot]net" rel="email">Kevin Leary</a>

JavaScript / jQuery

$(document).ready(function(){
    $("a[rel='email']").each(function(){
        // Modify the mailto: value
        var mailtoVal = $(this).attr('href');
        mailtoVal = mailtoVal.replace("[email]","mailto:");
        mailtoVal = mailtoVal.replace("[at]","@");
        mailtoVal = mailtoVal.replace("[dot]",".");
        // Auto-generate title tags for users
        var mailtoTitle = mailtoVal.replace("mailto:","Email: ");
        $(this).attr('title',mailtoTitle);
        // onClick Event
        $(this).click(function(){
            window.location.href = mailtoHref;
            return false;
        });
    });
});

Usage

Add rel=”email” to each anchor that links to an email address. Next format all of your mailto: links like this:

href="[email]kevin[at]bluehousegroup[dot]com"

Once you have done this you need to link to your copy of jQuery before you link to your JavaScript file.

How it works

The script will basically find all anchor tags with a rel=”email” attribute. It will then perform the following actions to each:

“[email]” will be replaced with “mailto”
“[at]” will be replaced with “@”
“[dot]” will be replaced with “.”
The anchor’s title tag will be automatically generated to display the correct email address. This will allow users to see the email address. Many users often wish to send email directly from their web-based email, so a mailto: is of little use to them.

That’s it, it’s pretty straight forward.

Other thoughts

One topic I am concerned with is usability. This script will display [email], [at], etc. in the status bar text, making it hard for users to understand what the email address actually is.

Highlight Current WordPress Post

Kevinleary.net — Tue, 03 Nov 2026 17:13:16 +0000

I came across a dilemma recently. I wanted to highlight the WordPress post that is currently shown in my sidebar menu. I couldn’t find a sound solution for this, so here’s what I came up with. Using JavaScript and jQuery 1.2.3 I was able to highlight the current post in the WordPress navigation, or sidebar by dynamically adding the class “current” to the anchor tag.

JavaScript / jQuery

$(document).ready(function() {
    // Your base URL
    var baseUrl = "";
    // You need to target your sidebar here, change #secondaryContent to your sidebar identifier (id)
    $("#secondaryContent a").each(function(){
        var href = $(this).attr('href').replace(baseUrl,'');
        if (href == document.location.pathname) {
            $(this).addClass('current');
        }
    });
});

CSS

#secondaryContent .current
{
    padding-left:15px;
    background:url(images/current-link.gif) 0 4px no-repeat;
}

Usage

First include your copy of jQuery within the HEAD section of the document. Next include the above snippet of JavaScript in your document. Let the script do the rest.

Note

Be sure to modify the baseUrl variable, making it equal to your domain name. Without this the script will NOT function.

Better Web Design Workflow using OS X Keyboard Shortcuts

Kevinleary.net — Tue, 03 Nov 2026 17:12:41 +0000

Taking advantage of shortcut keys can save valuable time, speed up your workflow and increase productivity. I’ve put together a list of links to shortcuts and cheat sheets for the various applications and tools I frequently encounter. Please let me know if I’m missing out on anything extraordinary (because I probably am).

Mac OS X Shortcuts

Photoshop Shortcuts

Trevor Morris over at morris-photographics.com has put together a great collection PDF documents that give an overview of the shortcut commands available in Photoshop. His article provides seperate PDF’s for Mac and PC shortcuts as well as multiple versions of Photoshop including:

Macromedia/Adobe Flash

Adobe Flash CS3 Mac & PC (Replace Ctrl with Cmnd)
Adobe Flash 8 Mac & PC (Replace Ctrl with Cmnd)

jQuery

Having jQuery commands available is always a plus for those who use this library frequently. These are a little old, but even with rapidity (maybe thats a word) at which jQuery is being updated they are still very relevant and functional in the latest version. jQuery 1.2.3 is the latest build at the time of this post.

For anyone that frequently uses the jQuery JavaScript Library I would highly recommend the jQuery Reference Guide by Jonathan Chaffer and Karl Swedberg.

jQuery Cheat Sheet

Search Engine Querys

These search engine commands allow you to do all sorts of wonderful things like see who’s linking to your site, check your page ranking and view the total number of pages there are related to your site. These are great for those who frequently practice SEO.

Search Engine Query Cheat Sheets

Subversion

Subversion Quick Reference Card

Sources

Cezary Sobaniec, PhD – Subversion Quick Reference Card
Dan Rodney – Mac OS X Keyboard Shortcuts
Adobe Photoshop Keyboard Shortcuts | Trevor Morris Photographics
Digital Overload – Dreamweaver shortcuts
e3 internet – Search Engine Query Cheat Sheets
PeteFreitag.com – Cheat Sheet Roundup – Over 30 Cheatsheets for developers

jQuery Safer Mailto Links Plugin

Kevinleary.net — Tue, 03 Nov 2026 17:12:06 +0000

There is a newer version of this post available called jQuery Mailto Links Plugin: Version 1.1

Recently I realized that jQuery plugins are the way to go for building re-usable, modular code snippets. As a result I have revisited the jQuery Safe Mailto’s function, building a jQuery Plugin to replace it.

Working Example

info[at]kevinleary[dot]net

All instances of “[at]” will be replaces with “@”;

Likewise, [dot] will be replaced with “.”

Plugin Code

jQuery.fn.safeMailTo = function() {
  return this.each(function(){

    var mailtoHref = $(this).attr('href');
    mailtoHref = mailtoHref.replace(mailtoHref,"mailto:" + mailtoHref);
    mailtoHref = mailtoHref.replace("[at]","@");
    mailtoHref = mailtoHref.replace("[dot]",".");

    var mailtoText = $(this).text();
    mailtoText = mailtoText.replace("[at]","@");
    mailtoText = mailtoText.replace("[dot]",".");
    $(this).text(mailtoText);

    var mailtoTitle = mailtoHref.replace("mailto:","Email: ");
    $(this).attr('title',mailtoTitle);

    $(this).click(function(){
      window.location.href = mailtoHref;
      return false;
    });
  });
};

Usage

Include the latest version of jQuery into the HEAD section of the document.
Include jquery.mailto.js into the HEAD section of the document.
Add the .safeMailTo() method onto the selector you wish to modify

Example Implementation

$(document).ready(function(){
  $("a[rel='email']").safeMailTo();
});

Download

jQuery Safe Mailto Plugin JavaScript (.js)
jQuery Safe Mailto Plugin ZIP (archived)

Resources

Working With Dreamweaver Site Files (.STE)

Kevinleary.net — Tue, 03 Nov 2026 17:11:30 +0000

When connecting to a new project via FTP I will occasionally come across .STE (Dreamweaver Site File) files being used as a means to store FTP username and password information. The FTP password is always encrypted in these files. This causes problems because I do not use Dreamweaver to build websites. Even worse, what if I were someone else that did not own a copy of Dreamweaver?

If you come across a legacy site that uses an .STE file to provide FTP information it can be difficult to get that information into another program.

Process

Here is the process I went through to extract the password from a .STE file:

Open the .STE with a plain text editor. You will see an XML document.
You will see that the &lsremoteinfo> tag has many attributes. Find the pw=”” attribute and copy it’s contents to the clipboard.
Go to https://www.moredw.com/getPW.php and click on the “Get FTP Password online” towards the bottom of the page. This will launch a popup window.
Use the WebApp here to de-crypt the password.

That’s it, you’ve de-crypted the FTP password, your free now.

Resources

File Extension .STE Details
De-crypting a Dreamweaver .STE Password

AJAX, XML and Internet Explorer

Kevinleary.net — Tue, 03 Nov 2026 17:10:55 +0000

While working on the KMC Partners website I stumbled upon a cross browser issue using jQuery’s AJAX $.get() method to load and parse XML data.

It seems that if you are using AJAX to load an XML file with UTF-8 character encoding, it will fail in both Internet Explorer 6.0 and 7.0.

<?xml version="1.0" encoding="utf-8"?></code>

However, if you change that character encoding to iso-8859-1 it will load without issues in both versions of Internet Explorer.

<?xml version="1.0" encoding="iso-8859-1"?>

This was a big headache for me, and I hope this helps someone else out there avoid a similar issue.

External JavaScript on Demand With $.getScript()

Kevinleary.net — Tue, 03 Nov 2026 17:10:20 +0000

I find myself using JavaScript more and more often in my work. As work on a particular site grows, I find that too many external scripts begin to pile up in the section of my document, eventually effecting performance. Thanks to jQuery’s $.getScript method, I’ve found an elegant solution to this problem.

Think of jQuery.getScript() as the JavaScript equivalent to CSS’s @import. Take it one step further and use it to load JavaScript only when it is needed and you have a lean combination.

JavaScript / jQuery

if ($('a.email').length > 0){
    $.getScript('js/jquery.mailto.js',function(){
        $('a.email').mailto();
    });
}

How it works

This small snippet of code that will check for the existence of an object, in this case that object is any anchor link with a class of email. If this object is found on a page, a corresponding .js file (js/jquery.mailto.js) will be loaded and a callback function initiated ($(‘a.email’).mailto();). If the object is not found, the script will not be loaded. This assumes that the snippet is enclosed in a document ready event.

I find this approach to be the most elegant when handling multiple jQuery plugins. One could compare it to the @import CSS command that is frequently used to load in multiple style sheets from one master CSS file.

Disable Caching

When loading external scripts dynamically with jQuery’s getScript, a cache busting parameter is added to the request URL. So, instead of writing something like </strong>, it writes something like <strong><script src=’/js/foo.js?\_=ts2477874287′></strong>, causing the script to be loaded fresh each time.</p> <h3> <a name="resources" href="#resources" class="anchor"> </a> Resources </h3> <ul> <li> <a href="https://www.amazon.com/dp/1935182323/ref=asc_df_19351823231395195?smid=ATVPDKIKX0DER&tag=hyprod-20&linkCode=asn&creative=395093&creativeASIN=1935182323">jQuery in Action: Second Edition</a></li> <li> <a href="https://www.amazon.com/Learning-jQuery-1-3-Jonathan-Chaffer/dp/1847196705">Learning jQuery 1.3</a></li> <li> <a href="https://api.jquery.com/jQuery.getScript/">jQuery.getScript Documentation</a></li> </ul>

Testing Page Load Speed With Firebug

Kevinleary.net — Tue, 03 Nov 2026 17:09:44 +0000

The more I find myself using JavaScript, the more I begin to worry about the weight of my pages. With the use of jQuery, much that was tradiotionally server side can now be handled on the client side with JavaScript.

So how does one go about measuring the time it takes to load there website? Furthermore, how do we determine which files are taking the most time to load? The answer is the FireBug Net Panel.

To use the Net (short for Network Monitoring) tools you must go to the “Net” tab in Firebug and active them.

Then simply reload your page and watch as Firebug tells you the load time of each item sequentially, whether the item is a CSS, JavaScript or image file.

FireBug will provide you with monitoring on the following:

XMLHttpRequest/AJAX monitoring
Examine HTTP Headers
Whether a file has been cached or not cached
Break it down by file type (CSS, Images, JavaScript, etc.)
Watch the timeline unfold

Resources

Firebug

True Seperation of Presentation & Content with XML

Kevinleary.net — Tue, 03 Nov 2026 17:09:09 +0000

Web standards praises the idea of separating presentation from content. Unfortunately, doing so is harder said than done in the professional world.

When I begin working on a redesign I usually find myself spending countless hours re-formatting content, so what’s the point? If a client wants specific information laid out as an unordered list (or outline) one day and tabular data the next, you’ll find yourself rebuilding the page’s structure.

The best solution to this ongoing probably is to utilize XML to describe the content as best as possible. The one problem with this approach is that parsing that XML into usable code is typically difficult. With PHP5’s implementation of the SimpleXML object parsing XML is finally as simple as it should be.

This is the best way to handle web content in my opinion. The advantages as I see them are:

Store your content in one central location, even it is used in multiple places throughout a site
Write your content once using the most semantic markup of all, XML
Loop through tags to make styling repeated content a breeze (e.g. Press Releases page)
Use your content with different technologieslore
Create RSS feeds, supply it to other domains

Using the SimpleXML object

Let’s get our hands dirty and see how to parse an XML file with SimpleXML.

XML

<?xml version="1.0" encoding="utf-8" ?>
<press>
  <article>
    <date>August 26</date>
    <year>2008</year>
    <link>pdf/consumer-brochure.pdf</link>
    <name>New press release!</name>
    <description>Press release summary or explanation would be here, if this wasn't a demo.</description>
  </article>
</press>

PHP

$press = simpleXML_load_file("press.xml"); 
foreach ( $press as $articles ) { 
?>
<div class="article">
  <h2><a href="<?= $articles->link ?>"><?= $articles->title ?></a></h2>
  <p><?= $articles->description ?></p>
  <p class="date"><strong>Published</strong> <?= $articles->date ?>, <?= $articles->year ?></p>
</div>
<? 
}

XHTML (generated by SimpleXML)

<div class="article">
  <h2>New press release!</h2>
  <p>Press release summary or explanation would be here, if this wasn't a demo.</p>
  <p class="date"><strong>Published</strong> August 26, 2008</p>
</div>

Download source

Download the SimpleXML Source Code for the example above.

Resources

ONLamp.com, Using PHP5’s SimpleXML object

Form Input Default Values With The jQuery valueFx() Plugin

Kevinleary.net — Tue, 03 Nov 2026 17:08:33 +0000

Have you ever wanted to provide forms with default values or examples to improve user experience? Here’s how you can do it in an easy, re-usable way using a jQuery plugin called valueFx.

This is a more agile, re-usable version of the Focus & Blur effects I’ve previously posted about. This can be used on as many text ‘s as you like, simply by adding class=”valueFx” to the tag.

For a better explanation of what this is visit the Search Field Focus & Blur Effects post.

XHTML

<input id="email" class="valueFx" name="email" type="text" value="you@domain.com" />

JavaScript / jQuery Plugin

jQuery.fn.valueFx = function() {
  return this.each(function(){
    var $field = $(this);
    var $value = $(this).val();
    var $newVal;  
    $field.addClass('placeholder');
    $field.focus(function(){
      if($field.hasClass('valueFx')){
        if (($value == '') || ($value == $value)) {
          $field.removeClass('placeholder').addClass('focus').val('');
          $newVal = $(this).val();
        }
      }
    });
    $field.blur(function(){
      $newVal = $(this).val();
      if ($newVal == '') {
        $field.val($value).removeClass('focus').addClass('placeholder');
      } else {
        $field.removeClass('placeholder').removeClass('valueFx');
      }
    });
  });
};

Simple Usage

$('input.valueFx').valueFx();

Above is the easiest way to setup this plugin. Of course, I prefer to add a little more logic to make things more intuitive.

Advanced Usage

if ($('input.valueFx').length &gt; 0) {
  $.getScript('/path/to/jquery.valueFx.js',function(){
    $('input.valueFx').valueFx();
  });
}

What this does is first check to see if there are any input fields in the document that have a class of “valueFx“. If there are, we’ll load in the jquery.valueFx.js file, and run a function once it has been loaded. This function (or callback) runs the valueFx() method on all the input’s that have been found.

DEV Community: Kevinleary.net

Move JavaScript to the Page Bottom in WordPress

Move All WordPress JavaScript to the Footer

Search Field Focus & Blur Effects with jQuery

First we need to start with a basic form structure

jQuery Magic

Working Example

Safe MailTo’s With jQuery

XHTML

JavaScript / jQuery

Usage

How it works

Other thoughts

Highlight Current WordPress Post

JavaScript / jQuery

CSS

Usage

Note

Related links

Better Web Design Workflow using OS X Keyboard Shortcuts

Mac OS X Shortcuts

Photoshop Shortcuts

Macromedia/Adobe Flash

jQuery

Search Engine Querys

Subversion

Sources

jQuery Safer Mailto Links Plugin

Working Example

Plugin Code

Usage

Example Implementation

Download

Resources

Working With Dreamweaver Site Files (.STE)

Process

Resources

AJAX, XML and Internet Explorer

External JavaScript on Demand With $.getScript()

JavaScript / jQuery

How it works

Disable Caching

Testing Page Load Speed With Firebug

Resources

True Seperation of Presentation & Content with XML

Using the SimpleXML object

XML

PHP

XHTML (generated by SimpleXML)

Download source

Recommended Reading

Resources

Form Input Default Values With The jQuery valueFx() Plugin

XHTML

JavaScript / jQuery Plugin

Simple Usage

Advanced Usage