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 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 <!-- WordPress loop here -->.

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 <!-- Section starts here --> and <!-- Section ends here --> 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: <?php get_header(); ?>, <?php get_sidebar(); ?> and <?php get_footer(); ?>.

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:

<html xmlns="" xml:lang="en" lang="en">
<head profile="">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php wp_title(''); ?> <?php if ( !(is_404()) && (is_single()) or (is_page()) or (is_archive()) ) { ?> at <?php } ?> <?php bloginfo('name'); ?></title>
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_get_archives('type=monthly&format=link'); ?>
<?php wp_head(); ?>

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:

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>

Place this part above the part you marked <!-- WordPress loop here -->. Replace the article headline (usually between <h1></h1> or <h2> </h2 tags with <a href="<?php the_permalink() ?>" rel="bookmark" title='Click to read: "<?php strip_tags(the_title()); ?>"'><?php the_title(); ?></a>. 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 <?php the_title(); ?> 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 <?php the_content("Continue reading '" . the_title('', '', false) . "'"); ?>. 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:
<?php endwhile; ?>

You can then add previous and next post links after this. Here’s the one I use:
<?php next_posts_link('&laquo; Older blog posts') ?> <?php previous_posts_link('&bull; Newer blog posts &raquo;') ?></p>

After that, add this:

<?php else : ?>
 <h2 class="center">Not Found</h2>
		<p class="center">Sorry, but you are looking for something that isn't here.</p>
		<?php include (TEMPLATEPATH . "/searchform.php"); ?>
<?php endif; ?>

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 <?php comments_template(); ?>.

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.

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.

Loading Facebook Comments ...


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

  2. […] Converting Any Template Into a WordPress Theme Max Limpag shares a comprehensive guide about converting any web template into a WordPress theme. 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. […]

  3. […] How to convert any web template into a WordPress theme at Leon Kilat ::: The Cybercafe Experiments Como convertir templates normales a WordPress (tags: wordpress design tutorial webdesign template templates layouts layout howto) […]

  4. […] Etwas, das mir bei WP noch Kopfzerbrechen bereitet, ist das Template-System. IMHO wäre WP nicht so erfolgreich, wenn es nicht so viele (und gute!) Themes dazu gäbe. Jedenfalls erklärt Max Limpag, was man beachten muss, wenn man ein “fremdes” Template zu WP konvertieren möchte. Die Infos dazu sind auch nicht schlecht für jemanden, der ein WP-Template “from the scratch” erstellen möchte. Das ganze gibt es auch als Video-Tutorial. […]

  5. […] Max Limpag of The Cybercafe Experiments has written a great guide on “How to convert any web template into a WordPress theme” so you can take any open source or free web design template and convert it 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. […]

  6. […] I was searching Google on how to turn a HTML template into a WordPress theme. I found a site called Leon Kilat:::The Cybercafe Experiments. I found exactly what I was looking for. I wanted to know how to turn just a simple HTML template into a WordPress theme. This site had the answer. Here is the exact post. This was a great deal of help for me, and I hope that it is for you! […]

  7. […] I took one quick look at the posts mentioned by Michael and then scanned the metrics he used to rate each blog. Here’s how he defined popularity: 7. How to Convert any Web Template into a WordPress Theme (excellent read btw) […]

  8. 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 🙂

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

  10. 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! 🙂

  11. […] How to convert any web template into a WordPress theme | Leon Kilat ::: The Cybercafe Experiments Ein howto wie man beliebige „normale“ Webdesigns in ein WP-Them umbaut. Praktisch, wenn man WP mit einer normalen Seite kombinieren will. (tags: howto theme WordPress webdesign tutorials css) […]

  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…


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

  14. 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]

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

  16. […] Converting a web template is easy if you know how to do it! So I would suggest you to read “How to convert any web template into a WordPress theme?” You can easily get tons of open source web templates over internet. Choose some and start […]

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


Leave a Reply

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

No Trackbacks.