Build your own (well, almost) WordPress theme!

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:

WordPress theme layout

#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
  • Has only one stylesheet file and very less javascript
  • 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
  • Be stingy on images, comments within the HTML code and javascript variable/function name length. You will make your theme superfast if you take care of this part
  • 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.

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.

Comments

  1. Hey Ajith
    Your theme is looking great not. If possible add a footer to utilize the space more. Footer has also great importance for SEO (You can utilize that Space for SEO purpose).

    Harsh Agrawal´s last blog post… How to form a community out of your blog?

  2. Great article Ajith. I just activate my new & unique theme :) we both had new theme with a week gap :)

    TechZoomIn´s last blog post… TechZoomIn In New Theme..!

  3. Toan Nguyen Minh :

    Your theme is very nice but I think you need add some widget at footer.

    Toan Nguyen Minh´s last blog post… My Twitter Had Been Suspended

  4. Hey! Nice information on how to go about creating your very own wrodpress theme!

    Thanks
    Sandeep

    Curious Little Person´s last blog post… How to Fish for Post Ideas!

  5. Ricky :

    Really informative article.Nowadays ppl don’t prefer right sidebar. Theme looks good but you still need to improve a bit.

  6. I agree with Harsh that you need to add something to your footer which will make this theme a complete one.. But the steps which you have explained above are very neat and easy to understand. Thanks for sharing.. :)

    Yogindernath´s last blog post… QTP Certification – Review your Skills: Q. 101 to 110

  7. Harish | Blogging Kid :

    To be honest I don’t know anything about building a wordpress theme. But it sounds good. Thanks Ajith :)

  8. @Harsh, Thanks buddy, I am on my way to widgetize the footer as well. However, I need to make the total links on homepage to something like 100 and hence footer is lean for now.

    @Lax, I checked your theme. Super! Really unique and refreshing

    @Toan, thanks for that tip, will do that as time permits :)

    @Sandee[, thanks. This is only one part on how to go about planning and executing. Coding and styling it needs some effort which cannot be summarized in a single post.

    @Ricky, thanks for your feedback buddy. Did you mean ‘left’ sidebar??

    @Yoginder, I think most of you agree on the footer part :) That’s a solid feedback.

    @Harish, it’s fun Harish… You will get there if you have some aptitude towards programming.

    Thanks all for your feedbacks!

  9. Nihar :

    Ajith,

    Great post. This will help for those who want to create thier own customized theme.

    Thanks for this post.

    I never used GIMP and Cooltext. will check those out.

    Also why not use notepad++ or editplus.

    Using notepad is bad for a geek like you :)

    Nihar´s last blog post… How to Highlight Special Paragraphs or Sentences in the post or article

  10. You make it sound so simple! I’ve been fiddling around with a pre-bought WordPress theme for the past six months and have made very little headway. Definitely need to start learning some more of the basics this side!

  11. I will be trying to do a theme soon starting from an existing simple one… just for fun. Thanks for the tips. Gonna take these into consideration.

    Kurt Avish´s last blog post… Blog Trottoir Featuring Yashi

  12. @Nihar, thanks for the enouragement buddy. As for the editor part, I have been using PHP-ed before the PC got wiped out :) In fact, Notepad is good enough for most my work though life could be better…

    @Jacques, CSS/PHP basic work is not that difficult. You can give it a shot

  13. Richael Neet :

    That is a good account of how to create a WP theme, though the coding part is something that might take a while to comprehend for non-programming minds 😉

    I have recently started classes on Joomla template creation and its quite interesting too. :)

  14. A very long tutorial but useful. Now I know WP framework can build wp theme ourself, am I right? If I’m going to build my own theme, I’ll definitely read this post! My current theme is built by my friend, so I’ve yet to build 1 for myself. You have a very nice theme Ajith! :)

    Regards,
    Lee

  15. Sushil :

    Hi Ajith – Good set of tips. Been wanting to do some theme customizations on my own blog – but havnt felt motivated to do the tough lifting. So been using a theme that gives a lot of options that I have been tweaking.

    What is the decision point at which you would say it would be better to make a custom theme than use the options of an existing one ?
    How much of PHP does one need to know to get into making a custom WP Theme ? I ask because I havnt done anything with PHP till now.

    Sushil´s last blog post… Are you looking for a Diesel Hatchback ?

  16. Raju :

    superb post Ajith. Wonderful guide :) Stumbled!!

    Raju´s last blog post… Top 10 Free Online PDF Creators

  17. @Richael, 😆 Coding is definitely something that’s more technically demanding (and a prerequisite here) than the planning aspect. If I touch on that part, it may take several posts together but I would love to do it sometime.

    @Lee, thanks for your comment. WP Framework is definitely a highly modular base for theme development. However, I did not use it as I wanted mine to be very very lean.

    @Sushil, thanks buddy. As for the decision part, it is more about branding, ego and customized SEO requirements. If you go with popular themes like Thesis, the SEO part may be taken care of but you might want to still customize it. A lot of bloggers, still love very basic and simple themes though.

    @Raju, thanks for the stumble buddy.

  18. Ruchi :

    You explained this in a very simplified manner, after sometime i would also try making my own theme, bookmarked it for future use.

  19. Steven :

    Thanks. This explanation will serve as a decent quickstart for me.

  20. I am still not satisfied with the theme I am using though it is closing to what I had been wanting to. will look at customizing one to suit my needs..but one needs to know HTML/PHP/CSS..which I do not have any knowledge…hence would have to settle down with the available themes :)

Speak Your Mind

*