kjke hec iuehceiuh ciuefh viu ef

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.

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!

"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.