WordPress Themes Blog Oh! Blog

Share on Facebook0Tweet about this on TwitterShare on Google+0Pin on Pinterest0Share on LinkedIn0

First Step :

  1. You should to have Webmaster editing tool (I use Dreamweaver)
  2. You should to have Graphcis editing tool (I use Adobe Photoshop)
  3. Important here, you should to have local webserver for a testing mode. (I use Xampp) Download and install Xampp now.

Second Steps :

  • Draw your WordPress theme layout. (Single column or 2 column or 3 column or 4 column)
  • Choose color (blue?, black?, white?, orange? etc)
  • Ok? done? now we go to the next steps. (I picked 3 column theme) Here is my layout.

Tutorial : Making WordPress Theme by examples #1

Open your Dreamweaver and create new HTML file and it should be like this.






Untitled Document





Now create your layout.


My Entry

End of html file






My First WordPress Theme




My Entry

Live view your HTML file here

Now your layout task is done! Tomorrow we learn how to add style to our layout. Subscribe our feed now 🙂

Share on Facebook0Tweet about this on TwitterShare on Google+0Pin on Pinterest0Share on LinkedIn0
  1. HGIT left a comment on March 31, 2016 at 12:38 am |

    PU gasket sealing equipment
    It can meet the demands of different manufacturer tablet and notch glues. Besides, it also has one-button switching function on the computer for the convenient of customer use.
    http://www.hgcx.cn/en/index.php?p=product_show&id=312&c_id=36&o_id=&lanmu=12

  2. HGIT left a comment on March 31, 2016 at 12:38 am |

    PU gasket sealing equipment
    It can meet the demands of different manufacturer tablet and notch glues. Besides, it also has one-button switching function on the computer for the convenient of customer use.

  3. Aris Designer left a comment on October 7, 2012 at 12:21 am |

    Dear Bob, Tutorialnya sangat bagus sekali, ini iformasi yg saya cari-cari, sampai-sampai sy searching di google make keyword bahasa inggris , saya sarankan mas Bob membuatnya Juga dalam bentuk CD video tutorial membuat theme WP dalam bahasa indonesia , saya yakin banyak yang membelinya, karna belum ada yg buat lho…

  4. klikcko left a comment on August 9, 2012 at 7:29 am |

    Hi my name is Johnny and i like your blog. It is very nice. The design is jus stunning.

  5. Levis left a comment on February 15, 2012 at 9:47 am |

    I am really impressed, I must say. Really hardly ever do I encounter a blog that’s each educative and entertaining, and let me tell you, you will have hit the nail on the head. Really great.

    Tuxedo Park dog walker

  6. Jack R. left a comment on December 10, 2011 at 2:06 pm |

    I thought about it, but I think it’s too hard for me. Thanks for the post anyway.

  7. Leonard Graham Wimer left a comment on September 29, 2011 at 3:02 am |

    Fantastic post and simple to understand description. How do I go about getting permission to share section of the article within my upcoming newsletter?

  8. Paulo left a comment on September 26, 2011 at 3:58 am |

    I think it will be nice to add other related tutorial in this one, like other examples of codes for the single.php or page.php template.

  9. Marcellus Picardi left a comment on May 20, 2011 at 2:42 am |

    When I originally commented I clicked the “Notify me when new comments are added” checkbox and now each time a comment is added I get four e-mails with the same comment. Is there any way you can remove me from that service? Appreciate it!

  10. Duane left a comment on March 27, 2010 at 8:21 am |

    Hey wheres the other tutorials? hehe nice job though

  11. Devin Walker left a comment on December 4, 2009 at 8:43 pm |

    Hey, good advice for a n00b like me. I’ve been trying to pimp my wordpress site out. Check out what I’ve done so far: http://www.dlocc.com No quite as cool as this. Although, I do like the brush metal bg.

    Dlocc

  12. Ernie left a comment on September 6, 2009 at 3:46 am |

    Wheres part 2???

    Great job!

  13. Robin left a comment on June 2, 2009 at 5:41 am |

    Well that was a lesson and a half. I’m not sure if I can do that but it’s very informative.

  14. Steveorevo left a comment on December 14, 2008 at 6:00 pm |

    ThemeDreamer v.41 is now out. Makes it a bit easier for Dreamweaver developers mod’ing WP themes.

  15. gorge left a comment on December 14, 2008 at 5:55 pm |

    thank you for this tutorial

  16. videoonlinego left a comment on November 17, 2008 at 5:48 pm |

    It is not out-of-date information? Because I have other data on this theme. http://video-online-go.ru/map.html

  17. bopdilly left a comment on November 16, 2008 at 6:28 am |

    Excellent site! I wish the owner to develop and please all! http://sex-free-online.ru/map.html

  18. Ken left a comment on October 9, 2008 at 7:19 pm |

    Hi,
    You did a great job writing down here a lot of good information.
    I’m not an expert in php and your advices really help.
    Now, I want to change my default wp theme (on my new blog – the old one is ok) in just one way: I want every post from index and achieve pages to has (read more) by default. Let’s say, they will can read only the first paragraph, or first 50 characters or something like this… not entire post in index.
    I really don’t like when the people can read with just one click on my home page, entire all (10) latest posts.
    Can you help me with this?
    I really appreciate!
    Ken.

  19. luxur furniture left a comment on July 5, 2008 at 5:46 pm |

    where I can find a tool wizard to build my theme of wordpress online?

  20. Shameless Plug left a comment on June 1, 2008 at 8:02 am |

    Bridges the gap between Dreamweaver and WordPress. Just open an exiting theme in Dw and hack away…

    http://www.themedreamer.com

  21. Squeaky left a comment on March 26, 2008 at 8:51 pm |

    Nice tutorial. Is the a second tutorial?

  22. Malaikax left a comment on February 29, 2008 at 10:42 am |

    Nice.. This helping me to create my own theme next. Thx for share. You are the best !

  23. Andy left a comment on December 19, 2007 at 10:58 am |

    Oh, and did not know about it. Thanks for the information …

  24. danny left a comment on November 26, 2007 at 8:05 am |

    Hi Jai,

    Please do continue this tutorial. It will help many 🙂

  25. wanmus left a comment on November 3, 2007 at 9:57 pm |

    wow…it’s looks like malayia will have many wordpress theme builder..it’s a good news..keep working

  26. samuro left a comment on November 2, 2007 at 5:14 am |

    I’ve never found wordpress themes tutorial like this. It’s really interesting, keep the good works. I am waiting for others your tutorial. Great Bob!

  27. Leanne left a comment on November 1, 2007 at 8:17 am |

    Just downloaded your theme to my new site! Where have you been…. I have been searching for days for a nice clean simple theme and you have them all…glad I finally found you – you have the best themes! 🙂

  28. reezluv left a comment on October 28, 2007 at 7:43 am |

    I like your tutorial..when the next tutorials?erm..I wish I will make some great theme just like you on eday..thanks

  29. rumblepup left a comment on October 22, 2007 at 7:58 am |

    I found you today. Great resource and great tutorial. Please come out with next one soon!

  30. vangardx left a comment on October 21, 2007 at 6:08 pm |

    keep it up..jom meriahkan theme2 dari malaysian

  31. iCalvyn left a comment on October 12, 2007 at 10:37 am |

    great tutorial, wish to have your next style step…

  32. komad left a comment on October 10, 2007 at 9:14 am |

    I was able to change the “Blue Box” text by editing the logo.psd file that’s stored in the images folder.

  33. kita left a comment on October 10, 2007 at 2:20 am |

    wahhh…tutorial yang bagus sekali….bila nak post episd 2 pulak…cepat ler update cikit erkkkk

  34. shery left a comment on October 10, 2007 at 1:17 am |

    thanks waiting for the next entries

  35. komad left a comment on October 9, 2007 at 10:27 pm |

    Dear Bob, I’m designing my site using your WordPress template, Blue Box. I was wondering how I can rename or remove the “Blue Box” text that appears on the blue banner located in the upper left corner of the page. Thanks for your help.

  36. geblek left a comment on October 9, 2007 at 4:39 pm |

    continue please…!

Leave a Comment

Your email address will not be published. Required fields are marked *

What Others Say

BannerJai was awesome to work with. A port of an ASPX/HTML site to Wordpress went seamlessly, and his recreation of our look and feel were fantastic - Kevin Webster

BannerJai is a talented, creative and an enthusiastic web developer who has worked consistently to deliver high quality websites for my businesses - James Eccles

  •   Let’s Talk

    "Thank you for visiting my website! In order to start a project with me, please send me information on your project so I can figure out how best to help you."

    "After your initial contact, I’ll schedule a quick one-on-one session via Skype to review the project and get to know you."
     Request a Quote
  Have Questions?   Hire Me

Send Me Your Questions

Tell Me About Your Project