Pack your WordPress theme with the necessary CSS

WordPress themes are being a great online resource for everybody to use, modify and share. This applies to GPL themes only though. However, in order to offer our online neighbors good themes that they will be happy using, theme developers, including me, should take care of some peculiar aspects in themes such as the use of CSS code. Along with WordPress theme evolution, some default CSS code needs to be included in very theme so that certain in-built features work well. This is mostly the case of images, but not only.

In WordPress 2.5 several classes for aligning images and block elements like DIV, P, TABLE etc. were introduced.Every theme should have these CSS classes – you can alter the style if need – in its style.css. The same classes are used to align images that have a caption, introduced in WordPress 2.6. Three additional CSS classes are needed for the captions, together the alignment and caption classes are:

.aligncenter, div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
.alignleft {
float: left;
.alignright {
float: right;
.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
/* optional rounded corners for browsers that support it */
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;

Additionally, there are a few more WordPress CSS classes that you may optionally wish to style because WordPress generates them by default. I make use of most of them in my themes and I suggest very body uses them in their themes. There they are:

.categories {...}
.cat-item {...}
.current-cat {...}
.current-cat-parent {...}
.pagenav {...}
.page_item {...}
.current_page_item {...}
.current_page_parent {...}
.widget {...}
.widget_text {...}
.blogroll {...}

Did you find this information helpful? Do you have anything else to add? Your opinion is very much appreciated.

Baki Goxhaj
I’m a web consultant specializing in WordPress. I love elegant solutions, quality code and a good laughter.
You may also like
Assign author(s) to a WordPress post programmatically
Assign Authors or Co-authors to a WordPress Posts Programmatically
php type casting
Access an object as an array in PHP
  • Man and Van Isleworth Apr 6,2010 at 4:53 am

    great information. It is really useful and worthy to read. I’m really having fun reading your articles.

  • BANAGO Apr 13,2009 at 7:46 pm

    Yes, that’s true, good written CSS would make the life of every developer easier and the experience of every visitor nicer. Thanks of your time Romeo.

  • Romeo Apr 13,2009 at 5:07 pm

    Nice post.
    I think a good writen CSS is helpfull to all. So we can modify it and make the template look different from the default one.

Leave Your Comment

Your Comment*

Your Name*
Your Webpage