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.
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. 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.
Tags:
Wordpress Tutorial
