Your ads will be inserted here by
AdSense Now!.
Please go to the plugin admin page to paste your ad code.
Okay so you have 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.
WordPress works in a rather straightforward manner but it may seem confusing if you are completely new to the concept. WordPress relies on PHP to call on different parts of your content from the database management system it stands on. If you view my code to my site you will notice i use php to call some aspects of my page. Once you get started its pretty easy althou understanding of css/php/xhtml is essential and will guide you throu the setup of a full working wordpress theme.
Now you should already have your site designed and coded into css/xhtml before attempting this tutorial, firstly create a new folder on your desktop, name this folder what ever you want (e.g my theme). Now open up notepad dont type anything just goto “file > save as” and save it has style.css then goto “file > save as” again and save it as index.php. Now believe it or not but these are the only 2 files you actually need for a wordpress theme.
Open up your style sheet to your website, highlight it all then copy/paste into the blank “style.css” file you just created.
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.
*/
Change the lines of code in red to suit your needs. These few lines of code are what wordpress uses to define it as a wordpress theme/template.
Thats the style sheet sorted. Now we need to chop up our website code. Remember how we talked about WordPress using PHP to call data from your database? Well WordPress can also use PHP to call different files from within your template folder. 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.
Open up notepad and create a further 3 files the same way we did with the style.css and index.php this time use the filenames “header.php , sidebar.php , footer.php” (make sure all these files are in the same directory). 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.
(/wp-content/themes/classic/)
Your ads will be inserted here by
AdSense Now!.
Please go to the plugin admin page to paste your ad code.
Locate the classic themes header.php file. Notice all the PHP that is used in between the <head> tags. You will want to keep most of this code, so just copy the whole <head> 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 <head> section). Save and close.
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.
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” . Now lets put it back together using a few lines of PHP, open up index.php copy/paste these lines of code into the top of the file above everything eles,
<?php get_header(); ?>
Now goto the bottom of that file and paste these lines of code below everything eles.
<?php get_sidebar(); ?>
<?php get_footer(); ?>
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. Now if you want to edit your sidebar you can just edit your sidebar.php file, instead of sorting through your index.php to find it. The same goes for your header.php and your footer.php.
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 <?php get_header(); ?> and <?php get_footer(); ?>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.
This tutorial covered the basics for converting your theme to WordPress. To further customize and enhance your theme start looking at the WordPress Codex, specifically Template Tags and Template Files. You can use template tags in your sidebar, in your header, or your footer to call menus, categories, posts, etc. As you learn more about template tags and template files you will discover the endless possiblities for customizing your new WordPress blog.
Your ads will be inserted here by
AdSense Now!.
Please go to the plugin admin page to paste your ad code.