The question is how to post the caption with a post thumbnail, aka featured image, in an ordered way.

This code below is tested in wp3.3.

//POST THUMBNAIL AND CAPTION STYLED SIMILAR TO .wp-caption//
function the_post_thumbnail_and_caption($size = '', $attr = '') {
global $post;

$thumb_id = get_post_thumbnail_id($post->id);

$args = array(
'post_type' => 'attachment',
'post_status' => null,
'parent' => $post->ID,
'include'  => $thumb_id
);

$thumbnail_image = get_posts($args);

if ($thumb_id && $thumbnail_image && isset($thumbnail_image[0])) {

$image = wp_get_attachment_image_src( $thumb_id, $size );
$image_width = $image[1];

$output = '<div style="width: ' . ($image_width) . 'px">';

$attr['class'] = ''; //move any 'class' attributes to the outer div, and remove from the thumbnail

$output .= get_the_post_thumbnail($post->ID, $size, $attr);

/* //Uncomment to show thumbnail title
$title = $thumbnail_image[0]->post_title;
if($title) :
$output .= '<p>';
$output .= $title;
$output .= '</p>';
endif; */

/* //Uncomment to show the thumbnail caption */
$caption = $thumbnail_image[0]->post_excerpt;
if($caption) :
$output .= '<p>';
$output .= $caption;
$output .= '</p>';
endif;

/* //Uncomment to show the thumbnail description
$descr = $thumbnail_image[0]->post_content;
if($descr) :
$output .= '<p>';
$output .= $descr;
$output .= '</p>';
endif; */

/* //Uncomment to show the thumbnail alt field
$alt = get_post_meta($thumb_id, '_wp_attachment_image_alt', true);
if(count($alt)) :
$output .= '<p>';
$output .= $alt;
$output .= '</p>';
endif; */

$output .= '</div>';

}
echo $output;
}

(unfortunately, posting here removes the indents which would make the code easier to read)

Possible styles for that to make it look like an ordinary wp caption:

.thumbnail-caption { padding: 5px; background: #f5f5f5; border: 1px solid #ddd; }
.thumbnail-caption-text { text-align: center; margin-bottom: 5px; font-size: 90%; }
/*
.thumbnail-title-text { text-align: center; margin-bottom: 5px; font-size: 90%; }
.thumbnail-description-text { text-align: center; margin-bottom: 5px; font-size: 90%; }
.thumbnail-alt-text { text-align: center; margin-bottom: 5px; font-size: 90%; }
*/

Use the code in the template, for instance in single.php, with one of the registered thumbnail sizes as parameter; example:

<?php the_post_thumbnail_and_caption('large',array('class' => 'alignleft')); ?>

A huge ‘thank you’ to all the contributers to this topic in the forum.

However, they do preferably show a proper added meta description instead of the first few words of the post or page.

If you can enter this meta description into your WordPress blog or CMS, specifically for each post and static page, you can fine tune what you would like your customers to see with the search results.

Most users would download and install one of the many SEO plugins, which often come with a lot of unwanted features.

With a bit of programming, you can add your own ‘Meta Description Field’ below the post/page editor.

The first part of the code needs to be added into functions.php of your theme:

// 'Custom Meta Description' field below post/page editor
add_action('admin_menu', 'custom_meta_desc');
add_action('save_post', 'save_custom_meta_desc');
function custom_meta_desc() {
add_meta_box('custom_meta_desc', 'Add meta description <small>(if left empty, the first 200 characters of the excerpt will be used)</small>', 'custom_meta_desc_input_function', 'post', 'normal', 'high');
add_meta_box('custom_meta_desc', 'Add meta description <small>(if left empty, the first 200 characters of the excerpt will be used)</small>', 'custom_meta_desc_input_function', 'page', 'normal', 'high');
}
function custom_meta_desc_input_function() {
global $post;
echo '<input type="hidden" name="custom_meta_desc_input_hidden" id="custom_meta_desc_input_hidden" value="'.wp_create_nonce('custom-meta-desc-nonce').'" />';
echo '<input type="text" name="custom_meta_desc_input" id="custom_meta_desc_input" style="width:100%;" value="'.get_post_meta($post->ID,'_custom_meta_desc',true).'" />';
}
function save_custom_meta_desc($post_id) {
if (!wp_verify_nonce($_POST['custom_meta_desc_input_hidden'], 'custom-meta-desc-nonce')) return $post_id;
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
$customMetaDesc = $_POST['custom_meta_desc_input'];
update_post_meta($post_id, '_custom_meta_desc', $customMetaDesc);
}

The second part will be added into header.php, below the <title> tag:

<meta name="description" content="<?php
if(is_singular() ) :
$text = get_post_meta($post->ID,'_custom_meta_desc',true);
if(!$text) $text = ($post->post_excerpt) ? $post->post_excerpt : substr($post->post_content, 0, 200).'...';
echo htmlentities(strip_tags(apply_filters('get_the_excerpt',$text)));
else :
/* optional area to program meta descriptions for index and archive pages, etc */
endif; ?>" />

'Meta Description Input' for posts and pages

The new input field will show directly below the post or page editor window.

Simply add your meta description text into the field, and press the usual ‘update’ button;
if left empty, the meta description will show the first 200 characters of the post or page.

The following codes refer to a child theme of Twenty Eleven.

If you don’t want to follow the steps outlined in the Codex, you can download a ready-made child theme from quirm.net.

First step: in your child theme folder, create two new page templates – one for a fixed sidebar on the left, and the other for the sidebar on the right.

To begin with, copy the code of sidebar-page.php, and save it as sidebar-left-page.php and sidebar-right-page.php, resp.

The file names are important as they refer to the same names in the code for functions.php.

Second step: Change the line ‘ * Template Name: Sidebar Template’ to ‘ * Template Name: Left  Sidebar Template’ and ‘ * Template Name: Right Sidebar Template’, resp.; save the files.

Third step: add the following code to functions.php of your child theme:

function twentyeleven_child_pagetemplates_body_classes( $wp_classes, $extra ){

  $classes = array();

  if( is_page_template( 'sidebar-left-page.php' ) ) :
  // correction for the Left Sidebar Template
    $classes[] = 'left-sidebar';
    $blacklist = array('right-sidebar','singular');
    // Filter the body classes
    foreach( $blacklist as $val ) {
      if (!in_array($val, $wp_classes)) : continue;
      else:
      foreach($wp_classes as $key => $value) {
        if ($value == $val) unset($wp_classes[$key]);
      }
      endif;
    }
  endif;

  if( is_page_template( 'sidebar-right-page.php' ) ) :
  // correction for the Right Sidebar Template
    $classes[] = 'right-sidebar';
    $blacklist = array('left-sidebar','singular');
    // Filter the body classes
    foreach( $blacklist as $val ) {
      if (!in_array($val, $wp_classes)) : continue;
      else:
      foreach($wp_classes as $key => $value) {
        if ($value == $val) unset($wp_classes[$key]);
      }
      endif;
    }
  endif;

return array_merge($wp_classes, (array) $extra, $classes );
}

add_filter( 'body_class', 'twentyeleven_child_pagetemplates_body_classes', 20, 2 );

That code will correct the body_classes of the theme, which are central to the layout of your site.

Finished.

Now you will have two more page templates available in the ‘page attributes’ section when you create or edit a static page.

The sidebar position of these pages will be independant of the theme options (as long as one of the ‘content with sidebar’ options is ticked).

The default advice usually is to use a counter variable and a conditional statement to check for the first post in the loop; that approach obviously works fine, however requires a few lines of extra code before and in the loop.

A more condensed approach is to use $wp_query->current_post which returns the current post number in the loop, starting with 0 (zero) for the first post.

This can be combined with a check, if the page is really the first page, and not one of the paginated pages, using !is_paged().

If the goal is just to apply different css styles to the first post, it is best to add a unique css class to the post_class() which is used in most recent themes; like so: post_class($extra); to add the extra class to post_class.

All combined might look like (based on the code of content.php in Twenty Eleven):

<article id="post-<?php the_ID(); ?>" <?php $extra = ( $wp_query->current_post == 0 && !is_paged() ) ? 'specialclass' : ''; post_class($extra); ?>>

If the goal is to have a totally different output for the first post, then a conditional structure is needed (within the loop, wrapping the post output):

<?php if( $wp_query->current_post == 0 && !is_paged() ) : ?>
/*the output of the first post*?
<?php else : ?>
/*the output of all other posts*/
<?php endif; ?>

The solution lies in the responsive structure of the stylesheet.

This adaptation to the styles needs to be added at the end of style.css of (your child theme of) Twenty Eleven; some example styles, to set a lower limit to the page width, etc:

/* =Responsive Structure for narrow screens
* to keep min width and sidebar
-------------------------------------------- */
@media (max-width: 800px) {
     #page {
	   min-width: 500px;
         }
/* keep the sidebar - for right sidebar */
	.right-sidebar #main #content {
		margin: 0 29% 0 1%;
		width: 70%;
	}
	.right-sidebar #main #secondary {
		float: right;
		margin: 0 1% 0 1%;
		width: 24%;
	}
/* keep the sidebar - for left sidebar */
	.left-sidebar #main #content {
		margin: 0 1% 0 29%;
		width: 70%;
	}
	.left-sidebar #main #secondary {
		float: right;
		margin: 0 -1% 0 2%;
		width: 24%;
	}
/* correction for 'showcase' template */
	.page-template-showcase-php #main #primary.showcase {
		float: right;
		margin: 0 2% 0 2%;
		width: 96%;
	}
	.page-template-showcase-php #main #primary.showcase #content {
		margin: 0 6% 0 6%;
		width: 88%;
	}
	.page-template-showcase-php section.recent-posts {
		float: right;
		margin-right: 0pt;
		margin-left: 31%;
		width: 69%;
	}
	.page-template-showcase-php #main .widget-area {
		float: left;
		margin-right: -22.15%;
		margin-left: 0pt;
		width: 22.15%;
	}
/* correction for singular posts/pages without sidebar */
	.singular #main #content {
		margin: 0 8% 0 8%;
		width: 84%;
	}
/* keep floating footer widgets side-by-side at this size */
     #colophon #supplementary .widget-area {
          float: left;
          margin-right: 1%;
          width: 32%;
     }
}

The whole css got a bit longer than expected to care for the ‘showcase’ template, and all possible layout options.
Adjust the ‘minimum width’ to fit the screen width of the targeted hand-held device.
If you are using it with an alredy customized child theme of Twenty ten, you may need to adjusts some of the values and/or add more styles.

Not actually widely tested with iPhone^®, iPad^® or any other tablet PCs – all feedback is very welcome.

First step

Create a child theme.

- create a new sub-folder under the /wp-content/themes folder, for instance: twentyelevenchild;
- add a style.css file to that folder; content:

/*
Theme Name: Twenty Eleven Child
Author: alchymyth
Description: a child theme, based on the 2011 theme for WordPress
Author URI: http://wordpress.org/
Template: twentyeleven
*/

@import url(../twentyeleven/style.css);

- add a functions.php file to that folder; to be used later;
- optional: add a screenshot.jpg image to that folder, depicting the design of your child theme.

Second step

Add the call of the sidebar back.

Edit single.php and/or page.php and add

<?php get_sidebar(); ?>

before the line

<?php get_footer(); ?>

Third step

Suppress the .singular body_class from the single post or page.

To achieve this, add a filter to your new functions.php in your child theme folder.

add_filter('body_class', 'blacklist_body_class', 20, 2);
function blacklist_body_class($wp_classes, $extra_classes) {
if( is_single() || is_page() ) :
// List of the classes to remove from the WP generated classes
$blacklist = array('singular');
// Filter the body classes
  foreach( $blacklist as $val ) {
    if (!in_array($val, $wp_classes)) : continue;
    else:
	  foreach($wp_classes as $key => $value) {
	  if ($value == $val) unset($wp_classes[$key]);
	  }
    endif;
  }
endif;   // Add the extra classes back untouched
return array_merge($wp_classes, (array) $extra_classes);
}

(resources:

http://dev-tips.com/featured/remove-an-item-from-an-array-by-value

http://wordpress.stackexchange.com/questions/15850/remove-classes-from-body-class )

Fourth step

Fine-tuning of style.css

For instance:

.single #author-info {
	background: #f9f9f9;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	margin: 2.2em 0% 0 0%;
	padding: 20px 35.4%;
}

There might be some more details which can be changed while customizing the styles of the child theme.

edit: thanks to member smijos of the wordpress support forum:
some more styles, for the comment section, to make the theme look good:

#respond {
width: auto;
}
.commentlist {
width: auto;
}
.commentlist > li.comment {
margin: 0px 0px 20px 102px;
width: auto;
}

PS: A Few Different Cases

(updated and expanded)

this all concerns this line of code:

if( is_single() || is_page() ) :

1) if you rather use the sidebar-page template that comes with the theme, to control if and when to show a sidebar on a static page, simply don’t edit page.php, and remove

|| is_page()

from that line.

2) Zeaks pointed out that the code also effects single attachment pages.

if you want the sidebar in these pages, edit image.php and add

<?php get_sidebar(); ?>

before the ‘get_footer’ line; also adapt the style of

.image-attachment div.attachment

.

if you want your single attachment pages without sidebar, change to:

if( (is_single() && !is_attachment()) || is_page() ) :

PPS

If you don’t like coding, please do still create the child theme; however, for the rest, there is a plugin available:
‘Twenty Eleven Theme Extensions’

The core trick to generate different css classes for posts in the first coliumn, the second column, and the last column:

<?php $column = ($column == '') ? 'first' : (($column == 'first') ? 'middle' : (($column == 'middle') ? 'last' : 'first' )); ?>

This line of code needs to be within the loop, just before the post div.

To achieve more or less the same, you could obviously also use a counter variable and the modulus operator, as i have elaborated on in my earlier article ‘More-Than-Zebra style WordPress loop’. However, the above method is simpler and easier to apply within a single line of code.

The second step is to add this as a css class to the post div:

a – assume a theme without the use of ‘post_class()’; the typical opening div would look like:

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

This is changed into:

<div class="post <?php echo $column; ?>" id="post-<?php the_ID(); ?>">

b – in a theme using the ‘post_class()’, the new code would look like:

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

Third and last step: to tell the browser what to do with the new css classes, add some styles to style.css of the theme:

/* .first, .middle, .last styling of posts on home page for three column */
.first, .middle, .last { width: 32%; float:left; clear:none!important; }
.first { margin-right: 2%; clear:both!important; }
.middle { margin-right: 2%; }

Final details depend on the existing theme.

edit & ps:
if you just want to mark the first post in each row – for instance to add the ‘clear:both;’ and a different margin there – try to work with:
(example for 5 columns)

<div <?php $column = ($wp_query->current_post%5 == 0) ? 'first' : ''; post_class($column); ?> id="post-<?php the_ID(); ?>">

You know what i mean – showing up in your comments for all those without a gravatar?

Give them the push and create your own design, supporting your own branding.

Here is how it is done:

add_filter( 'avatar_defaults', 'newgravatar' );
function newgravatar ($avatar_defaults) {
    $myavatar = get_bloginfo('template_directory') . '/images/own-gravatar.jpg';
    $avatar_defaults[$myavatar] = "Own";
    return $avatar_defaults;
}

Add the code to functions.php of your theme; get creative with your graphic; upload it into the images folder of your theme (you might need to adjust the code, if your theme images are in a different folder), and activate it as the new default comment avatar.

Life without Mystery Man will never be the same …

add_filter( 'avatar_defaults', 'newgravatar' );
function newgravatar ($avatar_defaults) {
    $myavatar = get_bloginfo('template_directory') . '/images/own-gravatar.jpg';
    $avatar_defaults[$myavatar] = "Own";
    return $avatar_defaults;
}

<?php
foreach(get_categories() as $all_cat) {  $cat_ids[] = $all_cat->term_id; }
 $this_cat = get_query_var('cat');
 $this_cat_position = array_search( $this_cat, $cat_ids ); ?>
<div>
<div>
<?php $prev_cat_position = $this_cat_position -1;
 if( $prev_cat_position >=0 ) {
 $prev_cat_id = array_slice( $cat_ids, $prev_cat_position, 1 );
 echo '<a href="' . get_category_link($prev_cat_id[0]) . '">&laquo; ' . get_category($prev_cat_id[0])->name . '</a>'; } ?>
</div>
<div>
<?php $next_cat_position = $this_cat_position +1;
 if( $next_cat_position < count($cat_ids) ) {
 $next_cat_id = array_slice( $cat_ids, $next_cat_position, 1 );
echo '<a href="' . get_category_link($next_cat_id[0]) . '">' . get_category($next_cat_id[0])->name . ' &raquo;</a>'; } ?>
</div>
</div>

the above has a commonly used html structure to help with formatting.

The caption shortcode function adds a 5px wide space to the left and right of the image; and outputs the new calculated width as in an inline style in the attachment div.

For WordPress users, a familiar picture which you can only influence within limits by avoiding a background color for the attachment div.

However, if you want to have a slim contempory design and a background color behind the caption text, this would simply not work.

You need a fix.

The code below can be added to functions.php of your theme to allow you to set the frame width on your captions (sitewide) to any amount you like.

You need to adapt a few .wp-caption styles in style.css of your theme, after you have successfully added the code – that is all.

There you have your new contempory slim image caption design.

add_shortcode('wp_caption', 'slim_img_caption_shortcode');
add_shortcode('caption', 'slim_img_caption_shortcode');
function slim_img_caption_shortcode($attr, $content = null) {
 // Allow plugins/themes to override the default caption template.
 $output = apply_filters('img_caption_shortcode', '', $attr, $content);
 if ( $output != '' )
 return $output;

 extract(shortcode_atts(array(
 'id'    => '',
 'align'    => 'alignnone',
 'width'    => '',
 'caption' => ''
 ), $attr));

 if ( 1 > (int) $width || empty($caption) )
 return $content;

 if ( $id ) $id = 'id="' . esc_attr($id) . '" ';

 $frame_width = 0; // frame width in pixels per side //

 return '<div ' . $id . 'class="wp-caption ' . esc_attr($align) . '" style="width: ' . ( 2 * $frame_width + (int) $width) . 'px">'
 . do_shortcode( $content ) . '<p class="wp-caption-text">' . $caption . '</p></div>';
}

edit: added the css class .wp-caption-text

Another step to total freedom of design …