1. The animations that are featured both in the navigation and the social media icons

I’m using the jQuery animate() function, which is really cool. I built a slider with it a little while back, which I’ll more than likely release and talk about here once I get the code to be a little more universal. For now, I’ll share the code for the animations at the top of the GeekOut theme.

Code:

function slideOut(obj) {
	$(obj).hover(function(){
	  $(this).animate( { "width":"120"}, 200 )
	});
	$(obj).mouseout(function(){
	  $(this).animate( { "width":"109px"}, 200 )
	});
}
function jumpUp(obj) {
	$(obj).hover(function(){
	  $(this).animate( { "bottom":"0px", "opacity": "1" }, 200 )
	});
	$(obj).mouseout(function(){
	  $(this).animate( { "bottom":"-10px", "opacity": ".4" }, 200 )
	});
}

2. Cufon

Which, as far as I can tell at this point, is the best thing out there as far as self-hosted text replacement plugins go.

More about Cufon.

3. The shadow on the sidebar elements

This code is literally two lines. I needed a shadow element that would only be applied to the sidebar elements and automatically span the element height. There was no way to do this with CSS, so JavaScript solved this problem, and jQuery made it easy.

Code:

function shadowLeft() {
	$('.widget .shadow').each(function() {
		thisHeight = $(this).parent().height() + 20;
		$(this).height(thisHeight);
	});
}

4. The category expander widget

Category Expander is a plugin we built at Out:think Group. Several of our clients had blogs with lots of categories, but wanted to highlight only a few, this plugin does just that. It uses jQuery to fade in the rest of the categories.

Do you love jQuery so much you want to take it behind the middle school and get it pregnant? Do you hate jQuery and think it’s a cheap, overused cop out? Tell me about it, but be nice.

Shortcode to show thumbnails.

Here’s how it works.

1. Upload a bunch of images to a specific post, title the images whatever you like.
2. Click “Save All Changes”. And Close. With this shortcode, there’s no need to “Insert Into Posts”. That will just waste time.
3. Add the shortcode [showposts] to the content. It will drop in the thumbnails where you add the shortcode. The thumbnails will show in floated list format, side by side, with a 10px margin on the right and bottom (see the screenshot at the bottom).

// [showthumbs]
function showthumbs_func($atts, $content = null) { ?>
 <style type="text/css" media="screen">
 ul.photo-thumbs {
 margin: 0;
 padding: 0;
 }
 li.thumb {
 list-style: none;
 margin: 0;
 padding: 0;
 float: left;
 line-height: 0;
 margin-right: 10px;
 margin-bottom: 10px;
 }
 li.thumb.clr {
 clear: both;
 float: none;
 margin: 0;
 }
 </style>
 <?php
 extract(shortcode_atts(array(
 "showthumbs" => ''
 ), $atts));
 global $post;
 $pics = get_children( 'numberposts=-1&post_type=attachment&post_mime_type=image&post_parent='.$post->ID );
 $return='<ul class="photo-thumbs">';
 foreach($pics as $pic) :
 $image = wp_get_attachment_image_src($pic->ID, 'large');
 $return.='<li class="thumb"><a rel="slideshow" href="'. $image[0].'">'.wp_get_attachment_image($pic->ID, array(75,75)).'</a></li>';
 endforeach;
 $return.='<li class="thumb clr"></li></ul>';
 return $return;
}
add_shortcode("showthumbs", "showthumbs_func");

All you have to do to make this work is drop it in your WordPress functions.php file, located at root/wp-content/themes/your-theme/functions.php – if one doesn’t exist. Create one and wrap the code above in PHP tags.

I’m using colorbox to create a slideshow between them, all you have to do to accomplish this is install colorbox, and add this line to your head:

<script type="text/javascript">
 jQuery(document).ready(function() {
  jQuery("a[rel='slideshow']").colorbox({preload: true, slideshowSpeed: '2500', slideshow:true});
 });
</script>

Screenshot:

If you want to see this as a plug-in, leave a comment and let me know. I’ll do it. For real.

The next thing we do is something productive (after cleaning up that is). We reorganize storage space or clean up an area that has been bugging us. Then, when my daughter wakes up from her nap, we spend quality family time together. Maybe we go to the park or play in the yard until the sun goes down.

Then it’s dinner together as a family, and bed time.

This past Saturday I was gonna skip over doing what  I had been putting off which was building a gate for my porch. Part of the reason was that I wasn’t exactly sure how to do it, and the other part was that it seemed like a big pain to get all my tools out and spend all day working on a building project. Then I got started and remembered how much fun it is to build stuff. I was surprised to see that it only took me two hours, and here’s the result:

I'm very happy with the finished product, and it's nice not to worry about my little girl falling down the stairs or off the side (notice I don't have a railing on my stairs).

So then today (Tuesday) I was thinking about how much of a pain it is to cook with my portable grill and how it would be nice to have a platform that comes off the railing of the deck that I can cook on. So the minute I got home I started building one. The plans were in flux while I was trying to determine the fastest way to build it, in 10 minutes I put together a plan to use the scrap lumber I had, some shelf brackets, some eyehooks I had from suspended ceiling supplies and a very strange design. I will admit, it’s ghetto, but here’s what I made:

Front side of shelf, 36" width accomodates my portable grill and plate, generic shelf brackets to stabilize

Back of Shelf - Eye hooks screwed into the railing to make the shelf sturdy

So yes, it’s ghetto. But I’m all about getting real. This is version 1.0. This was made entirely with scrap lumber. I will change it in the future, but I had to do this quick because I wanted to cook on it.

Time it took to build: 30 minutes.

Building stuff is so fun.

The cube transition happens by applying the class “cube” to a link. Yes, it really is that easy.

I’ll post more when I start digging in, for now I’m going to play my xbox and go to bed.

Further Reading

jQTouch: Superhero like jQuery Plugin

Jonathan Stark’s Textmate Bundle Demo

Ajaxian post on jQTouch

/*
Colors Used:====================
dark brown:#85605d;
darkest brown:#70564F;
slate blue:#acb6bd
light blu:#e1f5ff
deep grey-blue :#637486
*/

This was helpful for using a find/replace method, but if I wanted to add dynamic controls to the theme I’d have to create a new stylesheet to override the original one in case I wanted to go with a different color scheme, which would be kind of time consuming, and not easily sustainable.

So I pulled everything out except the theme info from the style.css and included a php file called style.php, wrapped the stylesheet in a style tag, and added variables that are echoed throughout the file. Like so:

$lightColor1 = '#e1f5ff';
$medColor1 = '#637486';
$blogEntryText = '#333333';
$darkColor1 = '#acb6bd';
$color2 = '#70564F';

This allows me to easily tweak my colors, like an automatic find/replace, but I still am not handling my background images, which are also based around the same color scheme, so I added these lines:

$logoImage = ''. get_bloginfo('template_url') .'/images/logo-geekout.gif';
$banner1FoldLeft = ''. get_bloginfo('template_url') .'/images/bg-fold-blue-left.png';
$banner1FoldRight = ''. get_bloginfo('template_url') .'/images/bg-fold-right.png';
$banner2FoldLeft = ''. get_bloginfo('template_url') .'/images/bg-fold-brown-left.png';
$commentsBanner = ''. get_bloginfo('template_url') .'/images/bg-comments-banner.png';
$commentbgEven = 'url('. get_bloginfo('template_url') .'/images/bg-comments-odd-brown.png)';
$commentbgOdd = 'url('. get_bloginfo('template_url') .'/images/bg-comments-even-blue.png)';

Now I can get at my colors and a lot of my images quickly. This is kind of a precursor to something else I’m working on, but I thought I’d share.

Note: I realize I could use a CSS framework like Compass to create color variables, but that’s a different purpose than what I need. I want something I can get at later…through the WordPress backend.

So, here’s how it works.

Step 1: The Custom Field (from the Add New Post page)

The first thing you have to do in order to set this up is to add a custom field. To do so, go to the bottom of the page, and in the “Custom Field” section, click the “Enter New“. In the “Name” field, enter your name (no, not your actual name, the name for the field). This can be anything you like. This name will serve as the “key” to the custom field (covered later). For my example, I’m going to name the custom field “mp3″. For the value, I will use the path to my mp3, for example: http://mysite.com/mysongsfolder/mp3-i-want-to-play.mp3.

Step 2: The Code

With your favorite text editor (mine is Textmate), open the single.php file, and insert the custom field code you’ll need. You can read about custom fields in the WordPress codex, but here’s a quick example of how you can use the custom field in your theme:

<?php echo get_post_meta($post->ID, $key, true); ?>

Now to explain some stuff.

• echo is tells the value to print (to spit out on the page).
• $post->ID is using the ID of the post that your in.
• $key is the name of the custom field (in my example, it will be mp3)
• true tells WordPress that there actually is something in the custom field, in order for anything to appear, it needs to be “true”.

This code will spit out exactly what is in your “value” field. If that’s what we wanted to accomplish, we’d be done. But if we left it like this, all we’d get is:

http://mysite.com/mysongsfolder/mp3-i-want-to-play.mpg

And that would look dumb and not do anything. We want action!

Let’s take the embed code for the Google reader player and make it do something.

The google embed looks like this:

<embed type="application/x-shockwave-flash"
src="http://www.google.com/reader/ui/3247397568-audio-player.swf?audioUrl=MP3_FILE_URL"
width="400" height="27" allowscriptaccess="never" quality="best" bgcolor="#ffffff"
wmode="window" flashvars="playerMode=embedded" />

In this example, the “MP3_FILE_URL” will be replaced with our custom field code. Like so:

<embed type="application/x-shockwave-flash"
src="http://www.google.com/reader/ui/3247397568-audio-player.swf?audioUrl=<?php echo get_post_meta($post->ID, 'mp3', true); ?>"
width="400" height="27" allowscriptaccess="never" quality="best" bgcolor="#ffffff"
wmode="window" flashvars="playerMode=embedded" />

There are a few things to note here:

• The $key has been replaced by whatever you added in the custom fields area for “Name”, wrapped in single quotes.
• Be sure that echo is include, otherwise the value won’t show up.

The only problem with this method is that if you don’t enter anything for the custom field “mp3″, no mp3 will be embedded. That said, we’re going to do two things to make this work better:

1. We’re going to create a variable so that we don’t have to keep typing <?php echo get_post_meta(…); ?> over and over again.
2. We’re going to check to see if something is actually in the field using the PHP function empty().

And here’s how that’s done:

<?php
$mp3 = get_post_meta($post->ID, 'mp3', true);
if (!empty($mp3)) : ?>
 <embed type="application/x-shockwave-flash"
 src="http://www.google.com/reader/ui/3247397568-audio-player.swf?audioUrl=<?php echo $mp3; ?>"
 width="400" height="27" allowscriptaccess="never" quality="best" bgcolor="#ffffff"
 wmode="window" flashvars="playerMode=embedded" />
<?php endif; ?>

What’s going on here?

1. Line 2 is setting the variable $mp3 to the value of the custom field.
2. Line 3 is checking to see if the value of ‘mp3′ is NOT empty (that’s what the exclamation point stands for). Then closing the PHP brackets to allow for HTML code.
3. Line 5 is printing (or spitting out) the exact value of ‘mp3′ into the embed code.
4. Line 8 is starting up the PHP code again, and ending the if statement started in Line 3.

What all this does is tells WordPress, “Hey, if something’s in the custom field “mp3″, spit that out into the embed code, if not, don’t even mess with the embed code because we don’t need it.

And that’s how you do it. You can put this code above or below the_content(); but it needs to be in the loop.

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/

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.

<script type="text/javascript" charset="utf-8">
  jQuery(document).ready(function() {
     jQuery("a").filter(function() {
     return this.hostname && this.hostname !== location.hostname;
     }).attr('target', '_blank');
  });
</script>

The reason I use the “jQuery” instead of the “$” is because I don’t know what plugin a user might install that might conflict, so using “jQuery” here sidesteps most problems.

This code looks through the page to see if any links are referencing a domain that is NOT the one you’re currently on. I loaded this in the footer to save on loading time. It’s not a cosmetic fix, so it doesn’t matter if it loads last…most people will wait for the page to load before they begin clicking on links.