ThemeDreamer

WordPress 2.5 introduced a convenience feature for inserting images and wrapping text around posts. The feature appears when you click on the ‘Add an Image’ icon on the Add media toolbar. Unfortunately, not all themes support this feature, but adding it to your own theme is a snap as they are simply CSS rules that can defined inside of style.css.

You can easily find these CSS definitions needed to support WordPress 2.5’s convenience features. Just open the style.css file from the default ‘Kubirck’ theme that comes with WordPress 2.5 and above. Its NOT included in the Classic theme, but could just as easily be added.

The CSS rules are defined in img.centered, img.alignright, img.alignleft, .alignright, and .alignleft. You can simply copy and paste these definitions into your own style.css. By doing so, you will have instantly updated your theme for WordPress 2.5 compatibility, increased value to your theme, and made posting a whole lot easier for your end users.

Testing this functionality is even easier by using the nearly identical icons located on the ThemeDreamer toolbar. Simply click the image button to ensure the an image is being shown in your simulated post, and then select an alignment mode (one of the red block icons next to the image button on the toolbar). ThemeDreamer will automatically simulate an image post with the given alignment inside of Dreamweaver’s Design View. This is the equivalent of a user selecting one of the alignment option circles in Add an Image dialog in WordPress.

The image alignment buttons in ThemeDreamer’s toolbar that resides inside Dreamweaver correspond with the options in WordPress’s Add an Image dialog. Use them to test your theme in Design View.