Archive for September, 2012

JQuery Plugin: Simple Textbox Watermark

In a previous post, I’ve written about creating a simple JQuery watermark. The code I wrote in that post is simple, and breaks down how a watermark really works. I expanded on that simplicity with this plugin, but not too far. Most watermark plugins I’ve seen are overly complex, attempting to account for all usage scenarios, when a majority of people only need to handle a small subset of those scenarios. So, I built a light plugin (under 1.3KB) that handles those basic scenarios well and implements easily. Here’s how it works:

Here’s how to implement it:

  1. Add in the most recent version of JQuery and the plugin code.
  2. In a document ready function, bind the plugin to any inputs and textareas you want with a single line of JQuery.
  3. Add the watermark text you want into the title property of the appropriate inputs and textareas.
  4. Apply any CSS you want to style your watermark text (suggested), and that’s it!
  5. Dependent on your usage scenario, call the function to clear out the watermarks before submitting the form.

The javascript:

$(document).ready(function(){
     $('.watermark').watermark();
});

The plugin applies a class of ‘marked’ to inputs and textareas when the watermark is active:

input.watermark, textarea.watermark { color: #000; }
input.marked, textarea.marked { color: #999; }

You’ve got to include your title property and the watermark class for the plugin to bind to the form item:

<input type="text" title="WATERMARK_TEXT class="watermark" />
<input type="text" title="WATERMARK TEXT" class="watermark" val="PREPOPULATED_VALUE" />
<input type="password" title="WATERMARK_TEXT" class="watermark" />
<input type="email" title="WATERMARK_TEXT" class="watermark" />
<textarea title="WATERMARK_TEXT" class="watermark"></textarea>

Here’s the javascript function to call if you want to clear out the watermarks before a form submission (just make sure to use the same JQuery targeting you used to bind the plugin to your form elements so you don’t miss anything):

$('.watermark').watermark('clearWatermarks');

It is as simple as that. Did I sell you on it? If so, download the plugin and enjoy! Here are links to both the unminimified and minified versions.

Download Full (1.66KB)Download Minified (1.26KB)

This plugin has been tested in the following browsers:

Chrome Firefox Internet Explorer Safari Opera

If you have any questions or comments on the plugin, please share. I may release more versions if there are specific feature requests that can be implemented without using a heavy amount of code. I want to keep this light, so if you want really advanced features, then this isn’t the plugin for you. But who knows, maybe I’ll write a more advanced one later…

Renaming Your WordPress Theme

When setting up a self-hosted WordPress site, you’ll be using a theme. I always start building my site with a pre-made basic theme such as the default WordPress theme. But then I make adjustments to that theme to fit my exact website, and I typically do so not as a child theme as described in this article, but actually by editing the theme itself. The biggest issue that arises with this methodology is when the base theme you used gets updated, it will overwrite all of the wonderful changes you’d already made to your site. Luckily, there is an easy way around this! Here are the four easy steps to renaming an existing theme to prevent it from updating:

1. Make an exact copy of the theme you plan on changing. The easiest and best way of doing this is using an FTP program like Filezilla. After you’ve already setup WordPress on your site, and installed the theme you are interested in, then go find that folder in your server files. The themes are located wp-content -> themes. Download the theme folder to your desktop rename the folder to your desired theme name.

2. Change a few lines of code in the style.css file. Now that you’ve got a “new theme”, you’ve actually got to change a few files so that WordPress recognizes it as a new theme. The only meaningful file change is the style.css file (which must keep the name of style.css), which references the theme name that WordPress uses. Here is an example of the commented code that needs to exist at the top of your style.css file. If you want, you can keep everything the exact same, just change the theme name to your new theme name.

/*
Theme Name: YOUR_NEW_THEME_NAME_HERE
Theme URI: YOUR_WEBSITE_URL
Description: DESCRIPTION_OF_YOUR_THEME
Version: 1.0
Author: YOUR_NAME
Author URI: YOUR_WEBSITE_URL
Tags: FOR_WP_THEME_SEARCH_IF_PUBLISHED
*/

3. Change a few lines of code in all the remaining files. In almost all of the remaining files, you’ll see something similar to the code below. This is an optional step, but you might as well be thorough and just update all the files to have your new theme name.

<?php
/**
 * @package WordPress
 * @subpackage YOUR_NEW_THEME_NAME_HERE
 */
?>

4. Create a screenshot for the WordPress theme selection page. You might notice inside the folder you downloaded, there is a screenshot.png file. This is the image that shows up in the theme selection interface in your website’s WordPress administration. Make a new screenshot of what your theme actually will look like. The image should be 300 pixels wide by 225 pixels tall. If you are curious, this is the screenshot I did for my own adjusted theme (yes, I used the process described above myself).

5. Upload and install your new theme. Once you are done with steps one through four, you can upload your new theme into the same themes folder you downloaded it out of originally. Once that is done, if you go to the WordPress administration interface for selecting the active theme, you should see your new theme as an option, in addition to the currently selected original theme you had been using. Pick your new theme for the site, and you are all set to go. You’ve got a fully functional theme that won’t get overwritten, no matter how many changes you make!