Open source training & tutorials from experienced, passionate people
By A Web Design
NOTE: Click on the icon immediately above to download all the resources used in this lesson.
In the previous chapters we’ve learnt how to create the HTML template, bind this to a CSS. Then went on to understand what a Wordpress template folder required to contain. We shall now move a step further and start naking changes to the HTML template created in lesson 2 so that it grows in to a WordPress theme.
1) Navigate to the mytemplate folder. Open index.html in a browser and take a screenshot of your template and save this as screenshot.png in the mytemplate folder.
NOTE: When you take the screen shot of index.html, you may want to use a graphics program like Photoshop or Adobe Fireworks or GIMP to make the the screenshot about 200 pixels by 350 pixels.
2) Next rename the index.html to index.php
At the very top of index.php you will find codespec as shown in Diagram 1
Diagram 1
Replace
<html xmlns="http://www.w3.org/1999/xhtml"><strong> </strong><br /> <strong>With</strong><br /> <html xmlns="http://www.w3.org/1999/xhtml"<strong> </strong><?php language_attributes();<strong> </strong>?>></p>
<p>The codespec at very top index<strong>.</strong>php will now look as shown in <strong>Diagram 2</strong><br /> <img src="images/wordpress/tempcreation/lesson3/diagram2.png" alt="diagram2.png" border="1" height="20" width="500" />
Diagram 2
The <head></head> section of index.php will be as shown in Diagram 3
Diagram 3
To invoke the CSS file:
Replace
<link href="/style.css" type="text/css" rel="stylesheet" />
With
<link rel="stylesheet" type="text/css" href="/style.css" />
To display the Wordpress BLOG info version:
Add
<meta name="generator" content="WordPress " />
To the <head></head> section
To invoke the page META tags and to call the codespec of the page Header section:
Add
<?php wp_head(); ?>
The < head></head> section of index.php will now have the codespec as shown in Diagram 4
Diagram 4
With this the changeover of the !Doctype and HTML namespace calls together with all the codespec that must be between the <head></head> tags of index.php is complete.
In the next lesson we will take a look at how the:
Page Header
Top menu
The page content
The page left column
AND
The page right column
Sections are modified, to convert the static HTML template to a dynamic PHP template that will display BLOG content and various other BLOG attributes appropriately.
