WordPress Theme Development Checklist
Written by Stefan Vervoort on December 7, 2008As you might know, I have been diving into WordPress theme development and I’ve learned many tips and tricks along the way. I noticed I was forgetting about some small issues all the time.
That’s why I decided to make a WordPress Theme Development Checklist. Oh, and if I forgot about some things, be sure to let me know!
General
- Stylesheet should start with these codes or your theme will not be recognized as WordPress theme.
/* Theme Name: The Name of your theme
* Theme URI: The URL where people can get more information
* Description: Description
* Version: 1.0
* Author: Your Name
* Author URI: Designers’ URL
* Tags: red, black, widget-ready (etc) */ - Download the Sample Post Collection to have a filled WordPress installation to start with.
- Theme preview image
- 240 x 180 pixels
- Name: screenshot.jpg, screenshot.png or screenshot.gif
- Widget ready themes
- Add rules to your Comments form
- Backwards Compatibility (WordPress version 2.5+ is alright I guess)
- CSS sprites for optimizing images
- WordPress PSD framework
Stylesheets
Make sure you have these stylesheets included with your theme:
- General.css
- Print.css
- Reset.css
- Browser specific stylesheet – ie.css
- Compressed Stylesheet?
Browser Compatibility
Test your theme in a number of browsers to make sure everyone sees the same theme. Use browsershots.org to get screenshots from your site in the most browsers. The most important browsers are:
- Firefox 2.0/3.0
- Internet Explorer 6
- Internet Explorer 7
- Google Chrome
- Safari
- Opera
Blog Elements
Every theme should have some elements every blog should have:
- Title/Logo
- Navigation of Pages
- Navigation of Categories
- RSS links
- Search Form
- Archives links
- Dates/Timestamps
- Comments
- Copyright message
- Past/Next links
- Advertisiments
Styled Everything?
You never know how bloggers will use your theme and therefore you have to style all HTML elements. Here are some elements you might not have thought of:
- blocknotes
- tables
- captions
- unordered lists
- ordered lists
- img
Pages
The basic pages you need to produce for a good template hierarchy:
- Index.php
- Header.php
- Footer.php
- Sidebar.php
- Single.php
- Archive.php
- Page.php
- Home.php
- Author.php
- Date.php
- Tag.php
- Category.php
- 404.php
Valid HTML/CSS
You can not validate your PHP files, so you have to go to your favorite browser and click the right mouse button > view source. You copy/past everything into the HTML validator.
- Style.css (CSS validator)
- Single.php (HTML validator)
- Normal
- With Comment/Without Comments
- Login Required/Non-required
- Password protected pages
- All other pages (categories/tags/authors/ etc)
Suggestions?
Remember, this checklist is not finished. Because I learn about WordPress theme development all the time, more things will be added as soon as I think of them. My question for you is:
Do you have suggestions that make this WordPress theme development checklist better?
PDF Version
Soon, I will also come up with a PDF version of this checklist so that you can print it and put it next to your computer when you are developing WordPress Themes.
Keep Updated!
Do you want to get noticed when the CheatSheet PDF version gets released? Be sure to subscribe to the RSS feed, or you can get the latest news delivered right into your mailbox.
This article is written by:
Name: Stefan Vervoort
URL: http://www.divitodesign.com
Description: I am a 18-year-old webdesigner and blogger from Waalwijk, the Netherlands. I also blog at WPTOY and work at DivitoMedia.
Loading ...
Thank you for this beautiful list! Stylesheets: Don’t you use the file style.css? Waiting for the PDF-Checklist…
I would recommend a blank unstyled theme (Sandbox or any of those starter theme packs) because styling from scratch is better in the long run (code maintenance etc.).
Do you really need all those different stylesheets? I tend to prefer optimization, and hence have a single stylesheet.
May I also add to the list above? Spriting, ie. combining multiple images into one and calling them with CSS cordinates.
An excellent list. Stumbled
[...] See the rest here: Wordpress Theme Development Checklist » DivitoDesign [...]
[...] Here is the original post: Wordpress Theme Development Checklist » DivitoDesign [...]
[...] Wordpress Theme Development Checklist » DivitoDesign This entry was posted on Sunday, December 7th, 2008 and is filed under Wordpress News. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. « WordPress-MU updated to 2.6.5 at Florent Thoumie WordPress.com Goes Gravatar Crazy « Blog « WordPress.com » [...]
Theme preview image should be named screenshot.jpg, screenshot.png or screenshot.gif. I would suggest it be at lest 300 pixels wide.
I love the sample post collection. I’ve been looking for them ever since. Thank you for this post.
[...] When you are developing Wordpress Themes, you have to take care small things you are usually forgetting about. This Wordpress Theme Development Checklist make sure you won’t forget anything anymore! DIRECT LINK » [...]
[...] Wordpress Theme Development Checklist » DivitoDesign. Tags: wordpress [...]
Great write up on a wordpress theme development. I’ve been in the process of developing my own theme, and have needed all the resources I can find on the process. I want to make the best theme possible and distribute it for free. Thanks for making that one step further.
[...] wordpress theme development checklist » divitodesign (tags: wordpress checklist development themes tips template guidelines via:mento.info) [...]
Really awesome. Brother is a designer (I’m more of a developer) I’ll send this along!
I’m going to be adding this to our standard operating procedure for developing Wordpress websites, spot on!
Wow! This is a very extensive list of things to do when developing your own wordpress theme. Some of the things I missed when I made my first theme, was not doing more css, and relaying more on html. Every time I code my own theme, I get better and better at it, by going more into the route of css.
Till then,
Jean
Hi
Before developing a theme it’s necessary to think it from different point of view which requires a lot of excersise, but thanks to word press which provides a bulk of idea beforehand.
http://www.marblehost.com
[...] Wordpress Theme Development Checklist » DivitoDesign [...]
Great list of things to do when creating a wordpress theme. I recently went through the process of getting one made because I wasn’t super comfortable creating it myself. Looks like I’ll follow this list for the next time I need a new design.
[...] divitodesign.com Salva e condividi questo [...]
Nice post of wp thames. This is really good tips to us.
This is a big of wordpress theme. The nice css and html thames of WP. Great post
[...] Wordpress theme development checklist Great list to make sure nothing is missing in your wordpress theme. [...]
It’s also worth mentioning try using *non-destructive* editting (where possible) for theme’s, as users might want functionality you decided to remove.
Tracked back to from here: http://www.presidiacreative.com/web-picks-5/
[...] Wordpress Theme Development Checklist [...]
We find creating word press themes a great, and exciting challenge. A PDF check list would be great. Thanks.
We use wordpress for our blog and we are just about to redesign our wp theme. This list will come in very useful. – Thanks!
Thanks for this handy checklist! I’ll definitely use it when will start creating my own theme.
[...] Wordpress Theme Development Checklist [...]
[...] Bookmarked a link on Delicious. Wordpress Theme Development Checklist » DivitoDesign [...]
[...] Bookmarked a link on Delicious. Wordpress Theme Development Checklist » DivitoDesign [...]
Our new LED nightclub lighting blog is made with Wordpress and we have decided to create our own theme as we couldn’t find a suitable one.
The pointers in this article will come in very handy – Thanks
We use wordpress for everything now – its so versatile when you get used to it. If you allow people to use your templates free of charge to include your link in the footer but dont encode the footer and embed hidden links as that will put people off using it in my opinion.
I hire time from time developer to make a wordpress theme for submission to theme websites to gain some links to my website. I think I will recommend him this checklist.
[...] Vervoort wrote a very useful article called “Wordpress Theme Development Checklist” so check it [...]