Creating a WordPress Theme HTML Structure
Now we’re starting to get into the real meat of WordPress Theme development: coding the HTML structure.
The HTML Structure for Your WordPress Theme
Let’s take a look at the HTML structure we’ll be using for the body of our WordPress Theme.
<html>
<head>
</head>
<body>
<div id="wrapper" class="hfeed">
<div id="header">
<div id="masthead">
<div id="branding">
</div><!-- #branding -->
<div id="access">
</div><!-- #access -->
</div><!-- #masthead -->
</div><!-- #header -->
<div id="main">
<div id="container">
<div id="content">
</div><!-- #content -->
</div><!-- #container -->
<div id="primary" class="widget-area">
</div><!-- #primary .widget-area -->
<div id="secondary" class="widget-area">
</div><!-- #secondary -->
</div><!-- #main -->
<div id="footer">
<div id="colophon">
<div id="site-info">
</div><!-- #site-info -->
</div><!-- #colophon -->
</div><!-- #footer -->
</div><!-- #wrapper -->
</body>
</html>
WordPress Theme Template & Directory Structure
While the most minimal of WordPress Themes really only needs an index.php Template and a style.css file (or just the style file if it’s a Child Theme) most WordPress Themes need something a little more solid.
Our new minimal will include 6 files. Make a folder in wp-content/themes/ for your theme—for this tutorial I’ll be using “your-theme” but it can be whatever you want—and create the following files in that new folder (don’t worry, they’ll be blank until the next few steps).
• index.php
• header.php
• sidebar.php
• footer.php
• functions.php
• style.css
Now let’s open up the last file we created, style.css, in a text editor. The first thing we need to do is add a section at the top of this file bracketed by what are called CSS “comments” (these guys: /* and */). It’s here that we need to put the info that tells WordPress about your theme. Without it, your theme won’t show up in the themes panel.
