How to convert any web template into a WordPress theme

Among blogging applications, WordPress probably has the largest number of great-looking themes to use. Still, there are hundreds of free and even open source web templates not yet converted to work with WordPress. Knowing how to make this themes work with WordPress broadens your choice of design to use for your blog.

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.

The Tools

In converting web templates into WordPress themes, I use Aptana and Cream (my preferred text editor). I use Aptana to visually edit the template and incorporate the changes I want done. I used to do this with Dreamweaver (I wrote a tutorial on how to use Dreamweaver to edit WordPress themes) but ever since I tried Aptana, an open source software, I’ve never gone back to the iconic WYSIWYG tool.

Where to download templates

I prefer web templates released under an open source license so I usually get my templates at Open Source Web Design () and Open Web Design.

The advantage of using open source templates is that you are allowed to change and redistribute it. But if you only plan to create a custom WordPress theme for your site and not redistribute it, you can browse through the hundreds of websites offering free web templates.

Tips on choosing a template

Choose designs done in CSS and XHTML. Most of the free and open source web templates offered for download are now done in CSS and XHTML and authors usually highlight this fact either on the web template itself or in the readme file that comes with it.

Validate the design using website validation service. You can use validator.W3.org. Again, most templates contain a link within the page that would take you to the result of W3’s validation of the page.

Choose designs not using HTML tables to render the page’s columns. Tables are great for presenting tabular data such as statistics but not for page layout. Most competent web designers will tell you never to use tables for laying out your web page.

Other resources

The WordPress Codex is an extensive documentation on various aspects of the blogging script. In converting a web template into a WordPress theme, you should check the template tags section of the WordPress Codex to see what tags you’d need to generate blog items such as the post headline, date, comments link etc. Be sure to read about the WordPress Loop, the code that generates blog post content.

You can simplify the template conversion by keeping as reference a copy of a working WordPress theme. You can just then copy snippets of code from the theme for use in your own template. You might also want to check these pieces of great WordPress theme code that I’ve collected.

Organize theme files

After downloading the template you want to convert, check how the files are organized. If the stylesheet is not named style.css, rename the file. Add style information to the CSS file, including your name for the WordPress theme, just copy what other WordPress theme authors did by opening their style.css file. Don’t forget to edit the CSS filename in the HTML file so that you can still preview the design later when you open it in Aptana.

If the images are saved in the root directory, create an image directory and save all the images there. This isn’t really required but it makes for an organized way of doing things. When you do transfer images, make sure that you edit the file locations of all img calls in the HTML and CSS file.

Finalize design

Open the HTML file in Aptana and finalize changes you want done on the design. You might want to play around with the type of font used or its sizes or the dimensions of the web templates’ columns. If you want to completely change the template’s layout, you can spend time editing various components of the template, including the images that come with it.

It is important, however, that you finalize the design at this stage since it will be cumbersome if you do design changes when the files have been cut up into different WordPress theme .php files.

Most free web templates typically contain several sample posts to show how articles, headlines and author links are formatted. Leave only one article in the template. You will be inserting the WordPress Loop in this part of the template later. Mark this part with .

Mark up the template

In Aptana, go to Code View and mark up the parts of the page that you will be cutting up later into header.php, sidebar.php and footer.php. Just mark it up using and tags.

Create a new folder and name it after the WordPress theme name you chose and copy the style.css and image folder into it.

Cut design into different WordPress theme files

Open Cream and then go back to Aptana. Cut and paste the header, sidebar and footer parts of the theme, paste these into Cream and then save it as header.php, sidebar.php and footer.php. Save the remaining code in Aptana as index.php and insert php calls for the header, sidebar and footer: , and .

Open header.php in Cream and insert elements such as the template tags for the page title, stylesheet, RSS feed, favorites icon. You can simplify this process by copying the codes in the header.php of a working WordPress theme. K2 is a good theme to copy from. You can also read about header.php in the WordPress.codex.

Here’s the code I usually add to the header.php of a template I’m converting:





<?php wp_title(''); ?> <?php if ( !(is_404()) && (is_single()) or (is_page()) or (is_archive()) ) { ?> at <?php } ?> <?php bloginfo('name'); ?>
 









Open sidebar.php and then insert sidebar elements you want in your blog. Open footer.php and include information you want to display there.

Open index.php and include the WordPress Loop, the code that publishes your posts. You can read more about the WordPress Loop here. Again, you can simplify this part by copying pieces of code from a working WordPress theme.

The loop starts with:





Place this part above the part you marked . Replace the article headline (usually between

or

tags with . What this does is generate the blog posts headline and link it to its post page. You can remove the link in the post page by using this in single.php. After all, it doesn't make sense for the title in the blog post page to be clickable and linked to the current page.

Replace the dummy text in your web template with . This generates the blog post article.

You can add other post elements such as author data and links or the date of posting. Just check the WordPress codex for their template tags.

End the loop with:

You can then add previous and next post links after this. Here's the one I use:

After that, add this:



 

Not Found

Sorry, but you are looking for something that isn't here.

After adding the Loop, save the file and then save it again as page.php (to serve as template for WordPress pages) and single.php (to serve as template for individual blog posts). You can then customize the files if you want, for example, a different presentation for individual blog articles or for the pages.

Add the comments tags in single.php .

Adding other theme elements

Add a comments.php to the your theme. What I do is copy an existing comments.php and then change its styling to reflect the stylesheet I'm using. Here's a guide to comments.php in the WordPress Codex.

Add a 404 page template by copying an existing one from a working WordPress theme. Add a searchform.php, here's a guide from the WordPress codex.

You can also add a category template by copying index.php and inserting customizations you might want done. Add an archives.php for your archives. Here's a handy guide from the WordPress Codex. http://codex.wordpress.org/Creating_an_Archive_Index

After you're done with the template files, upload the folder into your WordPress themes folder and then CHMOD the stylesheet and individual PHP files to 666 so that you can continue tweaking and editing it online.

Activate the theme, check for errors and continue editing and tweaking it.

Support this blog and independent reporting on Cebu

29 responses

  1. Very, very good howto πŸ™‚

  2. nice, i will try!

  3. Excellent article, very informative.
    Thanks for sharing!

    O

  4. Hi,
    It is great to read your blog, infact I will be sharing this blog with tons of other people very soon.

    Let me introduce my skills to you. I have been practicing my graphics skills on Maya and 3d Max Studio Last year. I learned Flash and a little bit of dreamweaver, I used to make sites in frontpage before that time. I tried Adobe and did some practice on that.

    NEVER EVER touced the coding side, I know HTML and can understand many things in that language.

    Recently, two days ago I thought to learn PHP since I was feeling the neccessity.

    I have seen this post for converting the web template to wordpress theme and I am so very happy to see this post as I can now convert my webpages to wordpress themes.

    I am having hard time to understand the process. I have tried to seen the video but the quality is really low and can’t really understand the processes.

    Can you make a clear video uploaded the YouTube or Please email me with very detailed process, I will try it and make a video. It will help others as well.

    Please guide me with which langauges to learn and which of them can really help me edit wordpress themes and get in to this more and more.

    Thanks A Million – I expect to get your 100% support πŸ™‚

  5. Hi Addies,
    I am currently reworking my tutorials on WordPress theming. I will also be putting up a new video–one that, I hope, will be clearer. Thanks for the feedback.

  6. Very nice job, I’ve already shared this with my ‘community’ of developers. Keep up the good work.

  7. Hope you are having a great time Max.

    Please let me know via email about the projects you are working on. I am interested in learning things.

    Might be I can be of your help.

    Good Going Max. Wish you best of Luck! πŸ™‚

  8. good tutorial.. i like this one article.. πŸ˜€ nice to meet you..

  9. Thanks – you’re going to make a lot of puppy viewers very happy!

  10. Great for the beginners or for folks who start using WP like CMS.

  11. Thanks for this post. I’ve been looking a long time for something like this.

    Cheers,

    …BB

  12. Hi,

    Thanks for writing such a great step by step guide. While i was searching for some missing codes in my WP theme development process, Google redirected me to this page. And Boy i love it.

    Thanks i found my solution,
    it was about relative path tag in WP…

    Mubeen

  13. Max,

    I have unrelated question to WP..

    Have you tried porting web templates to Drupal CMS?

  14. Cliffordx,
    Yes but what I did was use the design as reference and I just converted a stock Drupal theme to follow the design.

  15. Realy helpfully TIPS…Thanks..keep posting..Nice

  16. Nice information. I need to this for one of my new projects I hope I can do.

  17. Randie Avatar

    Thanks for sharing this with us. Really enjoyed this article and learned a lot. Looking forward to reading more from you.

  18. where can i find the tutorial for converting website template into blogger template

  19. Hilary Chapman Avatar
    Hilary Chapman

    Can you convert this WordPress theme to a blogger theme?

    http://themes.wordpress.net/testrun

  20. Thanks! This is going to help me a lot porting over my friend’s site to wordpress for him.
    Bookmarked for later dates.

  21. Finally i can convert my fav. html template into a wordpress theme for my SMS site. Thanks alot Max Limpag

  22. How can I convert web template likes cms, joomla and another into blogger or blogspot..

  23. great post.. πŸ™‚

  24. You can convert a website template into a wordpress template, but how do you convert a wordpress template into a website template? I’ve been trying for a while to see how you convert wordpress to blogger, but nobody is saying. I then tried to see how you convert wordpress to a website template. I REALLY need help here that nobody gives. Can you make a post about that??? You can contact me here: [email protected]

  25. Yelkinen Avatar
    Yelkinen

    Yeah, great tuto, but i try …… with not success ….
    I know html but not the php, and my transformation doesn’t works.
    I try to convert the association template website in wordpress for the next ‘Rallye of Gazelles 2010’
    My html website it’s good, but now we need a blogger.
    Need some help, please.
    Regard
    Yelkinen

  26. Great little tut you have here.
    Keep up the good work!

  27. Great tutorial, helps so much converting xhtml into wordpress, thanks for sharing!

  28. Thanks I have been searching for hours for a good method to incorporate my current template into a wordpress theme. Thanks for answering my questions.

  29. unistalgroup Avatar
    unistalgroup

    your post is really helpful, i tried a lot of time but never get success can you please share a video clip with steps.

    Pragya

Leave a Reply

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