WordPress Theme Tutorial Pt 4

Wordpress Theme TutorialIn this part of the WordPress Theme Tutorial I show you all of the HTML that is needed to create a WordPress Theme.

When you create a WordPress Theme you basically create a template made up from HTML, CSS and JavaScript and then pull in all of your content using PHP code. You also need a MySQL database of course.

If you don’t know anything about the above subjects you can click the link that applies to learn more about them.

Previous WordPress Theme Tutorial Parts

Now that you’re all up to speed, it’s time for the video! All of the code follows the video. You can use it in anyway you’d like. I also provide a link to the code here for download index.php code

Here is also a link to the HTML Validator. Leave any questions and comments below.

Code From the Video

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html;charset=ISO-8859-1″ />
<title>Website Layout</title>
<link rel=”StyleSheet” href=”style.css” />
<link rel=”StyleSheet” href=”home.css” />
<link rel=”StyleSheet” href=”./includes/menu.css” />
<script type=”text/javascript” src=”./includes/menu.js”></script>
</head>

<body>

<div id=”pageWrapper”>

<div id=”header”>

<img src=”./images/logo2.png” alt=”Key Care Logo” width=”60px” height=”60px” id=”logo” />

<h1 id=”blogTitle”>Key Care</h1>

<p id=”blogSlogan”>Home Health &amp; Hospice</p>

</div>

<div id=”menu”>

<!– This dropdown menu is created by using a table named “navbar”. It has a default width of 800 pixels –>
<table width=”1000″>
<tr>

<!– We are creating the first column in the table and assigning the css attributes assigned to “menuNormal”. We are defining         the width to be 160 pixels. We will trigger javascript functions on both the onmouseover and onmouseout events. –>

<td onmouseover=”expand(this);”
onmouseout=”collapse(this);”>

<!– This is the menu item name that will appear at the top of the screen –>

<p>Menu 1</p>

<!– Each drop-down menu is contained within a DIV element nested within each top-level TD element. There is a table nested         inside of each of those div’s. When a onmouseover event is triggered the div’s attribute display is switched from none to             inline, which allows a visitor to see the div on screen.–>

<div >
<table >
<tr><td>
<a href=”page.htm”>Item 1</a>
</td></tr>
<tr><td>
<a href=”page.htm”>Item 2</a>
</td></tr>
<tr><td>
<a href=”page.htm”>Item 3</a>
</td></tr>
<tr><td>
<a href=”page.htm”>Item 4</a>
</td></tr>
</table>
</div>
</td>

<td  onmouseover=”expand(this);”
onmouseout=”collapse(this);”>
<p>Menu 2</p>
<div >
<table >
<tr><td>
<a href=”page.htm”>Item 1</a>
</td></tr>
<tr><td>
<a href=”page.htm”>Item 2</a>
</td></tr>
<tr><td>
<a href=”page.htm”>Item 3</a>
</td></tr>
<tr><td>
<a href=”page.htm”>Item 4</a>
</td></tr>
</table>
</div>
</td>

<td  onmouseover=”expand(this);”
onmouseout=”collapse(this);”>
<p>Menu 3</p>
<div >
<table >
<tr><td>
<a href=”page.htm”>Item 1</a>
</td></tr>
<tr><td>
<a href=”page.htm”>Item 2</a>
</td></tr>
<tr><td>
<a href=”page.htm”>Item 3</a>
</td></tr>
<tr><td>
<a href=”page.htm”>Item 4</a>
</td></tr>
</table>
</div>
</td>

<td  onmouseover=”expand(this);”
onmouseout=”collapse(this);”>
<p>Menu 4</p>
<div >
<table >
<tr><td>
<a href=”page.htm”>Item 1</a>
</td></tr>
<tr><td>
<a href=”page.htm”>Item 2</a>
</td></tr>
<tr><td>
<a href=”page.htm”>Item 3</a>
</td></tr>
<tr><td>
<a href=”page.htm”>Item 4</a>
</td></tr>
</table>
</div>
</td>

</tr>
</table>

</div>

<div id=”featuredBanner”>
<img src=”./images/nursebanner.png” alt=”Nurse Banner” height=”250px” width=”1000px” id=”featuredImage” />
</div>

<div id=”firstSidebar”>

<div>

<div> <h4>Title in Sidebar</h4></div>
<p>Random text in the sidebar</p>
<a href=”#”>Click for More</a>

<div> <h4>Title in Sidebar</h4></div>
<p>Random text in the sidebar</p>
<a href=”#”>Click for More</a>

<div> <h4>Title in Sidebar</h4></div>
<p>Random text in the sidebar</p>
<a href=”#”>Click for More</a>

</div>

</div>

<div id=”secondSidebar”>

<div>

<div> <h4>Title in Sidebar</h4></div>
<p>Random text in the sidebar</p>
<a href=”#”>Click for More</a>

<div> <h4>Title in Sidebar</h4></div>
<p>Random text in the sidebar</p>
<a href=”#”>Click for More</a>

<div> <h4>Title in Sidebar</h4></div>
<p>Random text in the sidebar</p>
<a href=”#”>Click for More</a>

</div>

</div>

<div id=”mainContent”>

<div id=”introTitle”><h2>Welcome to My Website</h2></div>

<p id=”introParagraph”>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

<ul id=”postLists”>
<li>

<h3>Post Title Goes Here</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br />
<a href=”#”>Click for More</a></p>

<img src=”./images/logo.png” alt=”Key Care Logo” width=”60px” height=”60px” />
</li>
<li>

<h3>Post Title Goes Here</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br />
<a href=”#”>Click for More</a></p>

<img src=”./images/logo.png” alt=”Key Care Logo” width=”60px” height=”60px” />
</li>
</ul>

</div>

<div id=”footer”>

<div id=”copyright”>&copy; 2011 My Theme</div>

</div>

</div>

</body>
</html>

Leave a Reply

Your email address will not be published.

Google+