Languages: English • Русский • 中文(简体) • (Add your language)
The following is a description of the general site architecture for WordPress v1.5. WordPress theme developers are encouraged but not required to maintain much of the core site architecture of XHTML tags and CSS selectors. Therefore, you can just consider this to be a general outline, because your theme may be different.
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:
When you view a single post page, you might be viewing the following template files:
On a multi-post page like categories, archives, and search, you might be viewing any combination of the following template files:
As much as possible in the following architecture specifications, we've specified which CSS selectors belong in which template files.
The core structure of a WordPress site represents the main containers that hold the page's content. The core structure of a WordPress site features, at a minimum:
These are the main containers in which the most important parts of the page are "contained." Remember, the core structure is like a set of building blocks, where each unit is dependent upon the other units. 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>
Please note that, while both themes make use of a sidebar, the first theme refers to it as a menu, while the other theme refers to it as a sidebar.
Perhaps the main difference between the core structures of these two themes is the use of the header and footer. For the Classic Theme, the header is in an h1 tag, and the footer is enclosed in a paragraph tag. Meanwhile in the Default Theme, the header has been placed in a div called header, while the footer has been placed in a footer div.
Both themes feature a container that encompasses or "wraps" itself around the entire page. This container (often used in combination with the body HTML tag) allows for more definitive control of the entire structure. Depending on the WordPress theme being used, this container can also be referred to as:
Some themes may add a second, third, or even fourth sidebar, creating a column effect. They may also include additional wrappers around the entire page or around specific containers. However, in all cases, the basic core structure essentially remains the same.
Based on the premise of building blocks, WordPress themes divide the core structure into individual blocks called template files. These are the template files:
In each of these template files, it is possible to use the body div as an all-encompassing container for content.
When viewing a web page that uses a particular WordPress theme, the specific template files generated are dependent upon the user's request. If a user clicks on a category tag, the category template will be used. If the user views a page, the page template will be used.
When these core template files are loaded in combination with the WordPress Loop and queries, a variety of templates can be generated. This allows web page developers to create individual and unique styles for each specific template.
Within these core structural containers are smaller building blocks which 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 theme templates are based on these two themes.)
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 a masthead, head, title, or 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 theme's style.css file, styles for the Default Theme are found both within the style.css file and the <head> of the header.php template file. Working with these styles is extensively covered in the article Designing Headers.
The content container in WordPress plays a critical role, because it holds the WordPress Loop. The WordPress Loop processes each post that will be displayed on the current page. These posts are then formatted according to how they match specific criteria within the Loop tags.
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 post's look.
<div class="post" id="post-1">
The post CSS class selector applies the post styles to this container. It is important to note that the post class selector also has an ID which is generated automatically by WordPress. Here is an example of the code that can be used to display a class selector's ID:
<div class="post" id="post-<?php the_ID(); ?>">
The use of the template tag the_ID() displays the ID number for the post. This unique identifier can be used for internal page links as well as for styles. For instance, an individual post could have a style for post-1, as well as for post-2. While it is a bit excessive to feature a style for every post, there may be a post or two that you need to have look a little different. Some plugins may use this identifier to automatically change the look of different posts, too.
The content container for the Default Theme features a multi-post view (e.g. for the front page, categories, archives, and searches) as well as a 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. Let's break it down.
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>
In the absence of the sidebar, the widecolumn class has been formatted to stretch content across the page. The navigation div has been moved up to the top. And the Post Meta Data is now incorporated into the entrytext parent container, and has been styled differently, with an alt class selector added.
These two examples from the Default Theme give you just a glimpse into the myriad ways your WordPress site can be customized.
Comments may be featured in the single post view (using the comments.php template file) or in a popup window (using the comments-popup.php template file). The overall styles for these two types of comments are basically the same.
<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">
<p>
<input type="text" name="author" id="author" value="" size="22" tabindex="1" />
<label for="author">
<small>Name (required)</small>
</label>
</p>
<p>
<input type="text" name="email" id="email" value="" size="22" tabindex="2" />
<label for="email">
<small>Mail (will not be published) required)</small>
</label>
</p>
<p>
<input type="text" name="url" id="url" value="" size="22" tabindex="3" />
<label for="url">
<small>Website</small>
</label>
</p>
<p>
<small><strong>XHTML:</strong> List of Tags you
can use in comments</small>
</p>
<p>
<textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4">
</textarea>
</p>
<p>
<input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />
<input type="hidden" name="comment_post_ID" value="1" />
</p>
</form>
</div>
While individual sections of the comments feature styling reference, the Classic Theme has no general comment division or group style reference, one could be easily added.
The Default Theme comments feature a loop query within the comments.php and comments-popup.php which changes some of the information depending upon if comments are open, closed, and any present. If the comments are open or closed and no comments have been made, this information will be displayed within the <h3 id="comments"> tag.
<h3 id="comments">One Response to "Hello world!"</h3>
<ol class="commentlist">
<li class="alt" id="comment-1">
<cite>
<a href="http://example.org/" rel="external nofollow">Mr WordPress</a>
</cite> Says:<br />
<small class="commentmetadata">
<a href="#comment-1" title="">Date and Time</a>
</small>
<p>Hi, this is a comment.</p>
</li>
</ol>
<h3 id="respond">Leave a Reply</h3>
<form action="http://example.com/blog/wp-comments-post.php" method="post" id="commentform">
<p>
<input name="author" id="author" value="" size="22" tabindex="1" type="text">
<label for="author">
<small>Name (required)</small>
</label>
</p>
<p>
<input name="email" id="email" value="" size="22" tabindex="2" type="text">
<label for="email">
<small>Mail (will not be published) required)</small>
</label>
</p>
<p>
<input name="url" id="url" value="" size="22" tabindex="3" type="text">
<label for="url">
<small>Website</small>
</label>
</p>
<p>
<small><strong>XHTML:</strong> You can use these
tags:....</small>
</p>
<p>
<textarea name="comment" id="comment" cols="100" rows="10" tabindex="4">
</textarea>
</p>
<p>
<input name="submit" id="submit" tabindex="5" value="Submit Comment" type="submit">
<input name="comment_post_ID" value="1" type="hidden">
</p>
</form>
</div>
While individual sections of the comments feature styling reference, the Default Theme has no general comment division or group style reference, though one could be easily added.
The Classic and Default Themes' comments-popup.php template file is essentially the same. They use the layout for the Classic Theme comment structure. While the Classic Theme uses <h2> headings and the Default Theme uses <h3> headings for the title headings in their comments, in the comments-popup.php template file, they both use the <h2> heading tag.
<body id="commentspopup"> <h1 id="header"></h1> <h2 id="comments">Comments</h2> ....Classic Theme commment section..... ...Classic Theme footer....
The body tag sets the style for the overall page with #commentspopup. The h2 heading begins the comments section.
If you make modifications to the structure of the tags within the header and footer of the overall Theme, ensure those structural changes are applied to the comments popup template, especially if you will be releasing the Theme to the public.
As you saw with the Default Theme, the sidebar can be visible or not, depending upon the template file in use. The sidebar, in general, can be simple or complex. WordPress Themes often feature information within the sidebar in nested lists. There is a step-by-step guide for the sidebar at Customizing Your Sidebar and more information on Styling Lists with CSS, too.
In general, the WordPress sidebar features titles of the various sections within a list, with the section items in a nested list below the title.
The Classic Theme sidebar looks like this, with the links removed for simplification:
<div id="menu">
<ul>
<li class="pagenav">Pages
<ul>
<li class="page_item">Contact</li>
<li class="page_item">About</li>
</ul>
</li>
<li id="linkcat-1"><h2>Blogroll</h2>
<ul>
<li>Blogroll Link 1</li>
<li>Blogroll Link 1</li>
<li>Blogroll Link 1</li>
</ul>
</li>
<li id="categories">Categories:
<ul>
<li>Category Link 1</li>
<li>Category Link 2</li>
</ul>
</li>
<li id="search">
<label for="s">Search:</label>
<form id="searchform" method="get" action="/index.php">
<div>
<input type="text" name="s" id="s" size="15" /><br />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>
</li>
<li id="archives">Archives:
<ul>
<li>Archives Month Link 1</li>
<li>Archives Month Link 2</li>
</ul>
</li>
<li id="meta">Meta:
<ul>
<li>RSS Feed Link</li>
<li>RSS Comments Feed Link</li>
<li>XHTML Validator</li>
<li>XFN Link</li>
<li>WordPress Link</li>
</ul>
</li>
</ul>
</div>
Most of these are self-explanatory. Each set of links has its own CSS selector: Pages, categories, archives, search, and meta.
The Pages and Links category, labeled "Blogroll", uses the <?php get_links_list(); ?> and <?php wp_list_pages(); ?> template tags which automatically generates a heading.
For the Links category, it generates an h2 heading for that set of links. This means you can style the menu h2 heading to look differently from the rest of the headings, or, if you want them to all look the same, make sure that the menu h2 style matches the rest of the category styles which are not automatically generated.
The Pages template tag generates pagenav as the heading and then identifies the pages in a new way. As a general list viewed on multi-post and single post views, the Page list items feature a class="page_item" to style those links. When viewing an individual Page, that Page's link will change to class="current_page_item", which can then be styled to look differently from the rest of the Page links.
The other sidebar section titles, categories, archives, meta, and others, do not use template tags which generate their own titles. These are set inside of PHP statements which "print" the text on the page. While these could be put inside of heading tags, WordPress uses the _e() function to display or "echo" the text titles while also marking the text as a possible target for language translation. If you will be developing your theme for public release, using the echo functions is highly recommended.
You can style these individually or all the same. Some Themes, like the Default Theme, put all these in <h2> headings so the list headings will all look the same. Therefore, they may or may not use style references for each section. You may add them if you need them to change the look of each section of links.
The search form is found within the searchform.php. It may be found in different locations within the sidebar. To style the overall search form, use the search ID. Here is a list of the individual areas of the search form which may be styled by default. You may add style classes to gain more control over the look of your search form.
<li id="search">
<label for="s">Search:</label>
<form id="searchform" method="get" action="/index.php">
<div>
<input type="text" name="s" id="s" size="15" /><br />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>
</li>
The search form area, input, and button can be styled in many ways, or left with the default input and "button" look.
The Meta links may be shown as text or icons representing the various links. The XHTML and CSS validation links may use the W3 icons. The various Feeds can also be represented as icons. Or left as text. It's up to you. Use of the feeds within your sidebar with text or icons is covered by the article WordPress Feeds.
The footer is found within the footer.php template file. In both the Default and Classic Themes, the footer contains little information.
Classic Theme
<p class="credit">
<!--15 queries. 0.152 seconds. -->
<cite>
Powered by <a href='http://wordpress.org'
title='Powered by WordPress, state-of-the-art
semantic personal publishing platform.'>
<strong>WordPress</strong></a>
</cite>
</p>
</div>
The footer's content is styled with the credit class and the paragraph and cite tags.
The tag displays the number of mysql queries used on the page and the time it took for the page to load, in HTML commented code. It is there for the administrator's convenience and use. It is only visible within the page's source code. If you would like to display this visible on the page, remove the comments. It's look will be influenced by the credit class style of the paragraph tag. On the template file, it looks like this:
<!--<?php echo $wpdb->num_queries; ?> queries. <?php timer_stop(1); ?> seconds. -->
Default Theme
<div id="footer">
<p>Blogging in the WordPress World
is proudly powered by
<a href="http://wordpress.org/">WordPress</a><br />
<a href="feed:http://example.com/feed/">Entries (RSS)</a>
and
<a href="feed:http://example.com/comments/feed/">
Comments (RSS)</a>.
<!-- 18 queries. 0.186 seconds. -->
</p>
</div>
The Default Theme's footer is styled by the footer ID and the paragraph tag. While the footer area itself maybe styled by the footer, the paragraph tag controls the text within it. To style the paragraph tag differently within the footer than the rest of your page:
#footer p {styles}