Pages

Wordpress Site Architecture Cheat Sheet

Wordpress-Site-Architecture-Cheat-Sheet

The following is a description of the general site architecture for WordPress v1.5. WordPress Theme authors are encouraged to maintain much of the core site architecture of XHTML tags and CSS selectors, but they are not required to. Therefore, this is just a general outline and your Theme may be different. 

Template Driven Pages
Before we get to the Core Structure of the WordPress page architecture, you need to understand that WordPress uses template files to generate the final page "look" and content. For example, when viewing the front page of your WordPress site, you are actually viewing several template files:
  • index.php
  • header.php
  • sidebar.php
  • footer.php
When you view a single post page, you might be viewing the following template files:
  • single.php
  • header.php
  • sidebar.php
  • footer.php
  • comments.php
On a multi-post page like categories, archives, and search, you might be viewing any combination of the following template files:
  • index.php
  • category.php
  • 404.php
  • search.php
  • header.php
  • sidebar.php
  • footer.php
Weve specified which CSS selectors belong in which template files as much as possible in the following architecture specifications. 
Core Structure
The core structure of a WordPress site represents the main containers which hold the pages content. The core structure of a WordPress site features, at a minimum, are:
  • Header
  • Sidebar/Menu
  • Content
  • Footer
These are the main containers in which the most important parts of the page are "contained". Remember, the core structure is like building blocks. They are dependent upon each other. If you change one, you have to change the others. 

Classic Theme
<body>
<div id="rap">
<h1 id="header"></h1>
<div id="content"></div>
<div id="menu"></div>
<p class="credit"></p>
</div>
</body>
Default Theme
<body>
<div id="page">
<div id="header"></div>
<div id="content" class="narrowcolumn"></div>
<div id="sidebar"></div>
<div id="footer"></div>
</div><!-- end page -->
</body>

While one calls their sidebar sidebar and the other menu, the main difference between the two Themes core structures is the use of the header and footer. For the Classic Theme, the header is in an h1 tag and the footer is in a paragraph tag. In the Default Theme, the header is in a div called header and the footer is in the footer div.
Both Themes feature a container that encompasses or "wraps" itself around the entire page. This wrapping container allows for more definitive control over the overall structure, often used in combination with the body tag. In different WordPress Themes, these are also found by these names:
  • container
  • page
  • wrap
  • rap
Some Themes may add a second, third, or even fourth sidebar, creating a column effect. Or they may include additional wrappers around the entire page or specific containers, but this is the core structure. 

The Modular Template Files
Based upon the premise of building blocks, WordPress Themes divide up the core structure between blocks called template files. These are the template files:
  • Header - header.php
  • Sidebar/Menu - sidebar.php
  • Content - index.php, single.php, page.php, category.php, author.php, search.php, etc.
  • Footer - footer.php
As you can see, the content container can be found across many other template files. These are generated dependent upon the users request. If they click on a category, the category template is displayed. If they choose a Page, the page template is used. And so on.
Combined with the WordPress Loop and queries, a variety of templates can be generated, and the web page designer can style all of these differently and independently from each other. 

Interior Structures
Within these core structural containers are smaller building blocks that hold the specific content within the parent container. WordPress Themes can feature a variety of these, but we are going to concentrate on the two Themes that come with WordPress. Most WordPress Themes are based on these two Themes. 
Wordpress-Site-Architecture

Header
The header is the structure that traditionally sits at the top of a web page. It contains the title of the website. It may also be referred to as the masthead, head, title, and banner. In all WordPress Themes, the header is found within the header.php template file.
The Classic Theme features the simplest header code:
<h1 id="header"></h1>
The Default Theme has a more complex header code:
<div id="header">
   <div id="headerimg">
      <h1></h1>
         <div class="description"></div>
   </div>
</div>
While the styles for the Classic Theme are found within the Themes style.css style sheet file, styles for the Default Theme are found within the style.css and the <head> of the header.php template file. Working with these styles is extensively covered in Designing Headers. 

Content
The content container in WordPress plays the most important role. It holds the WordPress Loop which dictates the generation of content on the page depending upon the request by the user.
The Classic Theme has the simplest content structure:
<div id="content">
   <h2>Date</h2>   
   <div class="post" id="post-1">
      <h3 class="storytitle">Post Title</h3>
      <div class="meta">Post Meta Data</div>
      <div class="storycontent">
         <p>Welcome to WordPress.</p>
      </div>
      <div class="feedback">Comments (2)</div>
   </div>
</div>
The Classic Theme hosts containers for the Date, Title, Post Meta Data, Post Content, and Feedback (number of comments). It also showcases a powerful feature. The ability to individually style a single posts look.
<div class="post" id="post-1">
The post CSS class selector applies the post styles to this container, but it also has an ID which is generated automatically by WordPress. The code looks like this:
<div class="post" id="post-<?php the_ID(); ?>">
The use of the template tag the_ID() generates the ID number of the post. This provides a unique identifier for internal page links as well as for styles. This post could have a style for post-1, as could post-2. While it is a bit excessive to feature a style for every post, there may be a post or two you need to have look a little different. Some plugins may use this identifier to automatically change the look of different posts, too.
The Default Theme content container features a different look for multi-post views like the front page, categories, archives, and searches, and a different single post view for single posts. The multi-post view looks like this:
<div id="content" class="narrowcolumn">
   <div class="post" id="post-1">
      <h2>Post Title</h2>
      <small>Date</small>
      <div class="entry">
         <p>Post Content.</p>
      </div><p class="postmetadata">Post Meta Data Section</p></div>
    <div class="navigation">
       <div class="alignleft">Previous Post</div>
       <div class="alignright">Next Post</div>
    </div>
</div>
There is a lot going on here. Lets break it down.
<div id="content" class="narrowcolumn">
In the multi-post views, it features a class="narrowcolumn" and in the single post views, it features class="widecolumn" and the sidebar is not generated on that page, allowing the post to be viewed "wide" across the width of the content area.
<div class="post" id="post-1">
Like the Classic Theme, this division sets up the style for post and the identifier for post-X, with X representing the posts unique ID number. This allows for customizing the specific posts look.
<h2>Post Title</h2>
This encompasses the posts title code, styled by the <h2> tag.
<small>Date</small>
The date code is surrounded and styled by the small tag.
<div class="entry">
The post content is styled by a combination of the styles within the entry CSS selectors and the paragraph tag.
<p class="postmetadata">Post Meta Data Section</p>
The Post Meta Data Section contains the data details about the post such as the date, time, and categories the post belongs to.
<div class="navigation">
The Next and Previous Links are styled in the navigation. They also include classes for alignleft for the Previous Post and alignright for the Next Post in chronological order.
These elements are shifted around in the single post view content structure:
<div id="content" class="widecolumn">
   <div class="navigation">
      <div class="alignleft"></div>
      <div class="alignright"></div>
   </div>
   <div class="post" id="post-1">
      <h2>Post Title</h2>
      <div class="entrytext">
         <p>Post content.</p>
         <p class="postmetadata alt">
            <small>Post Meta Data</small>
         </p>
      </div>
   </div>
</div>
The widecolumn class is featured to stretch the content across the page to fill in the absence of the sidebar. The navigation has been moved up to the top. And the Post Meta Data is now incorporated into the entrytext parent container and styled differently with an alt style added.
These two examples from the Default Theme give you just a glimpse into the myriad ways your WordPress site can be customized. 

Comments
Comments may be featured on the single post view or in a popup window. The overall styles for the two sets of comments remain basically the same. The two template files are comments.php and comments-popup.php 

Classic Theme Comments
<h2 id="comments">1 Comment
<a href="#postcomment" title="Leave a comment">»</a></h2>
<ol id="commentlist">
<li id="comment-1">
<p>Hi, this is a comment.</p>
<p><cite>Comment by Person</cite> </p></li></ol>
<p><a href=http://example.com/archives/name-of-post/feed/><abbr title="Really Simple Syndication">RSS</abbr>  feed for comments on this post.</a>
<a href="http://example.com/name-of-post/trackback/" rel="trackback">TrackBack <abbr title="Uniform Resource Identifier">URI</abbr></a></p>
<h2 id="postcomment">Leave a comment</h2>
<form action="http://example.com/blog/wp-comments-post.php"
method="post" id="commentform">
Labels: , , , ,

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Subscribe to: Post Comments (Atom)