It is exactly a week since I introduced my new WordPress theme here. At that time, I had promised that I will write on how I went about designing this theme. In this post, let me try to explain how you can build your own WordPress theme using some free sources and tools (I will not be giving a programming lessons or code samples here but will explain the logical steps involved in executing a theme project)
Who can build a WordPress theme?
Anybody who has some basic programming experience (HTML/PHP/CSS) and aesthetic sense can build a basic theme. However, one needs to be a good web designer in order to build themes that has professional looks and features.
Ten steps to build your WordPress theme
The following are the logical steps involved:
#1 Write down your requirements
The very first step to build any piece of software is to compile the requirements. In this step you have to really go down to the finer details of what all information you want to show on your blog pages (mainly the homepage, individual posts-pages, archives and search results). Typically you can arrive at a list of things that you want to show on your blog by asking a few questions yourself or by getting inspired by what you have seen on other blogs.
#2 Visualize them on a piece of paper
Once you have the raw list of requirements, you might want to draw your blog layout on a piece of paper (I actually did it) or by using a free tool like MS Paint. Usually it is good enough to draw the floor plan of the homepage alone and this is the base for what you will code. Other pages are typically simple and more standardized and can be derived out of the homepage basic elements. My floor plan looked something like the picture shown below:
#3 Pick a base theme
Once you have the homepage floor plan, you need to pick a cleaner-lighter free theme that is structurally the best match for your requirements. I would like to stress on the structural match because better the fitment, lesser you will code. You could use something as generic as the WP Framework theme but for building my theme I used one of the themes (connections & lean magazine) from the WP theme designer. Basically I wanted to pick the lightest possible code base to start with. Please note that while picking a base theme, you should not get distracted by the visual lightness of the theme but concentrate on the structural aspects. As a matter of fact, I used a magazine theme as the base to build this theme. The following would be some of the criteria to pick a base theme.
- Minimal number of php files each of which is not heavy
- Sidebar, header, footer etc structurally match – close what you have in mind. Please note that adding an additional sidebar is not that difficult
- Basic styling and color scheme matches with your preferences
- Easy to discard unwanted stuff, most widgetized themes are good that way
- XHTML/CSS2 compliant code base. If the theme code is already compliant, further job is easier
#4 Clean up and enhance the structure as per #2
The next step is to directly get rid of the unwanted stuff in your theme. At first, you have to remove unwanted widgets and then get rid of anything like animations, badges, thumbs, backlinks to the designer etc. Most of the theme demos would have used a lot of colorful and heavy media for marketing purposes.
Once you have cleaned up the theme, you can add the desired structure to it by actually coding them or changing existing code. In most cases, you will end up making minimal changes to the index.php, header.php, sidebar.php and footer.php to achieve the desired structure. You will also work with the style sheet at this point.
You may need to worry about including the header metatags, feed – ping server tags etc at this point.
#5 Modularize or widgetize
After the structural changes are done to reflect the basic looks, you may need to enhance the modularity of the theme. For example, to add an AdSense block within your homepage, instead of inserting it directly into the home.php file, you might want to add it to another php file and include it within home. This kind of modular approach will help to maintain clean code base for future enhancements.
For step #4 and #5, you may use code samples from the web, WordPress support forums or even code from many of those free themes.
#6 Internal linking, accessibility and SEO Optimization
After building the basic structure and widgetizing, you need to worry about how the internal linking and accessibility can be improved. For example, you might want to show page navigation links in a certain way at a certain place or links to previous/next posts from individual posts etc. The accessibility aspects can be further enhanced by several plugins and widgets – e.g. related posts, recent posts. Also the placement of tag clouds and categories need to be taken care of at this point.
You should also decide whether you want to show categories and tags on posts and if so where should they appear etc. Basically internal linking is good for SEO as well as readability.
Further SEO optimization on header meta tags, post – sidebar headings can be done at this point of time.
#7 Fill widget contents
Now that most of the structural, linking and SEO changes are done, you may focus on filling the widgets and completing the basic visualization. These days, most of sidebar and footer contents are rendered as widgets and hence you need to make it a habit to store all your widget contents in one text file as a back up. This will help you to migrate to new themes or play around with the layout in the future.
Once the widgets are completely laid out, what you have is your floor plan implemented.
#8 Style it and brand
Now it’s time to put on make up to the structure. If your base theme had the color and style combination of your taste, you have less work here. Otherwise, you have some work here and this is the most tedious part of theme development, accoding to me. However, you have a wonderful Firefox addon – Firebug – to your rescue, that can be used to inspect the stylesheets of other blog themes and make desired changes to your own stylesheet.
I used some more free tools (listed below) to edit images and enhance some of them that came with the base theme. You can use free online tools, for branding purposes (logos, fav icons) and designing buttons and background images.
#9 Test it for compatibility and compliance
Once the branding and styling is completed, you can use the W3C XHTML validator and CSS validator online applications to check your code compliance. Also, you need to do some amount of cross-browser compatibility testing at this point.
Also, it will be a good time to enable your plugins one by one and test the integrated theme as a whole.
#10 Get feedback and evolve
Once you are ready, you may upload and test it further. You may want to take feedback from your readers and free review forums (e.g. Digital Point forums – Website review section). Usually, incorporating the feedback will be a continuous process.
I hope that I have explained the logical steps involved in theme development in a way that you understand. The basic theme development and customization cannot be explained in one post nor is it complete without code samples and design tips. However, I am concluding my post with some tips for those who are want to develop (customize is a better term) their own themes.
Tips for customizing your theme
- Never include unwanted or unused code in your theme files or style sheets. Also check for commented out code blocks that you may want to delete on release
- Keep checking for browser compatibility after each major feature enhancement
- Always keep ‘tagged’ daily backup of your development activities. I said ‘tagged’ (e.g. ‘header and footer completed’) because you might want to keep reverting to your previous day status due to some mess up
- As much as possible, use WordPress core functions to enhance a theme (rather than using plugins for everything)
- Avoid using tables, use divs and spans instead
- Test well on those browsers that your readers are using the most and target at least 90% of your user base. Typically, if you test on Firefox, Internet Explorer, Google Chrome, Safari and Opera, you should be fine. You might want to run a special test on IE 6.0 and immediate lower versions as well
- As much as possible, edit your stylesheets in a normal text editor to avoid code redundancy
Summary of tools
I used the following free tools to develop my theme.
- GIMP – Free image editing software
- Cooltext online tool to create buttons and logo
- Notepad to edit css, php files
- W3C validator for XHTML and CSS validator
- Firebug add-on to inspect and modify stylesheets
- Browsershots – online service to check older browser compatibility
- YSlow addon for Firebug to test the page download speed
- SubmitExpress metatag analyzer to check the meta tags
Good luck with your theme development and customization. If you need any free consulting help (as time permits), please feel free to contact me via the contact form.