Porting WordPress themes to Serendipity – Part 4

Thank you for joining me again. In part three we worked on the entries, specifically the entry date and title, the meta underneath the title and the entry footer. The dusk theme is so well designed that we are now able to tackle comments, and in this article we are going to work on two separate elements. First we’re going to work on the comment title, and then we’re going to structure the way we display comments. I promised in part three this would be exciting, so lets get straight into it. Download dusk-part4.zip.

Dusk theme entry footer
Entry Footer on Detail Page

As users of Serendipity we are spoiled by the volume of information available on our blogs, for example we have trackbacks and multiple users by default, whereas other blogs such as WordPress don’t. This puts extra demands on theme designers to find ways of presenting this information without cluttering up the screen. The dusk theme has given me the idea of making the entry footer different on detail pages from the overview page. What I’m going to do is remove the comment and trackback links from the detail page entry footer. So that the information is still available to the blog visitor, I’m going to put this information into the trackbacks and comments title instead. The image to the left shows what this will look like.Change entry footer and comment title
So that our detail page entry footer is different from the overview page we need to add some extra smarty code. It isn’t terribly complex, we just need to open entries.tpl in our dusk folder, make our change, and save the file. Start by finding the code to configure the entry footer, and add an {if} statement that only generates the comment and trackback links if we are not viewing a detail page. The underlined code is what we’re adding.

<div class='serendipity_entryFooter'>{$CONST.POSTED_BY}
<a href="{$entry.link_author}">{$entry.author}</a>
{if not $is_single_entry and not $entry.is_extended}
{if $entry.has_comments}

Then toward the end of the code that configures the entry footer place a closing {/if} statement immediately before the closing <div>


This small change is immediately visible when viewing the detail page, but now we need to change the trackback and comment title so that Serendipity tells us how many trackbacks or comments the entry has. The code to do this is a little more complex, but still easily explained. I’ll use the trackback title as the example;

<div class="serendipity_commentsTitle">
{if $entry.trackbacks == 0}{$CONST.TRACKBACKS} {else}{$entry.trackbacks}
{if $entry.trackbacks >= 2}{$CONST.TRACKBACKS} {else}{$CONST.TRACKBACK}

The code above tells Serendipity to that we want to change the text it displays in the trackback title so that if there are no trackbacks it should display the usual ‘Trackbacks’ title, but if the entry has either two or more trackbacks, or just one trackback, then display the number of trackbacks and either the word ‘Trackbacks’ or ‘Trackback’ whichever is relevant. The result of this code is that if we have 6 trackbacks we’ll see the title ’6 Trackbacks’, and if we only have 1 trackback we’ll see the title ’1 Trackback’, and if there are no trackbacks, we’ll see the title ‘Trackbacks’.

In the code example above the smarty variable $entry.trackbacks is the actual count of trackbacks for that entry, whereas the variables $CONST.TRACKBACKS and $CONST.TRACKBACK are the text expressions that Serendipity uses, and are defined in the language files, and by using these in our theme we ensure that users who speak a different language will still see the correct wording if their language is supported.

Converting the comments title to this format uses exactly the same code as above, but we change our variables. $entry.trackbacks becomes $entry.comments, $CONST.TRACKBACKS becomes $CONST.COMMENTS, and $CONST.TRACKBACK becomes $CONST.COMMENT.

Finally, add the following style to your stylesheet;

.serendipity_commentsTitle {font-size:1.4em; font-weight:bold;}

This small addition to the stylesheet makes the comment and trackback title the same size and weight as the entry title.

Change the way comments are displayed

dusk theme comments in linear mode
Linear Comments

The dusk theme uses an ordered list <ol> to set up the comment numbering. We can use the same code for linear mode comments, and this actually makes our comments look very attractive, but WordPress has no comparison for our threaded mode so we have to create a new layout for our threaded comments. For this reason I’ve decided to radically change the code in our Smarty comments.tpl file. The developers of Serendipity have obviously anticipated that a theme designer might want to branch away from the traditional default method of just adding some padding to the threaded comments because they’ve provided a range of Smarty variables that really give us enormous scope to change the way we handle comments. Check out the two screenshots above and below to see what I mean.

dusk theme comments in threaded mode
Threaded Comments

I think offering completely different formatting for linear and threaded mode comments adds to the usability of our theme, and to our blog. All of the changes we’re going to make to our comment layout are made in the Smarty comments.tpl file. The zipfile you downloaded before already has my changes, so open this, and lets take a look at the new structure of the Smarty code. I’ve removed the $entry.viewmode variable from within the comments loop and placed it at the beginning of the comments;

{if $entry.viewmode eq $CONST.VIEWMODE_LINEAR}
Linear mode comments go here
Threaded mode comments go here

Once we’ve changed the structure of our comments.tpl we can do almost anything we like to linear or threaded comments, but we should quickly add a couple of missing styles to our stylesheet, and these are .serendipity_center{}, .serendipity_msg_important {}, and .serendipity_msg_notice{}. These don’t affect the actual comments but they are needed before and after the comments. We also need to change the name of one the Dusk styles so that the Serendipity comments are displayed correctly. In your stylesheet, change .commentauthor{} to .comment_source_author {}.

Next we need to arrange the elements in our comments.tpl file so that comments are displayed like in the WP Dusk theme. What I did was cut and paste the different blocks of code so that they are placed on screen in a different order. I won’t paste the source code into this page because it is quite long. The most important thing to remember when changing the order of the comment elements is to make sure you find all of the code surrounding that particular element and copy the complete block, for example, if you plan to move the ‘reply’ link for the comments, don’t just move the <a href…>reply link</a>, you need to also move the {if} statement that surrounds it

{if $entry.allow_comments}
(<a class="comment_reply" href="#serendipity_CommentForm" id="serendipity_reply_{$comment.id}" onclick="document.getElementById('serendipity_replyTo').value='{$comment.id}'; {$comment_onchange}">{$CONST.REPLY}</a>)

Linear mode comments
If you download the zipfile for this tutorial and open the comments.tpl you’ll notice some additional changes from the traditional serendipity comment layout. First, you’ll notice the {$CONST.SAYS} variable after the comment author name. Second, the addition of the .commentmeta style. This is actually from the Dusk theme and styles the text immediately underneath the comment author. Third, you’ll notice the permalink to the comment is now contained within the time stamp for the comment. The Dusk theme used this convention so it seemed appropriate to continue. I also added an extra smarty variable {$CONST.PERMALINK_COMMENT}, which creates the wording for the alt text that appears when the user’s cursor hovers over the timestamp. You can change this in the language file for this template.

Once these changes had been made I also added the ordered list <ol> so that our comments are numbered the same way as the original dusk theme. You might ask why I didn’t just use the numbering that is already included within the default comments template, and in linear mode it actually doesn’t matter much, we get the same result, but by using an ordered list we get the same styling as the Dusk theme. If I had continued to use the Serendipity numbering I would have had to use the ‘value’ property for our list items and since this is deprecated in XHTML I decided this wasn’t desirable. Another alternative might have been to create the illusion of an ordered list with padding and margins of the existing styles used by Serendipity but this seemed cumbersome and quite silly.

Threaded mode comments
If you study the threaded comments image you’ll notice the child comments have a change of text. The parent comment places the word ‘says’ after the author name, and in threaded mode I feel that child comments should stand out more, so I thought a change of text of child and grandchild comments would be a nice touch. Notice how the child comment has the word ‘replied’ while the grandchild comment has the phrase ‘adds this comment’. These phrases are defined in the template language file so you could change them to suit the mood of your blog. I also added some complimentary background shading. In threaded mode I decided that regardless of how many levels or comment are made that I would restrict the display to three tiers. Much more than this and the page starts getting very messy and distracts the eye.

Creating our new threaded comments is actually very easy, and requires that we add some additional Smarty code around the {$CONST.SAYS} variable. To make the change we need to identify whether the comment is a parent, child or grandchild, and luckily the Serendipity developers have anticipated our need and given us the variable $comment.depth which is set to 0 for top level comments (our parent comment), 1 for child comments, 2 for grandchild comments, 3 for great-grandchild etc.

By adding some Smarty code we can get Serendipity to assign a different style to each tier. Remember I said I was restricting my tiers to 3, the following code shows how this is done;

{if $comment.depth == 0}{$CONST.SAYS}{elseif $comment.depth == 1}{$CONST.REPLIED}{else}{$CONST.ADDS_THIS}{/if}

I’ve seen a different method of doing exactly the same thing in the php code for Serendipity, the ‘select case’, but I haven’t seen this used in Smarty code so I’ve extended the {if} by placing an {elseif} between, and if you wanted to add additional tiers of comments I believe you simply add extra {elseif} statements before the {else}.

We use the same block of code to give each tier its own style, as the following code demonstrates;

<div id="serendipity_comment_{$comment.id}" class="serendipity_comment serendipity_comment_author_{$comment.author|@makeFilename} {if $entry.author == $comment.author}serendipity_comment_author_self{/if} {if $comment.depth == 0}comment_threaded_child0 {elseif $comment.depth == 1}comment_threaded_child1{else}comment_threaded_child2{/if}">

Stylesheet changes
There are several change to the stylesheet that are needed, and the most obvious being the styles needed to style our threaded comments differently. I also added a margin of 20px to the bottom of all comments to put some spacing between them. The threaded comment styles are named .comment_threaded_child0 {}, .comment_threaded_child1 {}, and .comment_threaded_child02 {} respectively. You could customise the way the comments are displayed by modifying these styles.

My Comment Form

Comment Policy: Thank you for reading my blog, and I ask if you like an article please click the Facebook like, or leave a comment.

This will help me improve my blog and give me the motivation to write even more articles that you might find interesting, or create more HTML templates, or even offer advice on writing your own blog.

If you leave a comment please stay on topic and contribute to the discussion. Comments that are spammy or not on topic will be deleted without warning.

Oh one more thing, if you want a photo to show with your comment, go get a gravatar.