How to build our theme:
You can download a copy of the theme used on this site here.
Our theme uses the following files:
Theme File Descriptions
Author Template: author.php
<?php get_header();?>
<div id="content">
<div id="authorpage">
<?php
if(get_query_var('author_name')) :
$curauth = get_userdatabylogin(get_query_var('author_name'));
else :
$curauth = get_userdata(get_query_var('author'));
endif;
?>
<!--START THE LOOP-->
<h2>About: <?php echo $curauth->nickname; ?></h2>
<dl>
<dt>Website</dt>
<dd><a href="<?php echo $curauth->user_url; ?>"><?php echo $curauth->user_url; ?></a></dd>
<dt>Profile</dt>
<dd><?php echo $curauth->user_description; ?></dd>
</dl>
<h2>Posts by <?php echo $curauth->nickname; ?>:</h2>
<ul>
<!-- The Loop -->
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<li>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title(); ?>">
<?php the_title(); ?></a>,
<?php the_time('d M Y'); ?> in <?php the_category('&');?>
</li>
<?php endwhile; else: ?>
<p><?php _e('No posts by this author.'); ?></p>
<?php endif; ?>
<!-- End Loop -->
</ul>
</div>
</div><!--/content-->
</div><!--interior-->
<div id="sidebar">
<?php get_sidebar();?>
</div>
<?php get_footer();?>
back to top |
live author page example
Theme Style Sheet: style.css
/*
Theme Name: Our Theme
Theme URL: http://www.wordpress28vqs.com/our-theme
Description: This is the example theme for the book.
Author: Jessica Neuman Beck and Matt Beck
Author URI: http://www.wordpress28vqs.com
Tags: 2 column, simple, microformat, widgets, fixed width
Version: 1.0
This theme has been designed as an example for WordPress Visual Quickstart.
*/
*{
font-family:tahoma, verdana, helvetica, sans-serif;
margin:0;
padding:0;
}
body{
background:#ddd;
color:#111;
font-size:13px;
}
a{
color:#02b2e3;
text-decoration:none;
}
a:hover{
color:#a72592;
}
code{
display:block;
background:#ffe;
border:1px solid #a72592;
padding:10px 10px 20px 10px;
font-family:monospace;
white-space:pre-wrap;
}
img{
border:0;
}
#exterior{
background:#eee;
border:1px solid #ccc;
margin:5px auto;
width:990px;
}
#interior{
background:#fff;
border:1px solid #222;
float:left;
margin:5px;
min-height:600px;
width:810px;
}
#menu li, #sidebar li{
list-style:none;
}
#sidebar{
background:#f41c33;
border:1px solid #222;
float:right;
margin:5px 5px 0 0;
min-height:600px;
text-align:center;
width:160px;
}
#sidebar h2{
font-size:15px;
color:#222;
}
#sidebar li{
margin:10px;
color:#fff;
}
#sidebar li li{
margin:0;
}
#sidebar li a{
color:#fff;
display:block;
border-bottom:1px dotted;
margin:0 2px 0 1px;
}
#sidebar li a:hover{
color:#222;
}
#wp-calendar{
margin:0 auto;
}
#wp-calendar *{
color:#fff;
}
#header{
background:#02b2e3;
border-bottom:1px solid #222;
}
#header h1 a{
color:#000000;
display:block;
font-family:Verdana,sans-serif;
font-size:48px;
font-variant:small-caps;
height:120px;
letter-spacing:-2px;
line-height:120px;
text-align:center;
}
#menu li, #menu li a{
display:block;
float:left;
height:22px;
line-height:22px;
font-size:14px;
}
#menu li a{
background:#eee;
border-bottom:1px solid #aaa;
border-right:1px solid #aaa;
color:#222;
padding:0 10px;
}
#menu li a:hover, #menu li.current_page_item a, #menu li.current_page_ancestor a, #menu li.current_page_parent a{
background:#ccc;
}
#submenu{
margin:5px 0 15px 0;
}
#submenu li, #submenu li a{
display:block;
float:left;
list-style:none;
margin-left:5px;
}
#submenu li.current_page_item a{
text-decoration:overline;
}
#footer{
clear:both;
text-align:center;
margin-right:173px;
}
#footer *{
font-style:normal;
font-size:12px;
color:#a72592;
}
#content{
clear:left;
margin:30px 10px;
}
#content h1, #content h2, #content h3, #content h4{
margin-top:10px;
}
#content p{
margin-bottom:1.5em;
}
.alignleft{
float:left;
}
.aligncenter{
display:block;
text-align:center;
margin:0 auto;
}
.alignright{
float:right;
}
.entry-title,.entry-title *{
background:#a72592 none repeat scroll 0 0;
color:#fff;
margin-top:20px;
padding:5px;
}
.entry-title a:hover{
color:#222;
}
.entry-body{
margin:5px;
}
.entry-body ol, .entry-body ul, .entry-body dl{
margin-bottom:1.5em;
}
.entry-body li{
list-style:square;
margin-left:20px;
}
#authorpage ul {
list-style-type:none;
margin: 5px 10px;
}
#authorpage ul li {
border-bottom:1px dotted;
margin:5px 15px;
}
#authorpage dl {
margin: 5px 10px;
}
#authorpage dt {
margin:5px 15px;
font-size:125%;
}
#authorpage dd {
margin:5px 15px;
}
.metadata{
border:1px solid #bbb;
color:#444;
font-size:11px;
margin:5px 500px 0 0;
padding:2px 10px;
}
.metadata a{
color:#a72592;
}
#single-nav{
margin:10px 0;
}
#comments{
clear:both;
margin-top:50px;
}
#commentform{
margin:20px;
}
#comment{
width:740px;
}
#submit{
background:#a72592;
color:#fff;
border:0;
font-size:15px;
padding:2px;
cursor:pointer;
}
back to top
Single Post Template: single.php
<?php get_header();?>
<div id="content">
<!--START THE LOOP-->
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="entry">
<h2 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<div class="entry-body">
<?php the_content(); ?>
<div class="metadata">
<span class="author">By <?php the_author_posts_link(); ?><span><br/>
<span class="date"><?php the_time('F jS, Y'); ?></span><br/>
<span class="categories">Categories <?php the_category(' » '); ?></span><br/>
<?php
$taglist = get_the_tags();
if ($taglist) {
echo "<span class=\"tags\">Tags ";
$lasttag=end($taglist);
foreach($taglist as $val) {
echo "<a href=\"".get_tag_link($val->term_id)."\" rel=\"tag\">".$val->name."</a>";
if($val !== $lasttag){echo ", ";}
}
echo "</span>";
}
?>
</div>
<div id="single-nav"><span class="alignleft"><?php previous_post_link(); ?></span> <span class="alignright"><?php next_post_link(); ?></span></div>
<div id="comments">
<?php comments_template(); ?>
</div>
</div>
</div>
<!--END THE LOOP-->
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
</div><!--/content-->
</div><!--interior-->
<div id="sidebar">
<?php get_sidebar();?>
</div>
<?php get_footer();?>
back to top
Sidebar Template: sidebar.php
<ul>
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar() ) : ?>
<li>
<h2>About</h2>
<p><?php bloginfo('description');?></p>
</li>
<li>
<ul>
<?php wp_list_bookmarks();?>
</ul>
</li>
<li>
<h2>Calendar</h2>
<?php get_calendar(); ?>
</li>
<?php endif; ?>
</ul>
back to top |
live single post example
Screen Shot: screenshot.jpg
This is a small image file that is used as a thumbnail in Appearance > Themes.
back to top
Page Template: page.php
<?php get_header();?>
<div id="content" class="page">
<!--START THE LOOP-->
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="entry">
<h2 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php
/* SUB MENU */
if($post->post_parent)
$children = wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0");
else
$children = wp_list_pages("title_li=&child_of=".$post->ID."&echo=0");
if ($children) { ?>
<div id="submenu">
<ul>
<?php echo $children; ?>
</ul>
</div><br style="clear:left;"/>
<?php } ?>
<div class="entry-body">
<?php the_content(); ?>
</div>
</div>
<!--END THE LOOP-->
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
</div><!--/content-->
</div><!--interior-->
<div id="sidebar">
<?php get_sidebar();?>
</div>
<?php get_footer();?>
back to top |
live static page example
Main Index: index.php
<?php get_header();?>
<div id="content">
<!--START THE LOOP-->
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="entry">
<h2 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<div class="entry-body">
<?php the_content(); ?>
<div class="metadata">
<span class="author">By <?php the_author_posts_link(); ?><span><br/>
<span class="date"><?php the_time('F jS, Y'); ?></span><br/>
<span class="categories">Categories <?php the_category(' » '); ?></span><br/>
<?php
$taglist = get_the_tags();
if ($taglist) {
echo "<span class=\"tags\">Tags ";
$lasttag=end($taglist);
foreach($taglist as $val) {
echo "<a href=\"".get_tag_link($val->term_id)."\" rel=\"tag\">".$val->name."</a>";
if($val !== $lasttag){echo ", ";}
}
echo "</span>";
}
?>
</div>
</div>
</div>
<!--END THE LOOP-->
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
</div><!--/content-->
</div><!--interior-->
<div id="sidebar">
<?php get_sidebar();?>
</div>
<?php get_footer();?>
back to top |
live index example
Header Template: header.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="description" content="<?php bloginfo('description'); ?>"/>
<title><?php bloginfo('name'); ?> <?php wp_title(); ?></title>
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" />
<link rel="stylesheet" media="all" href="<?php bloginfo('stylesheet_url');?>"/>
<!-- FEED LINKS -->
<link rel="alternate" type="application/rss+xml" href="<?php bloginfo('rss2_url');?>" title="RSS 2.0 Feed"/>
<link rel="alternate" type="application/atom+xml" href="<?php bloginfo('atom_url');?>" title="ATOM Feed"/>
<?php if(is_single()){?>
<!-- COMMENT FEED LINKS -->
<link rel="alternate" type="application/rss+xml" href="<?php bloginfo('comments_rss2_url');?>" title="RSS 2.0 Feed For Comments"/>
<link rel="alternate" type="application/atom+xml" href="<?php bloginfo('comments_atom_url');?>" title="ATOM Feed For Comments"/>
<?php }?>
</head>
<body class="<?php our_bodyclass();?>">
<div id="exterior">
<div id="interior">
<div id="header">
<h1><a href="<?php bloginfo('home');?>"><?php bloginfo('name');?></a></h1>
</div>
<div id="menu">
<ul><?php wp_list_pages("depth=1&title_li=&link_before=<span>%26raquo;%20</span>");?></ul>
</div>
back to top
Functions File: functions.php
<?php
function our_bodyclass()
{
if(is_front_page())
{
$classes[0]="front-page";
}
else{
$classes[0]="articles";
}
if(is_page())
{
global $post;
$classes[1]="page";
$classes[2]=$post->post_name;
}
if(is_single())
{
global $post;
$classes[1]="post";
$classes[2]=$post->post_name;
}
if(is_category())
{
$classes[1]="category-".single_cat_title('', false);
}
/* output */
foreach($classes as $key=>$val)
{
if($key!=="")
{
echo $val." ";
}
}
}
function our_postclass()
{
$classes[0]=$post->post_title;
$classes[1]=$post->post_category;
$classes[2]=$post->post_parent;
/* output */
foreach($classes as $key=>$val)
{
if($key!=="")
{
echo $val." ";
}
}
}
/* ADD WIDGET SUPPORT TO SIDEBAR */
if (function_exists('register_sidebar'))
{
register_sidebar();
}
?>
back to top
Footer Template: footer.php
<div id="footer">
<cite>© <?php echo date('Y');?> <a href="<?php bloginfo('url');?>"><?php bloginfo('name');?></a></cite>
</div>
</div><!--/exterior-->
<iframe src="http://www.wordpress28vqs.com/wp-mail.php" name="mailiframe" width="0" height="0" frameborder="0" scrolling="no" title=""></iframe>
</body>
</html>
back to top