t he t he m e f o undry.co m http://thethemefo undry.
co m/blo g/html-wo rdpress/
Convert HTML to WordPress
by Drew Strojny on May 8, 2006 /
Updated February 2012 and now compatible with WordPress 3.3 +
When I f irst decided to convert a static HT ML design to WordPress I did some searching f or a tutorial to help me get started with the basics. Surprisingly, I didn’t f ind anything that was very complete or easy to f ollow. For that reason I decided to write a very basic tutorial on how to convert a static HT ML template into a WordPress T heme. If you are an absolute beginner at developing WordPress themes then this should help you get started. T his tutorial assumes you already have a basic understanding of HT ML and CSS. It also assumes you have a website built in HT ML and CSS and have it ready f or conversion.
How WordPress Works
WordPress works in a rather straightf orward manner but it may seem conf using if you are completely new to the concept. WordPress relies on PHP to call on dif f erent parts of your content f rom the database management system it stands on. For example, look in your /wp-cont ent /t hemes/t went yt en/ directory and open the header.php f ile. As you scroll through the code notice the PHP calls, they start with a <?php and end with a ?>. Look at line 37 and notice the call f or your stylesheet URL:
T his line uses PHP to look-up your stylesheet’s location f rom the database. T his basic f unction of retrieving or calling some kind of data f rom your database and using PHP to display it in your HT ML is how WordPress works. T hroughout this process you will be substituting PHP f or dif f erent parts of your content and your code. T his will make editing easier in the long run, as you will f ind out. Now that you understand the basics of how WordPress works, lets get started.
First Things First
T he f irst step is to create a new f older and name it whatever you want your theme to be called. Next, create two new f iles, st yle.css and index.php and place them in the f older. Believe it or not, these are the only two f iles you actually need f or a WordPress theme. Now copy and paste the code f rom your original CSS f ile into the st yle.css f ile you just created. At the top add the f ollowing code:
/* Theme Name: Replace wit h your Theme's name. Theme URI: Your Theme's URI Descript ion: A brief descript ion. Version: 1.0 Aut hor: You Aut hor URI: Your websit e address. */
T hese comments simply help WordPress properly identif y the theme. Your stylesheet is now ready to go.
Chop It Up
Now let’s start chopping up your HT ML. Remember how we talked about WordPress using PHP to call data f rom your database? Well WordPress can also use PHP to call dif f erent f iles f rom within your template f older. Imagine your current HT ML code chopped up into 4 (or more) dif f erent sections. For example, take a look at the layout and corresponding HT ML of this page. T he header comes f irst, f ollowed by the content, then the sidebar, and f inally the f ooter. Instead of keeping these 4 parts of the HT ML together in one f ile, you are going to put each of them in their own separate f ile. T hen call on them one by one using PHP.
So go ahead and sort through your HT ML code and place some markers in the 4 places where you plan on cutting the code into 4 separate sections.
T hese next steps assume you have your page set up lef t to right: header, content, sidebar, f ooter. If your page is ordered dif f erently you will have to switch a couple of these steps around.
Now create 3 new f iles (header.php, sidebar.php, foot er.php) and place them in your theme directory. Next take a look at the header.php f ile f rom the Twenty Ten theme we looked at earlier. Notice all the PHP that is used in between the <head> tags. Copy that code to your new header.php f ile. Now open up your original HT ML f ile and copy the code you marked of f f or your header (1st section) into your new header.php f ile (underneath the <head> section). Save and close.
Now open up your new index.php f ile. Copy the second part of your original HT ML code, the content (2nd section) into your new index.php f ile. Save and close.
Getting the hang of it?
Next open up your new sidebar.php f ile, copy the sidebar (3rd section) of your original code into the sidebar.php f ile. Finally, copy the original f ooter (4th section) of code into your new foot er.php f ile.
Put It Back Toget her
Your original code should now be chopped up into 4 dif f erent f iles ( header.php, index.php, sidebar.php, foot er.php). Let's put it back together using a f ew lines of PHP. Open up your index.php f ile, it should contain the HT ML f rom the content (2nd section) of your original code. Add this line at the very top of the f ile:
<?php get _header(); ?>
Now go to the absolute bottom of your index.php f ile and add these two lines:
<?php get _sidebar(); ?>
<?php get _foot er(); ?>
T hese 3 simple lines of PHP are telling WordPress to f etch and display your header.php, sidebar.php, and foot er.php f iles within your index.php f ile. Your code is now officially put back together. Now, if you want to edit your sidebar you can just edit your sidebar.php f ile, instead of sorting through your index.php to f ind it. T he same goes f or your header.php and your foot er.php.
The Loop
Your index.php is almost f inished. T he f inal step is to insert the actual content into the code. Luckily, WordPress uses PHP f or this as well. T he Loop is the PHP f unction WordPress uses to call and display your posts f rom the database they are saved in. Grab this code and paste it into your new theme's index.php f ile (inside of whichever div you are using to hold your content). <?php if ( have_post s() ) : ?> <?php while ( have_post s() ) : t he_post (); ?> <div id="post -<?php t he_ID(); ?>" <?php post _class(); ?>> <div class="post -header"> <div class="dat e"><?php t he_t ime( 'M j y' ); ?></div> <h2><a href="<?php t he_permalink(); ?>" rel="bookmark" t it le="Permanent Link t o <?php t he_t it le_at t ribut e(); ?>"><?php t he_t it le(); ?></a></h2> <div class="aut hor"><?php t he_aut hor(); ?></div> </div><!--end post header--> <div class="ent ry clear"> <?php if ( funct ion_exist s( 'add_t heme_support ' ) ) t he_post _t humbnail(); ?> <?php t he_cont ent (); ?> <?php edit _post _link(); ?> <?php wp_link_pages(); ?> </div><!--end ent ry--> <div class="post -foot er"> <div class="comment s"><?php comment s_popup_link( 'Leave a Comment ', '1 Comment ', '% Comment s' ); ?></div> </div><!--end post foot er--> </div><!--end post --> <?php endwhile; /* rewind or cont inue if all post s have been fet ched */ ?> <div class="navigat ion index"> <div class="alignleft "><?php next _post s_link( 'Older Ent ries' ); ?></div> <div class="alignright "><?php previous_post s_link( 'Newer Ent ries' ); ?></div> </div><!--end navigat ion--> <?php else : ?> <?php endif; ?>
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.
The End
Now upload your theme f older to /wp-cont ent /t hemes/. T hen log into WordPress and activate your theme. Wasn't that easy?
T his tutorial covered the basics f or converting your theme to WordPress. To f urther customize and enhance your theme start looking at the WordPress Codex, specif ically Template Tags and Template Files. You can use template tags in your sidebar, in your header, or your f ooter to call menus, categories, posts, etc. As you learn more about template tags and template f iles you will discover the endless possibilities f or customizing your new WordPress blog.
