Have you ever clicked on a form, and it didn’t clear on focus? That’s annoying, so what I usually do is add onfocus="this.value='';", but the problem there is when a user clicks away without entering anything, they don’t know what the field said previously (this is especially problematic if you’re not using or hiding the label tag. So the solution is to add an if statement to the onfocus and onblur handlers. This gets annoying if you have several text fields, so with the beauty of jQuery, I created this quick function to handle it automatically. As long as a value is given to the text field, it will do the work for you.

jQuery(document).ready(function() {
		jQuery('input[type=text]').each( function(i) {
			var t = jQuery(this);
			var thisval = t.val();
			t.blur( function() {
				if (t.val() == '') t.val(thisval);
			}); // end blur function
			t.focus( function() {
				if (t.val() == thisval) t.val('');
			});// end focus function
		}); //END each function
	}); // END document ready function

I’m using this script on my site, and you can see it in action on the search field.

If you’d like to copy and paste that into your head or just above your body tag, go right ahead. Alternatively, you can download a zip of the javascript file here:

jQuery Clear on Focus Script

Ok folks, this will be short. If you want to add several pages at once, I created a little script for you.

Here it is:

<?php
 include ('wp-blog-header.php');
 $newPages = array(
 'Page 1' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
 'Page 2' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
 'Page 3' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
 'Page 4' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
 );
 foreach($newPages as $pagename => $content) :

 $postarr = array(
 'post_title'         =>     $pagename,
 'post_content'         =>     $content,
 'post_status'        =>    'publish', // can be changed to 'draft', 'publish', 'pending', or 'future'
 'post_author'        =>    1, // post author 1 is admin, can be changed to the ID of the post author
 'post_type'            =>    'page', // can also use 'post' here.
// 'post_parent'            =>    '22', // (completely optional) you can assign a parent ID to create child pages.
 );
 wp_insert_post($postarr); ?>
 <p>Added <?php echo $pagename?>.</p>
 <?php endforeach; ?>

And here’s how it works:

1. the include wp_blog_header() is pulling in the file wp_blog_header.php, which gets all the important data from your WordPress blog, allowing you to access the database (very important).
2. the $newpages variable is storing an array that is created in the next 4 lines.
3. The foreach cycles through the array, assigning $pagename to the left side of the = and $content to the right, so whatever you put to the left side of the = will be your page title, whatever you put to the right side will be your content (simple enough).
4. The function wp_insert_post() is called, passing the parameter of the array that was created in step 2.

That’s it, your new pages have been added. Be very careful not to reload the page, or navigate to this page again, or it will duplicate the pages, which can be quite frustrating to straighten out. But that’s it. It really is that easy. You can also see my comments in blue.

I might make a plugin that you can drop into a site to enable users to frame out a site with the pages needed and whatnot. Maybe I’ll make that my next project, anyway, hopefully you found it useful, if you’d like to download the php file, you can get it below:

insertposts.php

Put this file in your root directory (so like: http://geekoutwith.me/insertposts.php). If you put it somewhere else, you’ll have to change the path of the include for wp-blog-header.php

I have since written a plugin for this purpose, you may read about it here: WordPress Plugin: Quick Posts

If this helps you, then good. I put a WordPress Textmate bundle I use for work on my If you use Textmate, just download, then double click to install. It’s not very big yet…but I’ll update it as I add functionality…or you can if you like.

WordPress Textmate Bundle (Version 0.5)

Misc Snippets (by tab trigger)

• theloop – the loop with tab stops at appropriate places
• bloginfo – the template tag bloginfo with tab stop to fill in parameter
• wig_sidebar – Dynamic sidebar with tab stop inside if statement – tab twice to ignore.
• themeinfo – Stylesheet header with tab stops (CSS)
• wt_get_depth – spits out the function wt_get_depth, which can be used to determine where you are in relation to the root…powerful little function.
• page_template – page template with appropriate tab stops.
• onpage – includes conditional to check if user is on a specific page. Best used in nav menu.
• is_page – if statement that checks to see if a specific page is being used.

Template Tag snippets

• get_sidebar – template tag get_sidebar(); with open and close PHP brackets.
• the_excerpt – the_excerpt();
• the_title – the_title();
• the_content – template tag, the content
• the_permalink – template tag, the_permalink();

Also, Here’s how you can get to the snippets, in case you want to make changes or see them before using them:

From the menu, Bundles > Bundle Editor > Edit Snippets

Snippets are very easy to modify from this window.

If you’re interested in the plugin, you may download it here. If you do download it, please grab my rss feed so that you’ll be updated with any revisions or fixes. I plan to improve upon some of the functionality very soon.

NEWS! (1-16-2010)

The plugin just got added to the wordpress plugin directory, see it here:

http://wordpress.org/extend/plugins/category-expander/

Please keep in mind that I am releasing the theme “warts and all”, so don’t expect it to be perfect. It does, however, have dynamic sidebars and all major HTML element styles are supported.

Geekitopia Theme

Slim Title, WordPress Plugin

Just download the zip, and upload slim_title.php to the wp-content/plugins/ folder of your WordPress installation, then activate it in the Plugins menu.

As I said before, all it does is replace Private: or Protected: with nothing by default. There are no administrative options to this plugin, you can modify it if you are comfortable with the code.

If this helps you, then good. I put a WordPress Textmate bundle I use for work on my If you use Textmate, just download, then double click to install. It’s not very big yet…but I’ll update it as I add functionality…or you can if you like.

WordPress Textmate Bundle (Version 0.5)

Misc Snippets (by tab trigger)

• theloop – the loop with tab stops at appropriate places
• bloginfo – the template tag bloginfo with tab stop to fill in parameter
• wig_sidebar – Dynamic sidebar with tab stop inside if statement – tab twice to ignore.
• themeinfo – Stylesheet header with tab stops (CSS)
• wt_get_depth – spits out the function wt_get_depth, which can be used to determine where you are in relation to the root…powerful little function.
• page_template – page template with appropriate tab stops.
• onpage – includes conditional to check if user is on a specific page. Best used in nav menu.
• is_page – if statement that checks to see if a specific page is being used.

Template Tag snippets

• get_sidebar – template tag get_sidebar(); with open and close PHP brackets.
• the_excerpt – the_excerpt();
• the_title – the_title();
• the_content – template tag, the content
• the_permalink – template tag, the_permalink();

Also, Here’s how you can get to the snippets, in case you want to make changes or see them before using them:

From the menu, Bundles > Bundle Editor > Edit Snippets

Snippets are very easy to modify from this window.

Works in: Safari, Firefox, IE8

Doesn’t work in IE6, IE7. Degrades gracefully in both.

Let’s start with the blockquote

Now, as mentioned above, this style won’t work in IE7, which is commonly used, so we need to use a base styling for the blockquotes. Seen below:

blockquote {
 background:#F5F5F5 none repeat scroll 0 0;
 border-left:8px solid #CCCCCC;
 border-right:1px dotted #CCCCCC;
 font-family:georgia,serif;
 margin-bottom:12px;
 margin-left:10px;
 margin-right:10px;
 padding:12px;
}

So, now we have a nice looking blockquote styling that looks like this:

Now let’s bring out the big guns (so to speak)

Now we’ll use the :before and :after psuedo classes to add the open and close quotes to the blockquotes.

blockquote p:before {
 content:url(images/quote-left.gif);
 margin-right:10px;
 text-align:left;
 opacity:0.3;
}

And, the :after psuedo class:

blockquote p:after {
 content:url(images/quote-right.gif);
 display:block;
 margin-top:-16px;
 text-align:right;
 opacity:0.3;
}

Now you have something that looks like this:

That’s it, all done. Hope that was helpful.

Also, If you want the quote .gifs I used, download them here.

ED: I used “opacity” here to fade the image to 30% opacity, but this isn’t recognized properly in IE, so if I wanted to do it right, I’d need to save the original file at 30% black, in order to make it look the same in all browsers. I’ll do that later though. I’m feeling lazy today.