Oh look, a featured image in a post about featured images... "Rainbow" by John-Morgan via Flickr

You know what’s awesome? Featured Images in WordPress.

Introduced in WordPress 2.9 (and sometimes called “Post Thumbnails”), this feature lets you do more with images in your WordPress theme development. You can dictate with more flexibility where in your design the image is displayed, as well as leverage the built-in image resizing to make fool-proofing image use a breeze.

But what’s not immediately obvious is how to fetch metadata associated with any image uploaded as a Featured Image. How can you use information like the image title, caption, or alt text?

Bust the below PHP and you’re all set:

<?php function the_post_thumbnail_meta() {
global $post;
$thumb_id = get_post_thumbnail_id($post->id);
$args = array(
'post_type' => 'attachment',
'post_status' => null,
'post_parent' => $post->ID,
'include' => $thumb_id
);
$thumbnail_image = get_posts($args);
if ($thumbnail_image && isset($thumbnail_image[0])) {
echo $thumbnail_image[0]->post_title;
}
}
?>


It’s nothin’ too fancy… basically we’re just grabbing the featured image’s ID, and using that, retrieving whatever info from the image we want.

As written above, this function nabs the Title of the image. However, if you replace…

echo $thumbnail_image[0]->post_title;

…with…

echo $thumbnail_image[0]->post_excerpt;

…you’ll instead fetch the image’s Caption.

You can use the following:

echo $thumbnail_image[0]->post_content;
$alt = get_post_meta($thumbnail_id, '_wp_attachment_image_alt', true);
if(count($alt)) echo $alt;

…to get the image’s Description (first line only) or Alternate Text (last 2 lines only) instead.

Being able to access this information is quite useful, and should offer some more options with your site/theme development. For example, I’ve used the above move to optionally display the featured image’s description in a separate column from the one the image itself is displayed in (which is also a different column from the one where the actual post content is displayed).

Kick it nerds!

P.S. If you haven’t messed with Featured Images much yet, peep this post, it’s a great summary and introduction to what’s possible.

As often happens with new toys, I spent a good bit of time the other evening setting it up all nerd-like, and that included taking a couple minutes to whip up a suitable wallpaper.

I didn’t think too long and hard about it, I just wanted something stylish that also kept things on screen easy to look at.

So, I made this wallpaper. Feel free to download and use to your heart’s content. I’ve even included the photoshop .psd file, in case you feel like gettin’ your art on up on it.

And by the way… for anyone interested in making their own wallpaper for a G2, be sure the dimensions are 960 pixels by 800 pixels. That’s the size you want to allow for the multiple home screen scrolling that happens.

Enjoy!

For more on the HTML5 logo, visit http://www.w3.org/html/logo

It evidently isn’t official (yet), but it sure is dope.

For anyone who develops with HTML5, and for anyone who just wants to show support, roll over to http://www.w3.org/html/logo and dig all the HTML5 goodies available.

There’s a badge builder, which allows you to build an embeddable image that shows what HTML5 technologies you’re pimping, as well as gear you can buy (like t-shirts), and even an address from whence you can obtain some free stickers.

Who doesn’t like free stickers?

I think it’s a sharp logo, a slick site, and a great way to raise further awareness of the developing technology. Bravo!

"Rupert Murdoch is on my driveway" by kevindooley via Flickr

I had no idea CSS3 did this!

For any of you who mess with CSS, you know that building a mutli-column layout can be tricky, especially when you’re doing it for sites that run on a CMS of some sort. But a little CSS3 I just discovered makes things quite a bit easier…

.content {
-moz-column-count: 3;
-moz-column-gap: 10px;
-moz-column-rule: none;
-webkit-column-count: 3;
-webkit-column-gap: 10px;
-webkit-column-rule: none;
column-count: 3;
column-gap: 10px;
column-rule: none;
}

So, assuming you’ve got a div with the class “content”, and assuming you’ve got a whole mess of text inside of that div, the above code will automatically arrange that text in to 3 multiple columns, with a gap (i.e. margin) of 10px, with no rule (i.e. line, or, more CSS-ly, border).

That’s it!

It won’t solve all of your multiple column layout woes, but, it will definitely work for quite a few different situations. And it’s so easy!

A few quick notes… first, this won’t work quite yet in Internet Explorer (surprise). So for now, you’ll either have to use this in a progressively enhanced way, or, simply ignore those less fortunate IE users altogether. This is why the rules are duplicated with the “-moz” and “-webkit” prefixes… “-moz” makes Firefox kick this right, “-webkit” makes Chrome/Safari bust it correctly. One day, though, CSS3 will actually be the standard, and then the last 3 lines will work everywhere. Just write things like they are above and ensure you won’t have to go updating your code later on.

"Effort" by Krikit ♥ via Flickr

A small, simple, yet profoundly useful bit of information for anyone that works with WordPress follows below…

Seldom is there a WordPress theme where the default, out-of-the-box “loop” does all you need it to do. Almost inevitably, you need to get in there and create some custom loops. And this can get messy fast if you’re not sure how to go about things.

But fortunately I’ve got a good chunk of code here that should make this portion of your WordPress themin’ pain-free. First, let’s talk about the loop in WordPress…

The “Loop” is the portion of a WordPress template that grabs the specific posts being called for on a given page. It usually looks something like this:

<?php while ( have_posts() ) : the_post(); ?>
<?php the_title(); ?>
<?php the_content(); ?>
<?php endwhile; ?>

If you pop open a template in your WordPress theme, it will almost certainly have more than what’s shown above, but, it will likely have at least this much.

The first line tells WordPress to look through the posts and grab what’s appropriate for the page… and for each post it finds, it says in the following lines to display the Title of each post followed by the Content of each post. Once that’s done, end the loop.

Cool, so that makes sense… and that works great for most of the pages in your WordPress theme.

But what if you want to display posts from a certain category in the sidebar? Or what if you want a page that displays different posts from different categories in a sweet grid-like design? Or what if you want multiple columns of many posts?

If you want to grab any of your WordPress posts, you’ll need a custom loop, and here’s how to kick it:

<?php $myPosts = new WP_Query(); $myPosts->query('posts_per_page=1'); ?>
<?php while ($myPosts->have_posts()) : $myPosts->the_post(); ?>
<?php the_title(); ?>
<?php the_content(); ?>
<?php endwhile; ?>

You’ll notice things look very similar, except for the first few lines. We’re using WordPress’s wp_query to specifically request some certain posts and display them.

The “wp_query” is quite similar to “query_posts”, but unlike query_posts, wp_query won’t screw around with any other loops on the same page. Just paste the above code in where you want some specific desired posts and you’re all set.

The only further editing you need will be where the above example says “posts_per_page=1″. This is where you put some parameters telling the query what posts to grab. For example, you could add “cat=4″, to grab posts that are only in the category with the ID of 4. Or, you could toss in “tag=awesome”, which would grab posts that are tagged with the word “awesome”.

You can, of course, use multiple parameters… just separate them with “&”, as in “cat=4&tag=awesome”.

For a complete list of all the possible parameters, see the WordPress Codex page on query_posts (and yeah, all the stuff that works on query_posts works with wp_query).

One last note… if you use this chunk multiple times in the same page, give each instance a unique variable in place of “$myPosts”. For example, if you use the above code 3 times in a page, for the first instance, replace every “$myPosts” with, say, “$myLoopOne”. For the second instance, use “$myLoopTwo”… and for the third, “$chiaPet”. This will keep these loops from stepping on each other’s toes.

"SAY HELLO TO PICKLE..." by Neal. via Flickr

I recently stumbled upon a curious little tick in WordPress…

I created a tag called “WordPress” working on an installation for a blog about, you guessed it, WordPress. In order to make a link to the tag archive for “WordPress”, I added the appropriate url, which should have ended in “/wordpress”.

Well, I tested my new little link, and lo and behold, a 404 error. No url that ends with “/wordpress”.

Maybe I mistakenly made the slug something different?

Surely I must have, because the slug was “wordpress-work”.

Strange indeed… so, I switched that punk back to “wordpress”.

Next page… “Item not updated”.

Huh?

Although I didn’t do any further research to find out for sure (I kept the slug as “wordpress-work”), it seems that WordPress doesn’t want you to create any tag or archive that would result in the url ending in “/wordpress”.

I guess WordPress is a shy little bugger.

Or am I wrong? Anyone notice otherwise?

"celebration of light 2007 - vancouver, canada, fireworks" by jonrawlinson via Flickr

Yeah you heard it. Pizazz.

I am from (near) San Francisco after all…

Anyway, although CSS3 still has a long way to go before it’s fully implemented reliably across all major browsers, there are some features that you can use right now. One of those features is CSS3 transitions.

One quick note… this won’t work in Internet Explorer or Firefox. Firefox has promised support for CSS3 transitions in 4.0, and IE is, well… its IE. So if that’s a deal-breaker, go ahead and find something else to do.

But for the rest of you, this is a very simple and straightforward move you can bust to give your a project just a little kick… even if it is just for your Chrome/Safari/Opera users for the time being. On to the goodness…

First thing’s first, let’s start with a regular ol’ link:

<a href="http://kreeaytiv.com">Awesome website.</a>

Crazy. Alright, now let’s look at some typical css you might toss on this sucker:

a{
color:#cc33cc;
text-decoration:none;
}
a:hover{
color:#ff00ff;
background-color:#e1e1e1;
}

Unbelievable how awesome we’re getting over here.

So now you have a nice little link that’s a pinkish color of sorts, and when a user hovers over the link, the shade of pink changes, and a subtle off-white background is added. This change will occur immediately when the user hovers on or off of the link, much as we’re used to. The color changes just “blink” on and off.

This is fine, of course, but let’s add that aforementioned pizazz.

By using CSS3 transitions, we can animate that change of css-defined colors with just a handful of extra css lines:

a{
color:#cc33cc;
text-decoration:none;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
a:hover{
color:#ff00ff;
background-color:#e1e1e1;
}

The 4 new lines we added to the anchor tag all define the same transition. Let’s look at exactly what’s crackin’…

First, the “all” tells the browser to apply the transition to everything that it can (in this case, both the text color of the link itself and the background color as well). Transitions can be applied to lots of rules (the whole list is here), and you can pick and choose them to your heart’s content. For our purposes, “all” does the trick.

The next bit (“0.3s”) defines the time over which the transition should occur, in seconds. Again, it’s a matter of taste. Pick any reasonable time you like.

Lastly, “ease” defines how to animate the transition. Other possibilities include linear, ease-in, ease-out, ease-in-out, and cubic-bezier. Try ‘em all to see how the different animations look. Good stuff.

With just those 4 lines of code, you should now have links that awesomely animate-ly transition between css styles.

But what about those 4 lines? Why 4 of them?

Those 4 separate lines cover our bases for browser support. Eventually, only the final line that is simply “transition” will be necessary. However, in the meantime, the previous 3 lines target webkit (i.e. Safari and Chrome), mozilla (i.e. Firefox), and Opera (“o” is for Opera… duh) individually using vendor prefixes.

By writing our CSS3 transitions like this, we cover our bases for not only all the major browsers now, but also for any “proper” support by any browser in the future.

Obviously, this little move is used everywhere here at Kreeaytiv.com. Because we got a thing for pizazz.