Wordpress - Post thumbnails and add_image_size

Want more control over post thumbnails in your Wordpress posts and pages?  Simple! Use the default theme 'TwentyTen' for this example..

In your page.php/single.php as an example, whilst in the loop, pop in the_post_thumbnail() - This will display the thumbnail specified when you add a Featured Image when creating your new post.  By default, this will output a 'thumbnail' size image as specified in your media settings, in the Wordpress admin.  But what if you want to change the size of this in your code..?  Read on..

Change the thumbnail size

To change the thumbnail size, open up functions.php, and at the bottom.. you need to enter the following code...

add_image_size(thumbname, width, height, crop)

The above code, change the attributes to what is needed.  So for example, if I needed a thumbnail in my posts, with a width of 200 x 100, which is hard cropped, I would use:

add_image_size('mynewsize', 200, 100, true) <-- for crop, use true or false.. true will hard crop...

Notice we have specified 'mynewsize' as the new thumbnail size... now, all we have to do is pop in, or amend the code in single.php/page.php to this:

Wordpress - Columns In Posts

Wordpress is fantastic, and an easy way to maintain pages and posts on your website using Wordpress's integrated editor.  One thing the editor lacks is a way to put columns in posts, to give you a magazine style layout.  One way to get around this is to use SHORTCODES in your posts, to specify where columns should lay.

Firstly, in your Wordpress theme folder, you will find functions.php.  Open this up, and at the bottom, add the following code:

## MULTI COMULMN PLUGIN ##
function column_shortcode( $atts, $content = null ) {
   extract( shortcode_atts( array(
      'width' => '45%',
      'padding' => '0',
      // ...etc
      ), $atts ) );

   return '<div style="width:'.$width.'; float: left; padding-right: '.$padding.'; display: inline;" class="post_column_1">' . do_shortcode($content) . '</div>';
}

function end_column_shortcode(){
return '<div style="clear: both;"></div>';
}

add_shortcode('column', 'column_shortcode');
add_shortcode('end_columns', 'end_column_shortcode');
########## END ###########

 

The code above adds shortcode abilities in your posts.  So now, after doing this, create a new post/page and try the following for a two column layout:

[column width="48%" padding="10pt"]

Column 1

[/column]

[column width="48%"]

Column 2

[/column]

[end_columns]

 

Now view your entry, you should see a two column layout.  You can do this for three column, even four column, just adjust the 'width' on each column shortcode.  This will help with your Wordpress layouts.  :)  Here at Big Pepper, we have used this method many times for our clients.