WordPress sites are "dynamic" in that the HTML that makes up the
structure and styling of the site is held on several PHP files, and the
content of the blog is inserted into the template from a MySQL database.
This means that if you have a CSS website that you want to convert to a
WordPress theme, you must segment your HTML files into the separate PHP files that WordPress uses. This is easily accomplished by modifying a "Developer" WordPress theme, which contains all the WordPress functions but no styling.
Instructions
1. Go to starkerstheme.com and download the ZIP file for the theme. This theme contains all the functions and code needed to call the blog content from the MySQL database, but is otherwise empty of CSS and HTML code.
2. Extract the downloaded ZIP file onto your computer's hard drive. The files will extract into a folder called "Blank." Open this folder.
Find "header.php" in the "Blank" folder and open it into a text editor. Open the HTML file for your site into a separate window, and copy the code that defines the top header area of your site. This is located directly below the <BODY> tag. Paste the code into "header.php," again below the <BODY> tag, deleting any code already there. Save and close the file.
4. Open the "style.css" file. Copy and paste your CSS file in here, right at the bottom of the file. Save and close the file when done.
5. Open the files "archive.php," "page.php," "index.php," "single.php," and "search.php." Call the divider that contains your CSS site's main content section before the WordPress loop. This is accomplished with the following code:
<div id="name-of-divider">
Put the actual name of your content divider in the quotes. The WordPress loop starts with the following code:
<?php if (have_posts())
Call your content divider directly above this line. Close the divider after the end of the WordPress loop, by placing </div> directly below this line of code:
<?php endif; ?>
Complete this process for all the files you have open, saving and closing each one as you progress.
6. Copy all the images for your site to the "Images" folder inside the "Blank" folder.
7. Return to the "Blank" folder and go up one level so you see the icon for the folder. Turn the folder back into a ZIP file by right-clicking it and choosing "Add to archive" on the Mac or "Send to" then "Compressed folder" on Windows computers. Your CSS site is now compatible with WordPress.
Instructions
1. Go to starkerstheme.com and download the ZIP file for the theme. This theme contains all the functions and code needed to call the blog content from the MySQL database, but is otherwise empty of CSS and HTML code.
2. Extract the downloaded ZIP file onto your computer's hard drive. The files will extract into a folder called "Blank." Open this folder.
Find "header.php" in the "Blank" folder and open it into a text editor. Open the HTML file for your site into a separate window, and copy the code that defines the top header area of your site. This is located directly below the <BODY> tag. Paste the code into "header.php," again below the <BODY> tag, deleting any code already there. Save and close the file.
4. Open the "style.css" file. Copy and paste your CSS file in here, right at the bottom of the file. Save and close the file when done.
5. Open the files "archive.php," "page.php," "index.php," "single.php," and "search.php." Call the divider that contains your CSS site's main content section before the WordPress loop. This is accomplished with the following code:
<div id="name-of-divider">
Put the actual name of your content divider in the quotes. The WordPress loop starts with the following code:
<?php if (have_posts())
Call your content divider directly above this line. Close the divider after the end of the WordPress loop, by placing </div> directly below this line of code:
<?php endif; ?>
Complete this process for all the files you have open, saving and closing each one as you progress.
6. Copy all the images for your site to the "Images" folder inside the "Blank" folder.
7. Return to the "Blank" folder and go up one level so you see the icon for the folder. Turn the folder back into a ZIP file by right-clicking it and choosing "Add to archive" on the Mac or "Send to" then "Compressed folder" on Windows computers. Your CSS site is now compatible with WordPress.
Tags:
Wordpress Tutorial
