Sometimes it’s the subtle things that count in regards to making your site stand out from the rest, and with that in mind… jQuery can be your best friend. There are a few light weight jQuery based scripts I tend to use over and over again when developing new WordPress themes. These are very simple techniques that can be applied in under five minutes to just about any theme.
If you are looking for a practical guide to WP Template Tag, with detailed descriptions and sample code, I suggest you to take a look at the WordPress Visual Cheat Sheet designed by Antonio Lupetti.

Fade Anything

This is a tiny little script that can be used to fade pretty much any element on a hover event such as post thumbnails, a block of text or even an entire div. Of course… all of these techniques assume that you have already loaded jQuery into your theme. If not, edit header.php found within your theme folder and place…

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

directly above the <?php wp_head(); ?> tag to pull the latest version of jQuery. Once you have jQuery loaded, simply add the following to your theme header.php file.

<script type="text/javascript">
$(function () {
  $('.fade').hover(function() {
    $(this).fadeTo("fast", 0.5);
  }, function() {
    $(this).fadeTo("fast", 1);
  });
});
</script>

All you need to do after that is add class="fade" to any element you want to be faded on hover. This is a very simple CSS free effect that really does impress for less. To get a better idea of how this looks on the front end, head over to my Video Flick theme demo and hover over any post thumbnail.

Simple Tips

Styled tooltips are one of those things that your users are either going to love or hate. However, I feel that in moderation they can be a very effective way to save valuable real-estate and eliminate information overload by removing unnecessary text. There are literally hundreds of jQuery based tooltip plugins to choose from, but I tend to veer toward the ones that are truly minimal and efficient. For this tutorial, lets use the “aToolTip” plugin by Ara Abcarians which can be found here.

atooltips

After downloading the tooltip script, upload it to your theme scripts folder on your web server. If there is no scripts folder in your theme directory, simply create one. Since we are dealing with WordPress, once again, you will need to edit header.php and paste…

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/scripts/atooltip.jquery.js" type="text/javascript"></script>

somewhere above the <?php wp_head(); ?> tag. Directly below that, lets define how we are going to call the tooltip functionality by adding this…

<script type="text/javascript">
$(function () {
  $('a.tip').aToolTip();
});
</script>

Now that the required scripts have been added we can move on to theme integration. For starters lets just add an excerpt to your post titles. Edit index.php and find…

<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a>

Replace that with…

<a class="tip" href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_excerpt(); ?>"><?php the_title(); ?></a>

That’s it… your finished. Of course you may want to style your tips to match your theme which is pretty easily done by adding and editing the following to your theme style.css file.

.tooltip {
background: #FFFFFF;
border:1px solid #E6E6E6;
width: 300px;
margin:0;
padding:6px 12px 6px 12px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}

.tooltip .tooltip-content {
position:relative;
margin:0;
padding:0;
}

To get a better idea of how this looks on the front end, head over to my Tapp Jobs theme demo and hover over any post title.