Knowing how to turn any web template into a WordPress theme broadens your choice of designs to use for your blog. I created this video tutorial for someone like me a few months back: eager to attempt turning a great looking open source web template into a WordPress theme but not knowing how to start. If you want to read a tutorial based on the screencast, click here.
For the screencast, I turned this open source web template into this WordPress theme. The video tutorial ends with the creation of the different WordPress theme files. The part when I activated the theme, tweaked it, and fixed errors wasn’t captured as I ran out of virtual memory. I just included notes on the tweaking after the screencast below.
Some notes:
You might notice that when I copied codes for the header.php, the opening tag < wasn’t highlighted when I selected the codes for copying. I only spotted this when I activated the theme when the first line of the header code was printed on the page. I added the < and it fixed things.
You might also notice that I deleted the * in the first line of the stylesheet when I included theme information for the theme. When I activated the theme, the column dimensions went awry and it took me several minutes to fixed this. The theme was fixed when I inserted the * again in the style sheet.
When troubleshooting, view the HTML code of your page and compare it with the HTML code of the web template you started with. Check for differences to spot errors and copying and pasting and with the way you used the WordPress Loop for the presentation of articles.
58 responses so far ↓
How to convert any web template into a WordPress theme at Leon Kilat ::: The Cybercafe Experiments // Sep 1, 2006 at 3:50 pm
[...] Converting a web template is fairly easy if you take the time to learn how to do it. I wrote this guide for someone like me a few months back — eager to use a great looking web design and yet not knowing how to start converting it to work with WordPress. If you want to view a video tutorial on how I turned this open source web design into this WordPress theme, click here for the blog post. [...]
Converting Any Template Into a WordPress Theme by Blogging Pro // Sep 2, 2006 at 1:08 am
[...] Max also made a tutorial video available, which may appeal to you better if you’re more visually-oriented. [...]
Adaptar plantillas en themes para WP — Vidablog // Sep 2, 2006 at 1:13 pm
[...] de como adaptar plantillas web en themes para WordPress. Muy útil para los que comienzan. Septiembre 2, 2006 Diseño, MiniEnlaces,WordPress [...]
links for 2006-09-03 « kobak del.icio.us könyvjelzői // Sep 4, 2006 at 8:53 am
[...] Turning a web template into a WordPress theme: a video tutorial at Leon Kilat hogyan csinaljunk weboldal template-ekbol wordpress temat (tags: howto templates tutorial web wordpress template) [...]
春江花月夜 » links for 2006-09-04 // Sep 4, 2006 at 9:21 am
[...] Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL. « links for2006-09-03 [...]
Noli Maniquis // Sep 12, 2006 at 2:36 am
Max,
Although the video is too fast for me, kabayan – I thought that sharing this with non-geeks is very generous of you.
Is there a way that I can view it at a slower version?
Thanks for sharing your knowledge.
Mabuhay ka.
Max Limpag // Sep 13, 2006 at 1:15 pm
Noli,
I will try to render it again and see if I can make it slower. Have you read the tutorial that comes with this video? It might make the viewing easier after you’ve read it.
http://max.limpag.com/2006/09/01/how-to-convert-any-web-template-into-a-wordpress-theme/
Shane’s Dev Site » Blog Archive » How to Turn any web template into a WordPress theme // Oct 9, 2006 at 1:38 am
[...] Converting a web template is fairly easy if you take the time to learn how to do it. I wrote this guide for someone like me a few months back — eager to use a great looking web design and yet not knowing how to start converting it to work with WordPress. If you want to view a video tutorial on how I turned this open source web design into this WordPress theme, click here for the blog post. [...]
Web News Blog » Blog Archive » Today’s WordPress Resource- Teurning a template into a Theme // Oct 12, 2006 at 9:03 am
[...] I was searching google on how to turn a Web Template into a WordPress theme. I found a really good tutorial, also a video tutorial Click Here to see it on Leon Kilat::: The Cybercafe Experiments. [...]
DeGeT.NeT » WordPress temaları nasıl yapılır? // Jan 6, 2007 at 1:58 am
[...] XHTML/CSS den wordpress’e Dreamwevaer de wordpress tema editleme Bu konu hakkında bir video eğitsel Wordpress tema anatomisi Wordpress hakkında çok detaylı video eğitselleri, ders dosyaları ile beraber [...]
Web design to increase back links | Increseo Search Marketing // Jan 23, 2007 at 4:49 pm
[...] Turning Web Template Into Wordpress Theme [...]
How to Convert Any Template in a Wordpress Theme // Mar 19, 2007 at 12:13 am
[...] doing my daily browsing, I came across a web tutorial that goes in depth on how to convert any template into a Wordpress [...]
Alex // Mar 19, 2007 at 5:47 am
Hi, i like your tutorial a lot. Is it possible to get a better quality screencast? The Flash video is too blury
Thanks a lot.
Jase // Mar 23, 2007 at 5:55 pm
Thanks!! just what i was looking for!
Catsutorials » Converting CSS Layouts to WordPress themes // Jun 8, 2007 at 8:39 pm
[...] the Internet and WordPress support forums for the easiest way to go about this but apart from Leon Kilat’s excellent video tutorial on this topic, I have not found any other means to go about this without pulling my hair [...]
Liens de juillet 2007 .::::::. le blog de SkyMinds // Jul 31, 2007 at 2:58 pm
[...] Turning a web template into a WordPress theme : a video tutorial. [...]
links for 2007-08-01 at Laura Watson // Aug 2, 2007 at 12:41 am
[...] Turning a web template into a WordPress theme: a video tutorial | Leon Kilat ::: The Cybercafe Exper… (tags: webdesign) [...]
8 Wordpress Theme Tutorials You Don't Want To Miss | Blogging Bits // Aug 25, 2007 at 12:03 am
[...] guide for converting other great looking web templates into Wordpress themes. Here is a video version of the same [...]
10 Video Tutorials for Learning Basic Web Design Skills // Jun 12, 2008 at 11:10 pm
[...] How to Turn any Web Template into a WordPress Theme – This tutorial is aimed at non-geeks who are design challenged, and is a great thing to learn if you ever work with WordPress. [...]
10 Video Tutorials for Learning Basic Web Design Skills | Code4DotNet // Jun 13, 2008 at 3:47 pm
[...] How to Turn any Web Template into a WordPress Theme – This tutorial is aimed at non-geeks who are design challenged, and is a great thing to learn if you ever work with WordPress. [...]
flotte video-guider for å lære grunnleggende Webdesign // Jun 13, 2008 at 7:07 pm
[...] How to Turn any Web Template into a WordPress Theme – Denne guiden er rettet mot alle de som ikke er nerder eller skap-geeks på heltid, og som har lyst til å lære litt om Wordpress og design på denne flotte bloggplattformen (er blitt en god CMS i de siste versjonene). [...]
Weblog Tools Collection » Blog Archive » 10 Video Tutorials for Learning Basic Web Design Skills // Jun 16, 2008 at 9:43 pm
[...] put a new sheen on their existing blog or website. Of interest are such video tutorials as “How to turn any web template into a WordPress theme“. (No Ratings Yet) Loading … Sphere: Related Content | [...]
LimeSpace - IT » Blog Archive » 10 Video Tutorials zum Thema Webdesign // Jun 17, 2008 at 3:09 am
[...] für die Blogger ist dieser LINK sehr interessant, es wird anschaulich erklärt wie man aus einem HTML Template ein Wordpress [...]
links for 2008-06-17 | Life, the universe and everything in it // Jun 17, 2008 at 12:34 pm
[...] Linkshow to write a blog – Google SearchTurning a web template into a WordPress theme: a video tutorial | Leon Kilat ::: The Cybercafe Exper…Blogger Training? ~ The Ramblings of a College StudentThe Associated Press: FAIL!World Builder’s [...]
10个关于Web Design的视? | Ben's Blog // Jun 20, 2008 at 10:16 am
[...] How to turn any web template into a WordPress theme 如果你喜欢本文, 记得订阅 My RSS! [...]
Levi Blackman // Jul 24, 2008 at 1:49 am
Nice tutorial. I got lost after step 4 because you start to do things you don’t specify. I can’t really see what you are coping and pasting from file to file. Other than that fantastic help! Saved me many hours of stress and frustration.
Max Limpag // Jul 24, 2008 at 2:29 am
Levi,
I have a new one coming. You might be interested on it
Jase // Jul 24, 2008 at 11:50 am
A new one?.. I can’t wait!
How to design your own Wordpress Theme | The Webdesign Studio // Aug 31, 2008 at 8:01 pm
[...] Turning a web template into a WordPress theme: a video tutorial [...]
DivageekDesigns » Blog Archive » 11 Wordpress Themes to Check Out…. // Sep 1, 2008 at 6:50 pm
[...] How to Turn any Web Template into a WordPress Theme – This video tutorial is aimed at non-geeks who are design challenged, and is a great thing to learn if you ever work with WordPress. [...]
Marco // Oct 1, 2008 at 4:12 am
ma vuoi andare piano su sto cazzo de video,non si capisce niente. coglione!
100+ Wordpress Video Tutorials, from Basic to Advanced : Speckyboy - Web Design, Web Development and Graphic Design Resources // Nov 17, 2008 at 9:57 pm
[...] Turning a web template into a WordPress theme: a video tutorial › (Advanced). · WordPress Tutorial: How to Upload PDFs › (Advanced). · 5 Key SEO [...]
100 tutoriels vidéos pour Wordpress | Korben // Nov 24, 2008 at 10:32 pm
[...] Turning a web template into a WordPress theme: a video tutorial › (Advanced). [...]
100 Tutorial Video Per WordPress // Nov 26, 2008 at 9:39 pm
[...] Turning a web template into a WordPress theme: a video tutorial › (Advanced). [...]
Wordpress Share » DDL (RS) Free download » 100 tutoriels vidéos pour Wordpress ENG // Nov 27, 2008 at 7:03 am
[...] Turning a web template into a WordPress theme: a video tutorial › (Advanced). [...]
100′ den Fazla Wordpress Video Anlatımlar | Batuhan Bulak // Nov 28, 2008 at 5:06 am
[...] Turning a web template into a WordPress theme: a video tutorial › (İleri Düzey) WordPress Tutorial: How to Upload PDFs › (İleri Düzey) 5 Key SEO Areas For WordPress › (İleri Düzey) How to Turn Your Wordpress Blog Into a Fullfledged Text Editor › (İleri Düzey) How To Add Twitter To Your Wordpress Blog › (İleri Düzey) Image Captions and Text Alignment › (İleri Düzey) Install Wordpress Using Xampp › (İleri Düzey) Create A Wordpress Membership Website › (İleri Düzey) Automated WordPress Posting › (İleri Düzey) [...]
Tips Tricks Dünyası » Blog Archive » 100′ den Fazla Wordpress Video Anlatımlar // Dec 14, 2008 at 2:13 am
[...] Turning a web template into a WordPress theme: a video tutorial › (İleri Düzey) WordPress Tutorial: How to Upload PDFs › (İleri Düzey) 5 Key SEO Areas For WordPress › (İleri Düzey) How to Turn Your Wordpress Blog Into a Fullfledged Text Editor › (İleri Düzey) How To Add Twitter To Your Wordpress Blog › (İleri Düzey) Image Captions and Text Alignment › (İleri Düzey) Install Wordpress Using Xampp › (İleri Düzey) Create A Wordpress Membership Website › (İleri Düzey) Automated WordPress Posting › (İleri Düzey) [...]
60+ Quality Wordpress Video Tutorials « Premium Wordpress Themes from Zidalgo.com // Jan 4, 2009 at 9:31 am
[...] Turning a web template into a WordPress theme: a video tutorial [...]
Calvyn // Feb 2, 2009 at 12:22 pm
does the video tutorial still available above? i cant see it
Complete Wordpress Theme Tutorial « Kolmex // Feb 11, 2009 at 6:46 am
[...] Turning a web template into a WordPress theme [...]
Media Brighton // Feb 20, 2009 at 10:40 pm
I couldn’t see the video?
Top 50 Wordpress Tutorials - NETTUTS // Feb 24, 2009 at 9:05 am
[...] of using one of the many standard Wordpress themes, you could convert a web template into a Wordpress theme with this video [...]
MyBlog - Top 50 Wordpress Tutorials // Feb 25, 2009 at 4:40 am
[...] of using one of the many standard Wordpress themes, you could convert a web template into a Wordpress theme with this video [...]
50个最强WordPress教程 at 毅人博客空间 // Mar 2, 2009 at 7:55 pm
[...] － convert a web template into a Wordpress theme [...]
100+ Wordpress Video Tutorials | // Mar 4, 2009 at 4:14 am
[...] Turning a web template into a WordPress theme: a video tutorial › (Advanced). · WordPress Tutorial: How to Upload PDFs › (Advanced). · 5 Key SEO Areas For [...]
Top 50 Wordpress Tutorials // Mar 4, 2009 at 11:15 am
[...] Into a Wordpress ThemeInstead of using one of the many standard Wordpress themes, you could convert a web template into a Wordpress theme with this video tutorial.10. Wordpress CSS GuidesA slightly-dated but still useful guide on how to [...]
小卡在线 _kavid.net » Blog Archive » 流行博客系统WordPress的50个最强教程 // Mar 4, 2009 at 10:54 pm
[...] － convert a web template into a Wordpress theme [...]
Top 50 Wordpress Tutorials | Tech Underground // Mar 6, 2009 at 6:16 pm
[...] of using one of the many standard Wordpress themes, you could convert a web template into a Wordpress theme with this video [...]
Renzo // Mar 11, 2009 at 12:01 pm
Very helpful article, it helped me a lot. Thank you for sharing.
50个最强WordPress教程 | forcto.com // Mar 30, 2009 at 10:41 pm
[...] － convert a web template into a Wordpress theme [...]
135+ Ultimate Round-Up of Wordpress Tutorials | About Us | instantShift // Apr 5, 2009 at 4:41 am
[...] 20. Turning a Web Template Into a Wordpress Theme [...]
100+ Wordpress Video Tutorials, from Basic to Advanced | Rich Magazine // Apr 8, 2009 at 6:20 pm
[...] Turning a web template into a WordPress theme: a video tutorial › (Advanced). · WordPress Tutorial: How to Upload PDFs › (Advanced). · 5 Key SEO Areas For [...]
Top 50 WordPress Tutorials | The PhenixbluE // Apr 13, 2009 at 11:56 am
[...] of using one of the many standard Wordpress themes, you could convert a web template into a Wordpress theme with this video [...]
WordPress开发教程资源大全 | WordPress资料站 // Apr 25, 2009 at 10:06 pm
[...] Wordpress主题 这个视频程教你如何把一个网页模板变成一个wordpress主题 － convert a web template into a Wordpress theme [...]
250 Wordpress Tutorials // Apr 30, 2009 at 11:34 pm
[...] 37. Turning a Web Template Into a Wordpress Theme [...]
Top 50 Wordpress Tutorials | Design-Tut+ // May 6, 2009 at 9:05 pm
[...] of using one of the many standard Wordpress themes, you could convert a web template into a Wordpress theme with this video [...]
135+ Ultimate Wordpress Tutorials // May 20, 2009 at 1:08 am
[...] 20. Turning a Web Template Into a Wordpress Theme [...]
Turning a web template into a WordPress theme - Tutorial Pro // Jun 26, 2009 at 2:20 am
[...] View Tutorial If you enjoyed this article, please consider sharing it! [...]
Leave a Comment