Porting Wordpress themes to Serendipity - Part 1

Page Structure
The first secret to porting the dusk theme is that it uses a css-only two column layout. Viewing the wordpress theme in a browser shows the following basic structure;

<div id="wrapper">

<div id="header">
<div id="title">
</div>
</div>

<div id="content">
<div class="post">
</div>
</div>

<div id="sidebar">
</div>

<div id="footer">
</div>

</div>

We need to replicate this structure within serendipity for the theme to work as it was designed to, so the following is how the structure part of your index.tpl will look. If you're not comfortable editing smarty template files yet, download the zipfile for this article and take a look at my index.tpl. Download dusk-part1.zip.

<div id="wrapper">

<div id="header">
<div id="title">
<h1><a href="{$serendipityBaseURL}">{$head_title|@default:$blogTitle}</a></h1>
<h2>{$head_subtitle|@default:$blogDescription}</h2>
</div>
</div>

<div id="content"><div class="post">{$CONTENT}</div></div>
<div id="sidebar">
{serendipity_printSidebar side="right"}
{serendipity_printSidebar side="left"}
</div>

<div id="footer">
Design Downloaded from <a href="http://beccary.com" title="Beccary">beccary.com</a> | Ported to <a href="http://www.s9y.org">Serendipity</a> by <a href="http://www.carlgalloway.com">Carl</a> </div>

</div>


Getting the background images to work
Our next step must be getting the images to work, because these are the main reason for selecting this theme. Luckily all of the images are referenced from within the stylesheet as background images. To allow serendipity to use them we need to do a couple of things.

First, rename the images folder from 'images' to 'img'. You need to do this because serendipity expects all images to be located in this folder, and having separate image folders for background images and serendipity specific images doesn't make sense.

Having renamed the images folder, open the stylesheet 'style.css' in your favourite text editor. You need to change the path of every background image so that serendipity can find the it. As an example, the body style has the following background;

background: #556777 url(images/bg.gif) repeat-x;

and this needs to be changed to;

background: #556777 url({TEMPLATE_PATH}img/bg.gif) repeat-x;

The {TEMPLATE_PATH} is the smarty variable used to let serendipity know the path to the img folder. Now go ahead and change every other background style that has a background image. There are only five in total, so this shouldn't take too long.

Using the Theme
Congratulations, you have successfully begun to port your first Wordpress theme. Take a look at your new theme in your browser, you'll notice of course there are many differences between Wordpress and Serendipity, and your theme won't yet look like a serendipity theme. In fact we are not finished customising this theme to be used by serendipity.

In my next article we'll rename the styles to comply with serendipity conventions, and then customise the title, entries and comments for this theme. Feel free to comment below so that others can benefit from your experiences.