WordPress Themes - create your own Wordpress Theme

1 February, 2008 (15:00) | Blogging, Wordpress | By: clive
Okay, so you want to create your own WordPress Theme. You?ve looked around but can?t find a theme that does it for you so you have decided to write your own. Where do you start? Well how about at the beginning?


Get to know how WordPress functions. The best way to do this is to read the Templates articles on the WordPress site.


Draw up a rough plan of what your theme will look like. Your plan should cover:


Structural layout - Where do all the parts go?
Specific Elements - Will you have a calendar, comments, what parts will you include?
Template Modular Elements - Which templates will you use or add? Site map? Pages? A distinctly different single post page?
Graphics - What graphics should go where?
Colors - How many, how are they used, do they have a purpose or are just for show?
Fonts - How many and what sizes go where?
Space - Space is an important part of layout so how will you use space?
Itinerary - How and when are you going to do all this?
Personal use ? will you release this theme to the public? If your answer is yes, then you need to document your changes and additions for the users to follow.


You will need to know HTML, CSS and some PHP. Here are some useful references - a few of the resources you will need


Start With The Default or Classic Theme. These are both stable and well tested themes. They have a proven track record and they work faultlessly.  Here are a couple of useful references:


Site Architecture 1.5
Kubrick
Boren’s Anatomy of a WordPress Theme
WordPress Templates
Template Tags


Keep The Core References. Do not remove “default” WordPress CSS references! Keep the default elements of code within the Templates and CSS files and design these to change their look, but not to remove the code references. You can hide them, but don’t remove them. Just comment out the code you don?t want - leave the core coding in to accommodate the various needs of others who may want to use your theme.
Use the _e() function for echoing titles and headings within the template files to make it easier for the translation files to translate the titles into the site’s language.
Don?t change the identifiers, leave them as they are and if you add a new division or class identifier, name it anything you want, but make a note in the style sheet and template file that these are additions to the default. Make it easy for people to identify them more quickly.



Themes should be plugin-independent and not rely on a plugin to be installed in order to function. If you choose to include plugin support in your theme, here are some tips:


Ensure that the plugin has been fully tested.
Include the plugin or a link to the plugin.
Include specific instructions for installing and uninstalling the plugin to the Theme.
Include coding around any tags within the template that will allow the Theme to work even when the plugin is turned off. Some plugins have tags inside of the template files and if the plugin is not activated, the Theme will not display properly. It is therefore imperative to prevent the plugin from being detected in case it is turned off.
Be prepared to support questions about the plugin as well as your Theme.
Maintain an updated link and information in your Theme and site to the plugin, if that information changes.


Style ALL the Template Files. WordPress uses modular elements to make up an entire page. So don?t design for only one page (index.php for example) but all the pages.
If WordPress can’t “find” the modular part, such as the comment template, the layout and design might look weird. So bear this in mind when designing and have a look at these useful references:


WordPress Template Hierarchy 
WordPress Conditional Tags
The WordPress Loop
WordPress Templates
Theme Development


Style Sheet Structure. There are many opinions on how to layout the structure of a CSS style sheet. The most important point is that the layout makes it easy for users (and designers) to find the information they want and need, for information and to make modifications. There are no hard and fast rules about this. Consider what works best for you and the end user but keep your presentation consistent.


Consider the Details. Here are a few to consider:




Consistent and Standard Fonts. Add more choices to the font-family you would like used in your display. This will increase the likelihood of the user having that font available when your page is displayed. Also remember that there are other computer systems out there like Linux and Mac. Consider using fonts that will also work on these machines. Choose fonts that are readable and easy -to-read, keeping font-sizes large to yet sized to fit within your design.
Comment Comment Comment. Comments are part of code that helps the designer and the user figure out what is what. Help your users by commenting as much as possible to helps them find the different sections and use your Theme with ease.


Get to know the accepted standards. Check out these:


The World Wide Web Consortium
The Web Standards Organization

Ensure that your code adheres to these standards. Validate it and test it across browsers. Keep the code lean so as to end up with small file sizes. These load faster. Get rid of any non-essential TAB?s, spaces and double spaces.

Use shorthand for your CSS to optimise your code. Be aware that some older browsers may not handle this.


Make sure your codes and styles validate across the board. They have to meet the “strict” standards set by the W3C Organization and pass a variety of validations for CSS and HTML. Not all validators check for the same things so test your code with several validators. Also ask others to test-drive your styles or themes before you make them public. The Your WordPress section in the WordPress Forums is dedicated to checking out your site by WordPress volunteers. Here is a list of resources and information to help you with your validation.


You will have CSS and HTML bugs. It?s what happens when you work with code. Have a look at these resources to help you solve the many CSS, HTML, and browser bugs out there:


WordPress CSS Information and Techniques
CSS: Fixing Browser Bugs
CSS: Troubleshooting
Positioniseverything.com


Time to promote your Theme. Put all your Theme files, including a readme text file with information and description, in a zip file for easy downloading. If possible, provide two or more file compression types like RAR, ZIP, GZIP, etc. to maximize user choices. Include information on any custom tweaks, tips, plugins, or things the user must know in the readme file.
Go to the Using Themes/Theme List and find the appropriate category for your Theme. Post a link to a page on your site with the following:


Demo or Screenshot of various page views
Description
Downloadable zip file

It is also a good idea to add the name and keyword description of the Theme to help users find your theme.
Post a note about your new Theme on the WordPress Forum under Themes and Templates. Make sure that you describe the Theme. Use lots of keywords to help users find your theme. Include links to your Theme and the downloadable zip file.
You can also check the other lists for Theme Resources on the Using Themes article and check there for instructions on adding your Theme to their resource list.
You should provide support for your Theme on your website. Include a link to your site in the readme.txt file as well as in the Theme. Also check the Forum frequently to see if people are having problems with your Theme. Try and help them and update your Theme if necessary. If you update, please add a note of the update with the version number in the Forum and on the Theme List in the Codex.
Looking for information on WordPress Plugins? Have a look at this interesting article.