80 PART II • Designing and Developing WordPress Themes
All your previous template files have been parts of the site, and so is index.php. However, it is
a bit different from all other templates because index.php is the fallback template if there is no
dedicated template for the particular page. You’ll look more closely at that later on, but it is
good to know that index.php needs to be there to save you should you forget to add a template
or if new features come along.
Now, this is the HTML code I’ve copied and pasted into index.php. You’ll notice the right
column part, which you recently moved to sidebar.php. That’s okay; you’ll fix that in a little bit.
<div id="main-container">
<section id="content-container">
<article class="post">
<header>
<h2 class="entry-title">Post title</h2>
<p class="entry-meta">Posted on <time datetime="2012-01-09">January
9,2012</time> by <a href="#">TDH</a> •
<a href="#comments">12 comments</a></p>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
luctus urna sed urna.</p>
<p>Donec congue lacinia dui, a porttitor lectus condimentum laoreet.
Nunc eu ullamcorper orci.</p>
</article>
<article class="post">
<header>
<h2 class="entry-title">A second post title</h2>
<p class="entry-meta">Posted on <time datetime="2012-01-08">January
8,2012</time> by <a href="#">TDH</a> •
<a href="#comments">12 comments</a></p>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
luctus urna sed urna.</p>
<ol>
<li>Lorem</li>
<li>Ipsum</li>
<li>Is slightly overused...</li>
</ol>
<p>Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum
faucibus eget in.</p>
</article>
</section> <!-- #main-container ends -->
<aside id="sidebar-container">
<ul id="sidebar">
<li class="widget-container">
<h2 class="widget-title">Widget title</h2>
<p>Donec eu libero sit amet quam egestas semper. Aenean
ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</li>