WordPress Tutorial: Fixing image align problems in a third party WordPress theme

By David Hannes.

Recently one of my clients WordPress accounts incurred a glitch in aligning the image. Regardless of how my client configured each image using the WordPress control panel, and in spite of trying to patch the images with CSS, the images simply would not align properly. This was a problem.

The host provider at West Host took the time to login and test the application. Sure enough, they agreed with me that the images would not properly align, as instructed, by the application control panel.

The administrator suggested that this bug may stem from the theme being used and that it was not the WordPress software that was in error. Westhost’s hypothesis was a correct one.

I cross compared the source code of the page that was having issues with both the theme my client used and the default theme that comes with WordPress. What I discovered is that WordPress uses its own set of custom classes in order to align images. By default, WordPress expects to find the CSS classes “img.centered”, “img.alignright”, “img.alignleft”, “.alignright” “.alignleft” in every theme’s style sheet. If you use the WordPress software to configure alignment you may see any of the above classes assigned to the image in the source code.

HOWEVER…If you have an active theme installed that does not have these classes written into style.css, you too may incur a problem with your layout.

Note: the default template for WordPress; “WordPress Default 1.6” by Michael Heilemann, includes the file RTL Stylesheet (rtl.css). If you find that you are incurring a layout problem, you may wish to cut and paste specific code from rtl.css to your active theme’s style.css theme to insure that the missing CSS code is included without adversely affecting your active theme’s css.

NOTE: be sure not to overwrite code in your active theme’s css file with the default code as your theme developer may have intentionally developed css classes based on the default classes of the same name. Also, it is good practice to make a back up file of your active css theme before manipulating the stylesheet code. That’s just smart practice

Creative Developments is a multimedia website design company, video editing house and internet marketing company providing on-line solutions with a creative edge.

To inquire about our web design, video editing, website search engine optimization (SEO) and internet marketing services for your website or blog or business, call us at (480) 968-5096 or email us at dhannes@develop4u.com. Creative Developments is located in Scottsdale, AZ, servicing the entire Phoenix area, the East Valley, Maricopa County, Arizona and beyond.