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.

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 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 …

This would work similar to the category widget with the setting ‘hierarchical’ – only that for each category, all the post titles are listed with links to the individual post.

This is the code:

<?php
/*****************************************************************
*
* alchymyth 2011
* a hierarchical list of all categories, with linked post titles
*
******************************************************************/
// http://codex.wordpress.org/Function_Reference/get_categories

 foreach( get_categories('hide_empty=0') as $cat ) :
 if( !$cat->parent ) {
 echo '<ul><li><strong>' . $cat->name . '</strong></li>';
 process_cat_tree( $cat->term_id );
 }
 endforeach;

 wp_reset_query(); //to reset all trouble done to the original query
//
function process_cat_tree( $cat ) {

 $args = array('category__in' => array( $cat ), 'numberposts' => -1);
 $cat_posts = get_posts( $args );

 if( $cat_posts ) :
 foreach( $cat_posts as $post ) :
 echo '<li>';
 echo '<a href="' . get_permalink( $post->ID ) . '">' . $post->post_title . '</a>';
 echo '</li>';
 endforeach;
 endif;

 $next = get_categories('hide_empty=0&parent=' . $cat);

 if( $next ) :
 foreach( $next as $cat ) :
 echo '<ul><li><strong>' . $cat->name . '</strong></li>';
 process_cat_tree( $cat->term_id );
 endforeach;
 endif;

 echo '</ul>';
}
?>

The first step is to find all top level categories (generated in alphabetical order) – which is simply done with the wordpress function ‘get_categories()’ and by checking if the category has a parent.
Caveat: because the code is checking for top level categories only, you can’t directly use the parameters of ‘get_categories()’ (see the Codex, the mostly unread documentation of WordPress) without some customization of the top section of the code.

The second step is to show the titles of all available posts for each top level category, linked to the full individual post; done with ‘get_posts()’ and ‘get_permalink()’.

The third step is to find possible direct child categories for this (top) category; done with the ‘parent’ parameter of ‘get_categories()’.

Then step 2 and 3 are repeated until all possible categories are dealt with.

edit 11/06/2011: parameter corrected.

A basic structure to arrange posts into three columns:

<div id="column-wrap">
<?php $count = 0;

while(have_posts()) : the_post(); ?>

<div class="box<?php if( $count%3 == 0 ) { echo '-1'; }; $count++; ?>">

<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
<!--and other output of the loop -->

</div>

<?php endwhile; ?>
</div><!--end column-wrap-->

The minimal styles needed for the three columns:

.box-1 { float:left; clear:left; width: 30%; margin-left: 0; }
.box { float:left; width: 30%; margin-left: 3%; }

Advertising does not get the same attention all over your page, as this report shows, some areas are ‘hotter’ than others, and the top of your content is one of the ‘hottest’.

Many of you insert the ‘more-tag’ after a short introductionary part of your content when writing your articles – usually to keep the design of the home page clean and easy to navigate.

When  the reader clicks on the ‘continue reading’ button, this already proves that the article has so far captured his attention – and the reader is more likely to follow any targeted advertising links, particular if these are seamlessly integrated into the main post content.

And the ‘more link’ will jump right into the position where the text on the home page ended.

It is your task to create the adsense so that the colors and design of the ads match the design of your post page.

The technical part: add this code into the template file functions.php of your wordpress theme; and replace the adsense code with your own:

add_filter('the_content', 'adsense_added_at_more_tag');
function adsense_added_at_more_tag($text) {
if( is_single() ) :
$ads_text = '<span>
<script type="text/javascript"><!--
google_ad_client = "pub-0123412341234123";
/* personal_development */
google_ad_slot = "1234512345";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</span>';
$pos1 = strpos($text, '<span id="more-');
$pos2 = strpos($text, '</span>', $pos1);
$text1 = substr($text, 0, $pos2);
$text2 = substr($text, $pos2);
$text = $text1 . $ads_text . $text2;
endif;
return $text;
}

You can then add some styling such as alignment by using the css class .adsense in style.css of your theme:

.adsense {
display:block;
width:100%;
text-align: center;
background: #f8f8f8;
}

The code builds on this article I posted earlier.

It uses the custom field with the key ‘cont_read’ to hold the custom text.

Add this code to functions.php of the theme:

/* Twenty Ten custom 'continue reading'
/
/ custom field ($key = 'cont_read' ) dependant 'continue reading' text
/ alchymyth 2010
*/
class Transformation_Text_Wrangler {
function reading_more($translation, $text, $domain) {

global $post;
 $cont_read = get_post_meta( $post->ID, 'cont_read', true );
 if( $cont_read ) :
 $cont_read = htmlentities($cont_read, ENT_QUOTES);
 $translations = &get_translations_for_domain( $domain );
 if ( $text == 'Continue reading <span>&rarr;</span>' ) {
 return $translations->translate( $cont_read . ' <span>&raquo;</span>' );
 }
 return $translation; // custom field value
 else :
 return $translation; // standard text
 endif;
 }
}
add_filter('gettext', array('Transformation_Text_Wrangler', 'reading_more'), 10, 4);