How to Make a Wordpress Theme (in 5 steps)
Making a theme for Wordpress (or any other CMS) is just like creating a design for a regular website. Of course there are some things that you should consider, but still, the process is the same.
So How to make a Wordpress theme? Follow these simple steps:
1. Define Content Structure
Before you open up your graphics editor (like Photoshop), define your content’s structure in a treeForm style (easier to manage). You have to define the main categories of your blog, how many will there be? For instance, there is a big difference in having 20 categories or just 5.
2. Make a List of Features
Just like planning your content’s structure, define what kind of features/plugins do you want to have on your website. Define them by sizes, so that you will know how much stuff you have for your header, your sidebar and your main window. Don’t know what to put in the sidebar in order to fill the whitespace? Consider adding the Recent Comments Plugin.
3. Start Drawing
Now that you know the content for which you need the design, start drawing. One small piece of advice: consider SEO (search engine optimization) and Usability during the design stage. Don’t use custom fonts unless you are planning to use images. Don’t use text effects in Photoshop like “Smooth, Crisp, Strong” on your text, unless you are going to use that as an image. More on SEO in future articles.
Tip: After finishing the design, close it and don’t look at it for ~12 hours. Look at it the next day. Still like it? Good. No? Repeat process :)
4. Convert the Design into XHTML/CSS Code
This is important: Don’t implement the design in Wordpress right away. First convert it into a standalone .html + .css file(s). Make it work in all major browsers.
5. Implement the HTML and CSS blocks into your wordpress theme files
Now that you have a working sample of your design, it is much easier to implement parts of it into your Wordpress Theme files, located in /wp-content/themes/your-theme/.
And don’t forget: besides editting your theme files, you can also edit Wordpress default templates, located in the /wp-includes/ directory.
However, if you’re planning to sell / distribute your theme, don’t forget to provide instructions on what default templates you tweaked, otherwise the results could be messy.
That is all for now. In my next articles I will talk about SEO for Wordpress and other useful tips.
Tweet This
Digg This
Save to delicious
Stumble it
RSS Feed
8 Comments
Can you please write more about SEO for Wordpress in the next article? Thx :)
nice tips thanks..
Nice, simple, to the point. I love it. Sometimes, I think long-time bloggers forget that a lot of us are just starting and need a basic beginner breakdown. Great little piece.
@Gio: ok, I'll try. @Dawson: i'm glad you found it useful :)
Err, it's not so simple as that...For a Wordpress theme to be accepted (in the WP community) it needs to follow WP's guidelines which includes Tags, Licence support, screenshots, widget support...
@Best Blogs Asia: I didn't say you don't have to do that. All other rules apply, I just wrote about the logic of the process, not about every rule that theme developers should obey :)
those are great tips, i'm glad you addressed custom fonts, too many people don't realize that everyone doesn't have the same fonts, i wish they were universal, but they aren't. nice post.
Hard to understand for me.
0 Trackbacks
Trackback URL for this post: http://www.themescloset.com/2009/03/how-to-make-a-wordpress-theme-in-5-steps/trackback/
2 Pings
[...] Fuente: Theme Closet [...]
[...] Theme Closet [...]