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.
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.
No comments:
Post a Comment