Turning a web template into a WordPress theme: a video tutorial

Pinterest

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.

Pinterest
Loading Facebook Comments ...

72 Comments

  1. […] 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. […]

  2. 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.

  3. […] 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. […]

  4. 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.

  5. 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.

  6. […] 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) […]

  7. […] 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) […]

  8. […] 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 […]

Leave a Reply

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

No Trackbacks.