Adjusting Caption Frame Width

WordPress captions come with a fixed frame which is set in the wordpress core file ‘media.php’ in the ‘wp-includes’ folder.

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 …

PS – important:

Since wp3.7, there is a filter on the additional caption width;
from /wp-includes/media.php caption shortcode section:
$caption_width = apply_filters( 'img_caption_shortcode_width', $caption_width, $atts, $content );

Adding a filter function for it in functions.php of your theme should help to remove the extra 10px from the front wp-caption size;
example:

add_filter( 'img_caption_shortcode_width', 'slim_img_caption_shortcode' );
function slim_img_caption_shortcode( $caption_width ) {
return 0; 
}

this will replace the above suggested code, which stopped working with the latest wp versions.

Unfortunately, this filter is not applied to the styles in the visual editor.

Hierarchical Category List with Post Titles

If your wordpress site is organized with categories, it might be very useful to have a template to show an organized list of all categories with the associated posts.

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.

edit 10/02/2012: a slightly different code – without the post lists – for a nested hierarchical category list with links to the category archive and an edit link for the category: http://pastebin.com/TTvYPKPH – initiated by this WPSE question

Easy Coding for WordPress: Posts in 3 Columns

Sometimes it is the simple things that are hard to find.

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%; }

  1. <div id=”column-wrap”>
  2. <?php
  3. $count = 0;
  4. while(have_posts()) : the_post()
  5. ?>
  6. <div class=”box<?php if( $count%3 == 0 ) { echo ‘-1’; }; $count++; ?>“>
  7. <a href=”<?php the_permalink(); ?>“>
  8. <h4><?php the_title(); ?></h4></a>
  9. <!–and other output of the loop –>
  10. </div>
  11. <?php endwhile; ?>
  12. </div><!–end column-wrap–>
  13. —————-
  14. STYLES – EXAMPLE
  15. .box-1 { float:left; clear:left; width: 30%; margin-left: 0; }
  16. .box { float:left; width: 30%; margin-left: 3%; }