You can’t set your theme up to do this right from the post editor. The post title is always going to be above the content of the post, and if you add your image to the post, it is in the content, and therefore stuck below the post’s title.
So what you see on many magazine style themes like PSD TUTS is actually a hack or workaround of sorts. If you take a look at their source code, you can see that each one of those posts is in a div, and at the top is the image, which is then floated to the left, and below that the post starts.
They are almost certainly archiving this effect with custom fields. Basically, you upload that image separately before you make the post, then you take the URL of that image, paste it into that post as the value of a custom field with the key of “thumbnail” or some such thing.
Then in your code, you have a mini-loop that is getting the posts and excerpts, and it is also pulling the value of that custom field and adding it as the source of an image above the posts.
Many commercial themes use this technique. One free theme that you could use as a reference is Smashing Magazine’s Magazeen theme.
Check out the Featured News section in the sidebar of the demo. Notice that the images are before the post titles? That’s a dead give away that they are using custom fields. Check out the code in functions.php that is making that happen:
<li id="featured-news"><h5>Featured News</h5>
<ul>
<?php
$recent = new WP_Query( 'showposts=' . $number . '&category_name=' . $category );
while( $recent->have_posts() ) : $recent->the_post();
global $post; global $wp_query;
?>
<li class="clearfix">
<?php if( get_post_meta( $post->ID, "image_value", true ) ) : ?>
<div class="sidebar-preview">
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
<strong><img src="<?php bloginfo( 'template_directory' ); ?>/timthumb.php?src=<?php echo get_post_meta( $post->ID, "image_value", true ); ?>&w=109&h=60&zc=1" alt="<?php the_title(); ?>" /></strong>
</a>
</div>
<?php endif; ?>
<div class="sidebar-content">
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a>
<span><a href="<?php the_permalink(); ?>/#comments" title="Read Comments"><?php comments_number('0 Comments', '1 Comment', '% Comments' );?></a></span>
</div>
</li>
<?php
endwhile;
?>
</ul>
<a href="<?php echo get_category_link( get_cat_id( $category ) ); ?>" class="sidebar-read-more">Read More »</a>
</li>
That’s how they use custom fields to move an image above the post title. This example is a little more complicated than it really has to be, but I suggest downloading this theme and ripping it apart. The theme uses custom fields in a few different places, so between that theme and the WordPress documentation, you should be able to come up with a system that works for you.
