Site To Wordpress Tutorial

Site To Wordpress Tutorial

Okay so you have < span style="font-weight:bold;">your website built and coded into css/xhtml and you want to convert it over to a wordpress theme.

Firstly let me explain a few things.

http://hv-designs.co.uk/2007/10/10/site-to-wordpress-tutorial/#more-167


you’ll need to code your site in HTML and CSS before you can convert it to wordpress

1. create a new folder on your desktop, name this folder what ever you want (e.g my theme).

2.create style.css and index.php (empty) files

3.Open up your style sheet to your website, highlight it all then copy/paste into the blank “style.css” file you just created.
4. Now copy/paste this bit of code into the top of your style.css file.

/*
Theme Name: Replace with your Theme’s name.
Theme URI: Your Theme’s URI
Description: A brief description.
Version: 1.0
Author: You
Author URI: Your website address.
*/

These few lines of code are what wordpress uses to define it as a wordpress theme/template.

5. Now we need to chop up our website code.

6. Imagine your current XHTML code chopped up into 4 (or more) different sections. The header, sidebar, main content and footer. Instead of keeping these 4 parts of the XHTML together in one file, you are going to put each of them in their own separate file. Then call on them one by one using PHP.

7. like atep 2 create filenames “header.php , sidebar.php , footer.php”


8. Load up your ftp program and go into your wordpress folder, save the classic theme folder your computer as we need to use bits of code out of the orginal files.

10. Locate the classic themes header.php file. Notice all the PHP that is used in between the tags. You will want to keep most of this code, so just copy the whole section into your new header.php file. Now open up your original XHTML/CSS file and copy only the header elements or the code you have used to create the header. Paste into your new header.php file (underneath the section). Save and close.

11. Now open up the blank index.php you created at the start, open up your website and copy only the main content code (NOT the sidebar or footer). Paste this code into your new index.php file. Save and close.

12. Open up the blank sidebar.php and footer.php. Copy and paste your sidebar code from your website into the blank sidebar.php file Do the same for the footer.php file.
(If your original code contains any images i suggest you copy/paste them into a folder in your theme folder called “images” .)

13.open up index.php copy/paste these lines of code into the top of the file above everything eles,



Now goto the bottom of that file and paste these lines of code below everything eles.




These 3 simple lines of PHP are telling Wordpress to fetch and display your header.php, sidebar.php, and footer.php files within your index.php file. Your code is officially put back together.

14. Your index.php is nearly complete, the final step is to insert the actual content into the code. Luckily, Wordpress uses PHP for this as well. The Loop is the PHP function Wordpress uses to call and display your posts from the database they are saved in. Look in your /wp-content/themes/classic/ directory and open the file index.php file. Copy everything in between and to your clipboard. Now paste it into your new theme’s index.php file inside of whichever div you are using to hold your content. You just inserted a basic version of the loop into your code. Wordpress will use the loop to display your posts and comments on your website.Now upload your theme folder to /wp-content/themes/. Then log into Wordpress and activate your theme.