Links are a basic part of the Internet. They’re what keep it connected, really, so why not make these connections fun? A link hover is what happens when you hover your mouse over a link (obviously). Usually you’ll see an underline, or an underline removed, or a different colour. But there are many ways to show people that they can click, so I thought I’d show you four of my favourites.

1. Transition

   CSS3 has introduced an awesome new property called “transition”. Don’t be scared when I say CSS3, as this degrades perfectly fine and non-supporting browsers will just show a regular hover (I’m looking at you Internet Explorer). You can use this transition property to make your link change colour slowly. It’s a very subtle but nice-looking effect.

   You apply the transition like so:

   a:hover {
      color:#000;
      -webkit-transition:color 500ms ease-in;
      -moz-transition:color 500ms ease-in;
      -o-transition:color 500ms ease-in;
      transition:color 500ms ease-in;
   }
   

   Check me out, I’m an example.

2. Shadow

   Another CSS3 trick. Make sure to specify this along with a colour, as otherwise it won’t degrade nicely at all and your older browser users will get confused.

   a:hover {text-shadow: 1px 1px 1px rgba(0,0,0,.4);}
   

   If you hover me, good things will happen.

3. Move

   This is a simple one, but one that I like and use a lot. You can add some cool interactivity if you slightly alter a link’s position on hover.

   a:hover {position: relative; top: 2px;}
   

   I just can’t stay still when you hover me!

4. Opacity

   This is a trick for images, and one that I use all the time. It’s nice to give images a hover state, as not all images are clickable, so you should be letting your readers know which ones are.

   a.img {opacity: .5;}
   

   You can see an example of this on the social media links at the top of this page. These links also move.

Well there they are. There’s nothing super mind-blowing here, but it’s the little details that count and will make your website a little more special. Are there any techniques that you like to use? Share them in the comments.

image by aidan morgan

The details of this tutorial only apply to people using the Thesis theme. The technique, however, can apply to anyone. So if you’re new to jQuery with any tip of website, read on.

As you may know, the wonderful Thesis theme comes with some default paragraph styles. This includes styling for notes (as you can see above) and alerts (as you can see above that). These are great, but wouldn’t it be cool if you could close the alert after you’ve been alerted? Potentially.

This tutorial has a bigger purpose than that, though. It should be a great introduction to jQuery for those who have never used it before. So let’s begin.

1. Turn jQuery on

   On a normal site you would call jQuery from the head of your document. Thesis has support for this built in, so in your Wordpress dashboard go to Thesis > Page Options > Javascript and select the jQuery library.

2. Place the following in custom_functions.php:

   function custom_alert_box() {
   ?>
   
   <script type="text/javascript">// <![CDATA[
   $(document).ready(function() {
      $('#closealert').click(function(){
        $('p.alert').hide('2000');
      });
    });
   
   // ]]></script>
   
   add_action('wp_head', 'custom_alert_box');
   

   So what does this mean? It means that p.alert will be closed when you click something with the ID closealert and the animation will be finished in 2000ms. This allows for lots of customization, as #closealert could be an image or a span that says close me or a header, or whatever you think would be most useful.

3. Add alerts with your close mechanism

   Now when you use the built-in alert style with <p class=”alert”>, place your #closealert button in there somewhere and you’re all set.

Tip: If you don’t want to add a closing mechanism, then you can change the applicable lines in the code to this:

$('p.alert).click(function(){
$('p.alert').hide('2000');

Now when you click anywhere in the alert box it will close.

Enjoy

This post was brought to you by the Thesis Wordpress theme; the search-engine optimized powerhouse of a framework designed to help you get a website up and running faster and more successfully. Want more information? Get it here. Want a professional website built on the Thesis framework and customized just for you? Contact me.

Almost every Wordpress theme you’ll come across has support for going to the previous or next post. That’s all well and good, but in Wordpress 2.9 we got the ability to have post thumbnails. Wouldn’t it be great to use thumbnails instead of or alongside our post titles? The answer is yes, it would. So I embarked on a journey to figure out how to add this functionality to your theme, and have posted the results below. First for regular Wordpress users, and then for Thesis users.

1. Add post thumbnail support

   Open up functions.php and place add_theme_support(‘post-thumbnails’); in there, if it isn’t there already.

2. Add the code

   Open single.php and go down to where the previous_post_link and next_post_link is situated. If your theme doesn’t have that already, then just find a proper place for the thumbnails. Place the following code in:

   <?php
   $prevPost = get_previous_post();
   $prevthumbnail = get_the_post_thumbnail($prevPost->ID, array(150,150) );
   previous_post_link('%link',''.$prevthumbnail.'', TRUE);
   ?>
   
   <p class="prev_next2"><?php previous_post_link('%link','<') ; ?>
   
   <?php
   $nextPost = get_next_post();
   $nextthumbnail = get_the_post_thumbnail($nextPost->ID, array(150,150) );
   next_post_link('%link',''.$nextthumbnail.'', TRUE);
   ?>
   <p class="prev_next2"><?php previous_post_link('%link','>') ; ?></p>
   

   And that’s it for the code. The 150,150 is the size of the thumbnail, so feel free to experiment with that. You can style the thumbnail by targetting .wp-post-image in your css. The ‘<' can be changed to ‘%title’ if you’d like to put your previous/next titles in there instead of an arrow, and this can be styled by targeting p.prev_next2.

3. Add post thumbnails to your post

   Go into your post screen on the dashboard, and make sure you have an image set for “Featured image” on the right hand size. This is where the thumbnail will come from.

4. For Thesis users:

The trick works the same for Thesis, only instead of placing it in single.php, place it in a function like follows:

function prev_next(){
if (is_single()) {
?>

// CODE HERE

<?php } }
add_action('thesis_hook_after_content, 'prev_next);
remove_action('thesis_hook_after_content','thesis_prev_next_posts');

The remove_action gets rid of the previous/next navigation that is already built in.

Sources:

Wordpress support forums
Digging into Wordpress

It’s been a while since 47 Customizations for the Thesis Theme was posted and there has been some great Thesis tutorials written since then. Here I’ll share some of my favourite ones.

WordPress 3.0

Enable WordPress 3.0 Features for the Thesis Theme

WordPress 3.0 has some cool new features that Thesis doesn’t out-of-the-box support yet. Learn how to add that support yourself.

WordPress 3.0 custom post types, taxonomies & Thesis

Learn about the more techy Wordpress 3.0 advancements and how to use them with your Thesis theme here.

How to Add the WordPress 3 Nav Menu to Thesis

Learn how to quickly add the Wordpress 3.0 navigation menus to your Thesis site.

Making it Pop

Using Thesis Custom Body Classes To Break Down Design Barriers

Want to add some flair to a specific post on your Thesis-based site? Learn how to do so with custom body classes.

Styling the Thesis Sidebar

Using the default sidebar can be a giveaway that you’re using the Thesis theme. Here I’ll teach you how to style yours and make it unique.

How to Make Custom Comment Avatars for Thesis

Sick of the default gravatar in your comments? Here’s an article on putting your own in.

How to Make a Rotating Header Image in Thesis

One header image? Boring! Learn how to make it rotate.

Position Your Thesis Nav

Sometimes you don’t want your navigation bar where it comes by default. Luckily it’s easy to change its position.

How to Use jQuery Lazy Load in Thesis 1.7

Want to be like the cool kids and have your content load in as you go to it? Here you’ll learn how to do so.

Pages & Features

How to Create Additional Page Templates

Page templates are infinitely useful in Wordpress, but a little trickier with Thesis. Learn how start creating them.

Another Tabbed Widget for Thesis Tutorial

Learn how to add a cool tabbed widget to your sidebar. (See the one on the right here for an example)

Create a Powerful jQuery-Powered Archives Page

Create a useful Archives page like the one used here.

How to Create a Subloop in Thesis

A tutorial on using advanced loops in Thesis.

Add Extra Widget Areas to Thesis

Thesis only comes with 2 widgets by default, but sometimes we need more. Learn how to add them with this tutorial.

Functionality

Hide Dates in Old WordPress Posts Using the Thesis Theme

Have some old content that’s still applicable and relevant? Don’t let people judge it by its date! Learn how to hide the dates in only old posts.

Smarter Thesis Hooks

If you’re doing any kind of real customization to your Thesis theme, you probably have functions all over the place. Learn how to implement them efficiently.

Slideshows

Adding a Featured Content Slider to Thesis in 5 Quick Steps

Learn how to add a jQuery slider to your Thesis site using s3lider.

How To Make a jQuery Image Slideshow in Thesis

Learn how to quickly add a jQuery image slideshow to your Thesis site.

Adding a Featured Content Slider for Thesis

Use jQuery Cycle to add a content slider to your Thesis site.

How to Create a Featured Content Slider

An in-depth tutorial to show you how to add support for a featured content slider in Thesis.

Thesis Feature Box – How to Add a Slider

Learn how to add the d13slidehow to your Thesis feature box.

How To Integrate Cu3er Post Elements To Thesis Theme Feature Box

Cu3er is a popular flash slideshow. Learn how to get it working in your Thesis feature box.

Social Media Integration

How to Install Twitter’s @anywhere in Thesis

@anywhere was launched recently with some really cool features. Learn how to implement it on your Thesis site.

Inserting Facebook’s Like Button in Thesis

Facebook is a huge source of traffic. Everybody and their grandmothers is on it. Learn how to leverage that in your site with this tutorial.

Add A Tweet This Post Box To Your Thesis Post Footer

Learn how to give visitors a custom tweet they can send out directly from your post.

Show Number of Retweets in WordPress Without a Plugin

Use social proof to entice people to share your Wordpress posts with unlimited customization potential.

Add Social Links to WordPress Without a Plugin

Learn how to make sharing easy by putting already-formatted social media links in your posts without using a plugin.

Create a “Floating” Area in Thesis

Keep your social media links from and centre with this floating tutorial.

photo by back_garage

It’s time for a really quick tip.

With art directed posts being all the rage now, everybody wants to style everything. There are plugins and custom fields and all sorts of ways to do this, but Wordpress already has two not-so-popular functions that allow you to style specific posts or pages

So here they are:

Body Class

<body <?php body_class(); ?>>

This will generate something like this:

<body class="single postid-61 logged-in">

Using this you can easily change the background image of your post by targetting .postid-61 in your CSS file. You could change anything else by targetting whatever it is, such as .postid-61 li to change your lists or .postid-61 a to change your link colours.

Post Class

<div <?php post_class() ?> id="post-<?php the_ID(); ?>">

This will generate something like:

<div class="post" id="post-61">

This will allow you to style the post section in the same way by targeting #post-61. Thus you can change the p font or the h1 or anything else.

There’s a lot you can do with these tags, since your content is wrapped in post and the rest of your site is wrapped in the body class. Not all themes will have this built in, so if yours doesn’t you can just replace the body and post tags with the functions above. I didn’t go over everything you can do here because it’s almost limitless, I just wanted to make sure that you were aware of the possibilities. There are links at the bottom you can read if you want more detail on the body class. Have fun!

Note: depending on your CSS structure you may have to place !important in your tags to override others.

Further reading

Wordpress 2.8 and the body class function
Wordpress 2.8 body_class, automatic_feed_links
9 Ways to Set Dynamic Body IDs via PHP and Wordpress

photo by ivan makarov

I recently did a survey both here and on the Third Tribe forums in an attempt to figure out just what it is people want from a premium Wordpress theme. We all keep creating but nobody ever really asks the question.

Every day somebody comes out with a theme with an options page that’s bigger than the previous. But is that what the customers want?

I got some great results both over here on the poll and also in the Third Tribe forums. I’m going to share the poll results with you here, first in bar form and then in a pie graph:

As you can see, the top results were as follows:

Great Design

A bit of a shocker to me, honestly. I thought more feature-oriented choices would be the highest ranked categories for premium Wordpress themes. But get to Ember and Dribbble and everywhere else and look for inspiration, because great design is as important in a premium theme as it is in a free one or a custom site.

Ease of Customization

Not surprising being that the poll was posted on a Thesis-oriented site, but ease of customization came in second. People paid good money for your theme, so they’re going to want to be able to use it for their purposes.

Support

This is my personal reason for buying premium products. Have a support forum, a phone number, or be quick to respond to e-mails as that’s one of the important extras that premium theme purchasers are looking for from you when they buy.

So in closing, make sure that your site has a great design, is useful for a wide variety of people or extremely useful for a niche, and support the product like you want everyone to succeed with it. Which you do, so that shouldn’t be too difficult.

I’m going to leave you with a great quote from Chris Brogan in his response on the Third Tribe forums that sums up my personal opinion on premium products in general pretty well:

“It has to do something really well that I can’t do myself. Thesis gives me better SEO plus some really simple business execution. Press75 Video Elements makes a video heavy site really easy with just a few copy/pastes. There are lots of others that DO something for me. I don’t pay for colors. I pay for function.”

– Chris Brogan

What are your thoughts on the matter?

sort of humorous sign picture by matt jiggins

Wordpress 3 has a sweet new menu. Thesis already had a sweet menu. Still, some people would like to take advantage of all that this new release of Wordpress offers and using the new navigation menu is one of them. Luckily it’s incredibly easy to add support for the new nav menu in Thesis.

Open custom_functions.php and add:

function wp3_nav() { ?>

	<?php
	add_theme_support( 'nav-menus' );
	wp_nav_menu();
	?>

<?php }
add_action('thesis_hook_before_header', 'wp3_nav');
remove_action('thesis_hook_before_header', 'thesis_nav_menu');

That adds support for the new menu and removes the original Thesis nav. You can style the new nav the same way that you styled the old one, as that seems works out of the box. You can have both running at the same time if you omit the last line. You can also change the hook for our new function wp3_nav and place it anywhere you’d like.

I only preliminarily tested this to make sure it worked and could be styled, so you might find bugs. Note that Wordpress 3 isn’t even in final release yet.

More information:
wp_nav_menu at the Codex.

This is just a quick update to let everyone know that Theme Thesis is now on Facebook.

If you follow the Theme Thesis Twitter account you’ll see that it’s filled with web design resources and goodies, and that’s what the Facebook account will be like. Facebook and Twitter are different venues, though, so the volume will be restricted and the only resources that will make it over there will be the best of the best.

Become a “liker” to stay updated with Theme Thesis happenings, get the best web design resources, and generally have a good time.

Hopefully I’ll see you there!
facebook.com/themethesis

I was recently looking for a forms plugin and was getting frustrated. Normally my only use for forms is as a simple contact form, but this time I needed something more robust for use on a contest site. It had to be really easy for users to submit their entries, and equally as easy for the administrators to review them. Something was going wrong with every plugin I was using, and I was about to think of other ways to make the site work.

Then I stumbled upon Gravity forms.

It was everything I was looking for, so I bought it and couldn’t be happier. I’ve narrowed down the 5 reasons that Gravity Forms is better than the form plugin you’re using, and I’m going to go into them quickly here:

Support

This is the biggest difference between free and premium anything and why I gladly pay for most things I use. If you have a problem on your site, or are building a site for someone else, you probably need it fixed now. Not in a few weeks when the author gets around to messaging you back. Gravity Forms is a small operation, so there’s no phone number or anything, but you’ll get your answer fairly quickly on the support forums.

Mail services

There’s no need to use your mail service for any responses. You can see and reply to form inquiries via the Wordpress dashboard. Feel like sending an autoresponse to somebody after they fill your form out? You can do that too, and you can pass information like their name to the e-mail to personalize it.

Form Scheduling and Limited Entries

Having a contest? Let people only submit entries for the contest duration. Better yet, if you’re only allowing a certain number of submissions you can set the form to expire after that many people have replied. Briliant.

Validation

I don’t work my ass off on making a website validate just to install a plugin and have it mess all that up. Gravity Forms validates strict. Nerdy stuff, but important to some of us.

And my number one favourite feature of Gravity Forms is….

Post creation

You can allow anybody to post to your blog using your form. This includes letting them fill out custom fields. This means that for a contest site, the entries can already be processed and held in Drafts for moderation, requiring only one click to put them live.

Who it’s for

Anybody who needs a very easy to use and robust system for forms. This could be somebody who gets contacted a lot, needs to allow user-generated content, or is setting the form up for a client.

Who it’s not for

Somebody who rarely uses forms. If you get contacted once every two months, you might not need to spend the $40. But then again, you might want to anyway for the ease of use and just in case you need support.

Buy Gravity Forms

You can buy Gravity Forms, get more information and find out more about its other features (such as conditional logic, field population, data passing etc) over at the official website.

Have any experience with Gravity Forms or know of another form software that might be better? Let us know in the comments!

Internet Explorer, as much as a lot of us despise it, has a considerable market share in the browser space. Some people even still use the defunct Internet Explorer 6 (which sucks) but even Internet Explorer 8 has its own kinks and intricacies to worry about.

And up until recently it’s been hard to test a design against them if you’re using a Mac (which many designers are).

The three most popular options for testing are:

• Run a Windows partition: Obviously this isn’t ideal as it requires a reboot every time you want to see how something looks on IE. And it costs money. And you have to support an operating system you probably don’t really support, hence your computer choice.
• Use a website like Browsershots: Just as troublesome as I’ve never found one of these to work properly for me. They always seem incredibly slow (as they’re taking pictures on servers and sending them to you) and buggy. Not fun.
• Have a Windows PC: This is even worse than option 1 for obvious reasons.

However, I just recently found out about a cool little program called WineBottler, and I’m going to show you how to use it to install Internet Explorer on Mac.

Download WineBottler


Drag both Wine and WineBottler to your Applications folder.

1. Install Internet Explorer

   
   It’s located under “Install Predefined Prefixes”. Choose the version you’d like and click silent install if you’d like.

2. Run it

   
   Yeah. That’s it.

Can you believe how simple that was? I couldn’t. The performance isn’t perfect but it’s very simple to install, and now you can run Internet Explorer on your Mac with just a click of a button.