In Settings > Media, you are able to set only the height or width of the Thumbnail images and WordPress will resize them proportionally (i.e.: if you have a fixed height, then the widths will vary depending on your uploaded image dimension, and vice versa).

Inside the loop, you can get a thumbnail’s width, height and URL using this code:

$imgdata = wp_get_attachment_image_src( get_post_thumbnail_id(), 'thumbnail' );
$imgurl = $imgdata[0]; // the url of the thumbnail picture
$imgwidth = $imgdata[1]; // thumbnail's width
$imgheight = $imgdata[2]; // thumbnail's height

For the second parameter of the wp_get_attachment_image_src function you can also use ‘medium’, ‘large’ and ‘full’. They correspond to the dimension for the other sizes in Settings > Media.

Read more about the wp_get_attachment_image_src function.

These are some of the best, currently available resources on the various WordPress 3.0 features relevant to theme development. I’ve been using and growing this list personally for a while as a sort of launchpad and they should be enough for most development needs.

There are plenty other resources, tutorials, and tips out there that I do not include here, though. For that, Google is your friend.

Menu

• Goodbye headaches. Hello menus!
• Codex

Custom Post Types

• Custom Post Types in WordPress
• Rock-Solid WordPress 3.0 Themes using Custom Post Types
• Custom Post Types in WordPress 3.0
• Extending Custom Post Types in WordPress 3.0
• Codex

Custom Taxonomies

• New and Exciting Ways to Organize Your WordPress Powered Website
• A Refresher on Custom Taxonomies
• The Essential Guide to WordPress 3.0 Custom Taxonomies
• Codex

Multisite

• How to enable Multi-Site option in WordPress 3.0
• WordPress 3.0 Walkthrough: Getting Started with Multisite
• Codex

Custom Header and Background

• WordPress 3.0 Custom Background Support
• Codex : Custom Background | Custom Header

Editor Styles

• Codex

New Theme Template Files

• front-page.php
• single-[post-type].php
• author-[nicename].php and author-[id].php
• taxonomy.php, taxonomy-[taxonomy].php, taxonomy-[term].php

Miscellanea

• WordPress 3.0 release announcement
• Codex about Version 3.0
• Various small new theme and plugin development updates
• Thelonious Monk, the jazz pianist whose name is used for 3.0

What on earth are they?

Example time. A theme you like uses <h2> tag for post titles. You hate that and want <h1> instead.

The old, boring way is you open the theme files, starting from index.php, changing all <h2> tag to <h1>, then moving to the other files: archives.php, tag.php, category.php, doing the same thing over and over again, hoping you don’t miss anything.

Gah!

That is not clever because a) it’s too much work, and b) when the theme is updated, you’re screwed.

Wouldn’t it be better if you could just a) write the change once, have it applied globally, while b) at the same time not modifying the theme’s code?

Yes. Yes of course. And you can do just that by mastering the art of child theming, Hooks, Actions and Filters.

Enter Child Theme

Child theme is a lazy developer’s best friend.

A child theme is everything its parent is, except for the changes you add that make it awesome-er.

When you use a child theme, WordPress will check whether it has the usual PHP files. You know, index.php, header.php, the likes. If your child theme has it, great, WordPress will happily use it. If not, WordPress will smile at it knowingly and use its parent’s files instead.

BAM! Now you understand how parent-child theme works in WordPress.

Every theme can be a parent theme, but some are especially kind and beneficial to their children. They are usually known as theme frameworks. Ever heard of them?

They make the best parents for various reasons (good coding practice, built-in SEO), but in this case it is because they have hooks aplenty.

Hooks, Filters, Actions!

Hooks are marked places on a theme. The start of the comment area. The post meta. And so on.

Actions and Filters are the things you can do at those places.

Actions do stuff. Like showing a picture of kitten after your post title. Filters specifically deals with modifying texts (or HTML, same thing). Words go into your Filter and come out differently. Profanities get Filtered into ****s. <h2>s to <h1>s.

Let’s repeat that.

Hooks: places. Actions: doing things. Filters: changing texts.

Theme frameworks are smart because they are made to be modified. Those clever guys and girls who wrote them know that you want to add stuff between your post title and content, that you want to change the wordings on your comment forms, so they add tons of useful hooks in their frameworks for you to use in your child theme.

Hooks are provided by the parent theme. Actions and Filters you write yourself in your child theme’s functions.php.

And that is all.

Recap

Think of an awesome theme to create. Or a neat feature to add. Use a theme framework as a parent. Create a child theme. Use parent’s Hooks to add Actions and Filters. Joy.

Further reading

Once you grasp the concept, visit these places to learn the technical sides.

How To Modify WordPress Themes The Smart Way by Ian Stewart. Explains all of these concepts with easy to follow examples.

Adding Custom WordPress Hooks by Benedict Eastaugh. For when you want to create your own theme framework.

Plugin API : Hooks, Actions and Filters at the WordPress Codex. Plugin? Yeah. Hooks, Actions and Filters were initially features that has to do with plugin creation.

Just tweeted this:

Doing it right: #genesiswp ‘s theme options UI mimics WP’s look instead of having its own fancy UI.

A lot of you must have seen how various WordPress themes have different theme options UI design. Most of them opt for pretty looking options page with labels, inputs, buttons, icons, and forms that look wildly different from the rest of the Dashboard.

If your theme is like that, you’re doing it wrong.

Huh? Why?

This is a short tutorial on integrating Masonry, the jQuery layout plugin, with your WordPress site. We will try to use that jQuery plugin to show a list of posts in a neatly stacked layout, similar to the one I have down here. Here’s an explanation about Masonry, from it’s home page:

Think of it as the flip side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically then horizontally according to a grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.

Here’s a visual explanation, which I took and edited to fit my layout. Pay attention to the numbers, which shows the order of the elements in your HTML code:

Read the rest of this tutorial→

A quick post to show what I just discovered. Recently I had a case where I needed to show a static coming soon page for non logged-in visitors, but had to show the fully working theme to admin users because the development was done live.

A little Googling got me to this WordPress Maintenance Mode Without a Plugin tutorial by Sivel. It’s a three parts, real quick tutorial that allows for:

• Maintenance mode both for a certain or indefinite duration.
• Style-able maintenance mode notification page.
• Show normal blog to logged-in users.
• Easily turned-off maintenance mode, since you just add a few files to the WordPress installation and can delete those when you’re done.

Another neat things is that it is done using a maintenance mode mechanism already built-in in WordPress (didn’t know it has that). It works just as expected and when the development is done I can remove the files (only two of them) and everything will be back to normal.

Additionally, another simple way to do this is to serve/create a different, maintenance style theme for non-logged in visitors. User Theme is a plugin that allows for that, but I have yet to test how it works.

I’m sure this is a pretty common situation, so how do you guys do it?

So you want to get your themes ready for the newly released Apple iPad? Worry not, take a deep breath and follow this simple checklist:

1. Do nothing.

Done. And no, that is not a joke. Generally you won’t have to do anything since iPad’s Mobile Safari is a full-fledged browser comparable to desktop browsers, supporting modern web practices of (X)HTML/CSS/JS and even HTML5 and CSS3.

There are some points I want to mention, though: design consideration, specific things you can do on iPad’s browser, and more.

Read the rest of this entry→