WordPress Themes – Standards and Checklists (beta)

This article was originally created (in parts) for rtCampers to guide our trainees and follow the best CSS and design practices. It is by no means complete but hopefully it will evolve over time as we get more mature with WordPress, CSS and web-design in-general.

The goal of this article is to create a master list of standards that we want to follow while designing wordpress themes. Comments & criticism – awaited!

#1. Always Start with CSS-Reset

CSS-Reset is a snippet of code that should be always pasted in your “style.css”.

CSS-Reset clears (nullify) formatting on all HTML tags. Each browser has its own default formatting for most HTML tags and they vary from browser-to-browser. CSS-Reset brings all browsers to common ground! 😉

There are many variation of CSS-Reset, but one I have always used is pasted below. It is from Stakers theme by Elliot Jay, which has been starting point for most of my themes. I will talk about stakers theme in detail some other day!

[css]
/* RESET /
/ —————————————– */

/* Global reset /
/ Based upon ‘reset.css’ in the Yahoo! User Interface Library: http://developer.yahoo.com/yui */
*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0 }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
ol, ul, li { list-style:none }
caption, th { text-align:left }
h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal }
q:before, q:after { content:”}

/* Global reset-RESET /
/ The below restores some sensible defaults /
strong { font-weight:bold }
em { font-style:italic }
a img { border:none } / Gets rid of IE’s blue borders */
[/css]

#2. Don’t forget to add CSS for WordPress Generated classes

WordPress post-editor adds some classes like .alignleft, .alignright to the content. Also some template tags and standard widgets generates additional CSS classes that may be useful. More details about this can be found here.

At bare minimum you should have following CSS added in your theme.

[css]
.aligncenter,
div.aligncenter { display: block; margin-left: auto; margin-right: auto;}

.alignleft { float: left;}

.alignright { float: right;}
[/css]

Also note coding style of above CSS block is different than style given on WordPress codex page.

Its matter of personal choice. You can see my CSS coding style here.

#3. Javascripts in WordPress Theme

These days tabs and sliders are quite common among wordpress themes! Most of this fancy stuff is done using jQuery, its plugins and/or some extra javascript files.

Best way to include javascripts in wordpress theme is:  wp_enqueue_script( ) function.

Always create your own javascripts files under “js” folder in your themes directory.

For javascripts library, before adding/uploading a copy to your theme directory, check list of javascript libraries that comes with wordpress. All these default libraries can be included in your theme merely by calling wp_enqueue_script( ) function. There is no need to upload them separately in your theme. 😉

#4. Use Proper Test Data

To properly test a theme you are developing, you need test-data that covers most commonly used type of contents.

By default, when you install a new wordpress it creates a “Hello World” post, a comment on that post, an “About” page and few more data which is completely useless if you are developing a theme. Also exporting data from real big blog for testing purpose may not be good idea. We need test-data which must have lots of variations rather than larger number of posts.

For this:

1. Always test your theme with standard test data given here.
2. Above link open (or downloads) a XML file. Save it on your disk.
3. Then log into wordpress admin side. Go to “Tools >> Import >> Wordpess” and select XML file.
4. Its good idea to check “Download and import file attachments” checkbox on next screen

Thats all! Now check each link/page on test site in each browser!

Standard test data and CSS-Reset will save your considerable time that goes wasted in support phase.

#5. Final Testing & Checklist!

The biggest and most extensive checklist with plenty of test-cases can be found on wordpress codex.

Any theme we develop must be tested against that checklist.

#6. Additional Work for Public Themes

In case you want to release your theme for public on official wordpress.org theme repo, then make sure you follow these guidelines.

For GPL compatibility, you can simply put the following 2 lines in a comment block in top-portion of your style.css file.

[css]
/* The CSS, XHTML and design is released under GPL:
http://www.opensource.org/licenses/gpl-license.php */
[/css]

(to be continued…)