How to Convert HTML to WordPress Themes
WordPress sites are not static HTML sites -- they contain code that updates different sections of the site based on what is in a MySQL database. If you have created a HTML WordPress template and want to turn it into a fully-functioning WordPress theme, the easiest way to do it is to take a "Blank" WordPress theme, also called a "Developer" theme, and simply copy and paste your template into the different files of the theme, being careful to retain the dynamic code and the WordPress loop.
Other People Are Reading
Instructions
-
-
1
Visit starkerstheme.com and click the large "Download the .zip" button. Starkers is a free, GPL-licensed blank theme that can be modified to contain your HTML template. Sites made using Starkers may also be used for commercial purposes.
-
2
Locate the ZIP file on your hard drive and extract it. Open the folder and you will see a folder with a large list of files -- you will copy sections of your template into the relevant files of the theme.
-
-
3
Open header.php. Copy the top bar of your template below the <BODY> tag. There will be some code here already, which call the site name and tag-line of the site. You can either cut and paste these into the header tags for your own site, or if you want a static title or image as your header, just delete this already-existing code. Save the file when done.
-
4
Open style.css. Scroll to the bottom and start a new line, then copy and paste your entire CSS style sheet here. Save the file.
-
5
Open footer.css. Delete the code above, but not including, the "<?php wp_footer(); ?>" line, and copy and paste the code from your template's footer in the space you have just made. Save the file.
-
6
Note the name of the containing <div> that holds your template's main content area. Typically, this is simply called "content" and is called by the code: <div id="content">. This <div> must wrap around the WordPress "Loop," with a closing tag </div> at the end of the loop. The loop is found in the following files: archive.php. index.php, page.php, search.php and single.php. It starts with "<?php if (have_posts())" and ends with either "<?php endif; ?>". Your opening <div> tag should therefore be pasted in the line below "<?php get_header(); ?>" and the closing <div> tag should be pasted directly above "<?php get_sidebar(); ?>". Save each file after pasting the tags in.
-
7
Compress the folder back into a ZIP file. On a Mac, right-click the folder then "Add to archive." On Windows, right-click, click "Send to" and then "Compressed Folder." Your HTML template is now a WordPress theme ready for upload to your blog.
-
1
References
- Photo Credit Comstock/Comstock/Getty Images
