Table of Contents
- Introduction
- Limitations
- Obtaining a WP 1.2 CSS theme
- The templates
- index
- comments
- comment_preview
- sidebar
Introduction
WordPress 1.2 has many available themes, and many of those themes are nothing more than a CSS file and perhaps a few image files. The templates below will allow those CSS-based WP themes to be used with EE.
The result looks very much like a WP site, but with a few EE extensions such as advanced search and comment preview.
Obviously, the resulting site provides pretty much the same functionality that WP does, which means that much of the power of EE is being unused. However, a WP theme might be useful as a temporary configuration, or as a starting point for developing a richer site, or as a minor weblog associated with a rich site.
Limitations
These templates are designed for WordPress 1.2 themes only. These templates will not work with WordPress 1.5 themes, because WP 1.5 uses a completely different theming engine than WordPress 1.2 does. WP 1.5 themes are PHP-based rather than CSS-based; they would require extensive modification to work with EE.
Some WP themes include customized changes to the PHP files. Since those changes are not part of the CSS stylesheet, they will not be reflected here. Those themes will require more than simply using these templates with the theme’s CSS and image files. However, these templates might be a useful starting point.
I have elected to leave out WP’s links to RSS feeds for comments.
Some of the optional features such as trackback and CAPTCHA have not been tested.
Obtaining a WP 1.2 CSS theme
Probably the best single source for WP 1.2 CSS themes is Alex King’s website. Most, if not all, of those themes should work with these templates.
Download the theme of your choice and unzip it. Note: you might not be using all of the files that get unzipped. Upload any image file(s) to the “images” directory on your server, and then copy and paste the contents of the CSS file into the CSS template in the template group where you have set up the templates below.
The templates
Be sure to set the “assign_variable” statements at the start of each template to the appropriate weblog name, template group name, and CSS template name.
You probably should review the links in the “sidebar” template. You’ll probably want to make some additions, and maybe some other changes too.
index
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
{assign_variable:master_weblog_name="weblog1"}
{assign_variable:this_template_group="weblog"}
{assign_variable:main_stylesheet="css"}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>{exp:weblog:weblog_name weblog="{master_weblog_name}"}{exp:weblog:category_heading weblog="{master_weblog_name}"} category listing for {category_name}{/exp:weblog:category_heading}</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
@import url( {stylesheet={this_template_group}/{main_stylesheet}} );
</style>
</head>
<body>
<div id="rap">
<h1 id="header"><a href="{path={this_template_group}/index}" title="{exp:weblog:weblog_name weblog="{master_weblog_name}"}">{exp:weblog:weblog_name weblog="{master_weblog_name}"}</a></h1>
<div id="content">
{exp:weblog:entries weblog="{master_weblog_name}" disable="member_data|trackbacks" orderby="date" sort="desc" limit="10"}
<h2>{entry_date format="%n/%j/%Y"}</h2>
<div class="post">
<h3 class="storytitle" id="post-{entry_id}"><a href="{url_title_path={this_template_group}/comments}" rel="bookmark" title="Permanent Link: {exp:xml_encode}{title}{/exp:xml_encode}">{title}</a></h3>
<div class="meta">Filed under:
<ul class="post-categories">
{categories}
<li><a href='{path={this_template_group}}' title='View all posts in {category_name}'>{category_name}</a></li>
{/categories}
</ul>
— {screen_name} @ {entry_date format="%g:%i %a"}
</div>
<div class="storycontent">
{body}
{if extended}
{extended}
{/if}
</div>
<div class="feedback">
<a href="{url_title_path={this_template_group}/comments}">Comments ({comment_tb_total})</a>
</div>
</div>
{paginate}
{if previous_page}
<a href="{auto_path}">« Previous Page</a>
{/if}
{if next_page}
—
<a href="{auto_path}">Next Page »</a>
{/if}
{/paginate}
{/exp:weblog:entries}
</div>
</div>
<p class="credit"><!--{total_queries} queries.--> {elapsed_time} || <cite>Powered by <a href="http://www.pmachine.com/expressionengine/" title="Powered by ExpressionEngine"><strong>ExpressionEngine</strong></a></cite></p>
</body>
</html>
comments
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
{assign_variable:master_weblog_name="weblog1"}
{assign_variable:this_template_group="weblog"}
{assign_variable:main_stylesheet="css"}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
{exp:weblog:entries weblog="{master_weblog_name}" disable="categories|custom_fields|member_data|pagination|trackbacks" limit=1}
<title>{exp:weblog:weblog_name weblog="{master_weblog_name}"}: {exp:xml_encode}{title}{/exp:xml_encode}</title>
{/exp:weblog:entries}
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
@import url( {stylesheet={this_template_group}/{main_stylesheet}} );
</style>
</head>
<body>
<div id="rap">
<h1 id="header"><a href="{path={this_template_group}/index}" title="{exp:weblog:weblog_name weblog="{master_weblog_name}"}">{exp:weblog:weblog_name weblog="{master_weblog_name}"}</a></h1>
<div id="content">
{exp:weblog:entries weblog="{master_weblog_name}" disable="member_data|pagination|trackbacks" orderby="date" sort="desc" limit="10"} <h2>{entry_date format="%n/%j/%Y"}</h2>
<div class="post">
<h3 class="storytitle" id="post-{entry_id}"><a href="{url_title_path={this_template_group}/comments}" rel="bookmark" title="Permanent Link: {exp:xml_encode}{title}{/exp:xml_encode}">{title}</a></h3>
<div class="meta">Filed under:
<ul class="post-categories">
{categories}
<li><a href='{path={this_template_group}}' title='View all posts in {category_name}'>{category_name}</a></li>
{/categories}
</ul>
— {screen_name} @ {entry_date format="%g:%i %a"}
</div>
<div class="storycontent">
{body}
{if extended}
{extended}
{/if}
</div>
<div class="feedback">
<a href="{url_title_path={this_template_group}/comments}">Comments ({comment_tb_total})</a>
</div>
{/exp:weblog:entries}
<h2 id="comments">Comments</h2>
<!-- p><a href="#"><abbr title="Really Simple Syndication">RSS</abbr> feed for comments on this post.</a></p -->
{if allow_trackbacks}
<p>The <acronym title="Uniform Resource Identifier">URI</acronym> to TrackBack this entry is: <em>{exp:trackback:url}</em></p>
{/if}
<ol id="commentlist">
{exp:comment:entries weblog="{master_weblog_name}"}
<li class="{switch='alt|notalt'}"
{if comments}
id="comment-{comment_id}">
{comment}
<p><cite>Comment by {url_or_email_as_author} — {comment_date format="%n/%j/%Y"} @ <a href="#comment-{comment_id}">{comment_date format="%g:%i %a"}</a></cite></p>
{/if}
{if trackbacks}
id="trackback-{trackback_id}">
<p><strong>{title}</strong></p>
{content}
<p><cite>Trackback by <a href='{trackback_url}' rel='external'>{weblog_name}</a> —
{trackback_date format="%n/%j/%Y"} @ <a href="#trackback-{trackback_id}">{trackback_date format="%g:%i %a"}</a></cite></p> {/if}
</li>
{/exp:comment:entries}
</ol>
<h2>Leave a Comment</h2>
<p>Line and paragraph breaks automatic, website trumps email,
<acronym title="Hypertext Markup Language">HTML</acronym> allowed:
<code><a href="" title="" rel="">
<b> <blockquote> <em> <i> <strike> <strong></code></p>
<div id="commentform">
{exp:comment:form preview="{this_template_group}/comment_preview"}
<p>
{if logged_out}
<input type="text" name="name" id="author" class="textarea" value="{name}" size="28" tabindex="1" />
<label for="author">Name</label>
Remember me <input type="checkbox" name="save_info" value="yes" {save_info} /> </p>
<p>
<input type="text" name="email" id="email" value="{email}" size="28" tabindex="2" />
<label for="email">Email</label>
{/if}
Notify me of replies
<input type="checkbox" name="notify_me" value="yes" {notify_me} />
</p>
{if logged_out}
<p>
<input type="text" name="url" id="url" value="{url}" size="28" tabindex="3" />
<label for="url"><acronym title="Uniform Resource Identifier">URI</acronym></label>
</p>
{/if}
<p>
<label for="comment">Your Comment</label>
<br />
<textarea name="comment" id="comment" cols="70" rows="4" tabindex="4">{comment}</textarea>
</p>
{if captcha}
<p>Submit the word you see below:</p>
<p>
{captcha}
<br />
<input type="text" name="captcha" value="{captcha_word}" size="20" maxlength="20" style="width:140px;" />
</p>
{/if}
<p>
<input type="submit" name="submit" class="button" value="Say it!" />
<input type="submit" name="preview" class="button" value="Preview" />
</p>
{/exp:comment:form}
</div>
</div>
</div>
</div>
<p class="credit"><!--{total_queries} queries.--> {elapsed_time} || <cite>Powered by <a href="http://www.pmachine.com/expressionengine/" title="Powered by ExpressionEngine"><strong>ExpressionEngine</strong></a></cite></p>
</body>
</html>
comment_preview
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
{assign_variable:master_weblog_name="weblog1"}
{assign_variable:this_template_group="weblog"}
{assign_variable:main_stylesheet="css"}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>{exp:weblog:weblog_name weblog="{master_weblog_name}"}: Comment Preview</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
@import url( {stylesheet={this_template_group}/{main_stylesheet}} );
</style>
</head>
<body>
<div id="rap">
<h1 id="header"><a href="{path={this_template_group}/index}" title="{exp:weblog:weblog_name weblog="{master_weblog_name}"}">{exp:weblog:weblog_name weblog="{master_weblog_name}"}</a></h1>
<div id="content">
{exp:weblog:entries weblog="{master_weblog_name}" disable="member_data|pagination|trackbacks" orderby="date" sort="desc" limit="10"} <h2>{entry_date format="%n/%j/%Y"}</h2>
<div class="post">
<h3 class="storytitle" id="post-{entry_id}"><a href="{url_title_path={this_template_group}/comments}" rel="bookmark" title="Permanent Link: {exp:xml_encode}{title}{/exp:xml_encode}">{title}</a></h3>
<div class="meta">Filed under:
<ul class="post-categories">
{categories}
<li><a href='{path={this_template_group}}' title='View all posts in {category_name}'>{category_name}</a></li>
{/categories}
</ul>
— {screen_name} @ {entry_date format="%g:%i %a"}
</div>
<div class="storycontent">
{body}
{if extended}
{extended}
{/if}
</div>
<div class="feedback">
<a href="{url_title_path={this_template_group}/comments}">Comments ({comment_tb_total})</a>
</div>
{/exp:weblog:entries}
<h2 id="comments">Comment <strong>PREVIEW</strong></h2>
<ol id="commentlist">
<li class="alt">
{exp:comment:preview}
{comment}
<p><cite>Comment by {url_or_email_as_author} — {comment_date format="%n/%j/%Y"} @ {comment_date format="%g:%i %a"}</cite></p>
{/exp:comment:preview}
</li>
</ol>
<h2>Edit or Post Comment</h2>
<p>Line and paragraph breaks automatic, website trumps email,
<acronym title="Hypertext Markup Language">HTML</acronym> allowed:
<code><a href="" title="" rel="">
<b> <blockquote> <em> <i> <strike> <strong></code></p>
<div id="commentform">
{exp:comment:form preview="{this_template_group}/comment_preview"}
<p>
{if logged_out}
<input type="text" name="name" id="author" class="textarea" value="{name}" size="28" tabindex="1" />
<label for="author">Name</label>
Remember me <input type="checkbox" name="save_info" value="yes" {save_info} /> </p>
<p>
<input type="text" name="email" id="email" value="{email}" size="28" tabindex="2" />
<label for="email">Email</label>
{/if}
Notify me of replies
<input type="checkbox" name="notify_me" value="yes" {notify_me} />
</p>
{if logged_out}
<p>
<input type="text" name="url" id="url" value="{url}" size="28" tabindex="3" />
<label for="url"><acronym title="Uniform Resource Identifier">URI</acronym></label>
</p>
{/if}
<p>
<label for="comment">Your Comment</label>
<br />
<textarea name="comment" id="comment" cols="70" rows="4" tabindex="4">{comment}</textarea>
</p>
{if captcha}
<p>Submit the word you see below:</p>
<p>
{captcha}
<br />
<input type="text" name="captcha" value="{captcha_word}" size="20" maxlength="20" style="width:140px;" />
</p>
{/if}
<p>
<input type="submit" name="submit" class="button" value="Say it!" />
<input type="submit" name="preview" class="button" value="Preview" />
</p>
{/exp:comment:form}
</div>
</div>
</div>
</div>
<p class="credit"><!--{total_queries} queries.--> {elapsed_time} || <cite>Powered by <a href="http://www.pmachine.com/expressionengine/" title="Powered by ExpressionEngine"><strong>ExpressionEngine</strong></a></cite></p>
</body>
</html>
sidebar
{assign_variable:master_weblog_name="weblog1"}
{assign_variable:this_template_group="weblog"}
<div id="menu">
<ul>
<li id="links">Links:
<ul>
<li><a href="{homepage}">Home</a></li>
</ul>
</li>
<li id="categories">Categories:
{exp:weblog:categories weblog="{master_weblog_name}" style="nested"}
<a href="{path={this_template_group}/index}" title="View all posts filed under {category_name}">{category_name}</a>
{/exp:weblog:categories}
</li>
<li id="search">Search:
<div id="searchform">
{exp:search:simple_form search_in="everywhere"}
<input type="text" name="keywords" value="" class="input" size="18" maxlength="100" /><br />
<input type="submit" name="submit" value="search" class="button" />
<ul><li><a href="{path=search/index}">Advanced Search</a></li></ul>
{/exp:search:simple_form}
</div>
</li>
<li id="archives">Archives:
<ul>
{exp:weblog:month_links weblog="{master_weblog_name}" backspace="6"}
<li><a href="{path={this_template_group}/index}" title="{month} {year}">{month} {year}</a></li>
{/exp:weblog:month_links}
</ul>
</li>
<li id="calendar">
{exp:weblog:calendar weblog="{master_weblog_name}" switch="id|class"}
<table id="wp-calendar">
<caption>{date format="%F %Y"}</caption>
<thead>
<tr>
{calendar_heading}
<th abbr='{lang:weekday_long}' scope='col' title='{lang:weekday_long}'>{lang:weekday_abrev}</th>
{/calendar_heading}
</tr>
</thead>
<tfoot>
<tr>
<td abbr="{previous_date format="%F"}" colspan="3" id="prev"><a href="{previous_path={this_template_group}/index}" title="View posts for {previous_date format="%F %Y"}">« {previous_date format="%M"}</a></td>
<td class="pad"> </td>
<td abbr="{next_date format="%F"}" colspan="3" id="next"><a href="{next_path={this_template_group}/index}" title="View posts for {next_date format="%F %Y"}">{next_date format="%M"} »</a></td>
</tr>
</tfoot>
<tbody>
{calendar_rows}
{row_start}<tr>{/row_start}
{if entries}<td {switch}="today"><a href="{day_path={this_template_group}/index}">{day_number}</a></td>{/if}
{if not_entries}<td {switch}="today">{day_number}</td>{/if}
{if blank}<td class='pad'> </td>{/if}
{row_end}</tr>{/row_end}
{/calendar_rows}
</tbody>
</table>
{/exp:weblog:calendar}
</li>
<li id="other">Other:
<ul>
{if logged_out}
<li><a href="{path=member/login}">login</a></li>
<li><a href="{path=member/register}">register</a></li>
{/if}
{if logged_in}
<li><a href="{path=member/profile}">account</a></li>
<li><a href="{path=logout}">logout</a></li>
{/if}
</ul>
</li>
<li id="meta">Meta:
<ul>
<li><a href="{path=weblog/rss_2.0}" title="Syndicate this site using RSS"><abbr title="Really Simple Syndication">RSS</abbr> 2.0</a></li>
<!-- li><a href="#" title="The latest comments to all posts in RSS">Comments <abbr title="Really Simple Syndication">RSS</abbr> 2.0</a></li -->
<li><a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></li>
</ul>
</li>
</ul>
</div>