Experience of creating WordPress theme

10.04.08

Filed Under: Web Design



Experience of creating WordPress theme

Creating a new WordPress theme for my own site is one of my target this year. If you been this website before maybe you know that previously I’m using free WordPress theme especially the beautiful Illacrimo theme. I like this free theme a lot and been using for quite a long time. However, I decided to take a step further to design a new theme for my own blog.

Develop a WordPress theme is not hard, but it’s not easy job too. Luckily there is a lot of resources out there especially the WordPress Documentation and Noupe’s Powerful Guide to master your WordPress that provide useful guidance to help developing a theme. But before comes to the coding, I sketched my idea on paper and design the layout with Photoshop.

Conceptualize and Design

I decided to use jeans texture as part of design when writing the post Jeans Texture Free Download. Then for the color bar and blog color scheme, I got my inspiration from traditional Japanese color. I want to achieve clean and uncluttered design so I decided to go for 2 column layout with big white space. Then also design the style for list bullets, blockquote, code and custom 404 design.

  • This is list #1
  • This is list #2
  • This is list #3

This is an example of a blockquote design.
Quoted text will be here.

This is an example of code style.
I might use this in future blog post
that require to show codes.

Creating template and testing

After finalizing the design, I slice out the graphics and start to code a static html before jumping into WordPress templates. For coding, I use Dayvan theme as a guidance to my design because we shares similar layout structure. I also use Illacrimo and Glossy Blue theme as part of the guidance too. Then I started to put all my codes into the templates files.

I created a sub domain to test the template whether it works fine or the other way round. With the guidance and readings previously, I spent two nights to turn the design into working template. I had some frustration moment when things gone wrong but I was able to solve it. Finally it is all done and the theme was activated on this Monday. Finally I have my blog with my own design on it! I am very excited and can’t sleep that night.

End note

Well, basically this is the process of creating my custom WordPress theme for my blog. This giving me confidence to work with WordPress and designing more themes in future. Indeed WordPress is a superb engine and it is easy to working with it.

But things just don’t stop here. I will continue tweaking my theme to make it better. If you have any comments and suggestion kindly please leave a comment below. Your comment is much appreciated.


Similar Posts:

21 Responses to “Experience of creating WordPress theme”
    SE7EN
  1. SE7EN

    In IE6 the sidebar is drop below the content
    Maybe it’s because of the width? I don’t know much about CSS :-S

  2. jayhan
  3. jayhan

    Hi SE7EN, i knew that too… Gonna fix it later :P

  4. Apple
  5. Apple

    Jayhan! This is a splendid theme. Well done. I was thinking of creating my own WordPress theme but don’t have much ideas lol. All in all, I love this 2 column clean theme.

  6. arman
  7. arman

    hey jayhan design is simple and clean!
    just one thing, the font is messed up in my computer dunno

    oh btw quick question,
    how do you make only the first post shown all and the other posts hidden?
    is it a plugin?

  8. jayhan
  9. jayhan

    @ Apple: thanks :D

    @ arman: yes, it’s a plugin call Homepage Excerpts

  10. Fath
  11. Fath

    Good job, Jayhan! Happy to see the born of another talented WordPress designer in WordPress community :)

  12. jayhan
  13. jayhan

    Hi Fath, your site looks great too.

  14. Fath
  15. Fath

    Auww, thanks :D I have a studio too at http://www.owastudio.com :)

  16. Website Design Templates
    jayhan
    Tony
  17. Tony

    Isn’t this just why we hate paypal!
    They know there’s a prioblem – their problem
    They hide it for 24 hours
    For 2 days e-commerce sites are being made to look like scammers.
    Finally they half admit it.
    Read about it yoruself here….http://launchworkshop.com/paypal-meltdown-creates-havoc-for-ecommerce-websites/

  18. Web Design Tutorials
  19. Web Design Tutorials

    Thx a lot for the nice tutorial and the psd – exactly what I was looking for!

  20. kabonfootprint
  21. kabonfootprint

    The more time that is spent dissecting, analyzing, and critiquing a design by the wrong kinds of people the worse that design gets. The same trend applies to the number of people involved in the design process.
    Thx a lot for infomation!

  22. fabletechnologies
  23. fabletechnologies

    very good tutorials and theme…..thanks a lot for such a grate site

  24. Sookwah
  25. Sookwah

    I can hardly believe what happened, I recently was so frustrated with trying to hire a genuine website designer until I came across this guy from Australia who really helped me with his Free information. You can get access to his free website design tips at http://www.EasyWebsiteCreator.com.au and see for yourself how good you think this guy is. Damn good if you ask me.

  26. Samson
  27. Samson

    Well done! Unlike the author of the topic ;-)

  28. gina michel
  29. gina michel

    Hey , you have a very good blog, its excellent information in its field. You have done a great job, keep doing it for to help, people like Myself.

  30. MBT Women Shoes
    mbt tataga
  31. mbt tataga

    Thank you for Posting & I got to read nice information on your site.

  32. You’re so cool
  33. You're so cool

    So with me. I would be grateful.

  34. Need!
  35. Need!

    I want to download this theme: (

Leave a Reply

Subscribe to comments feed RSS.