(In which I continue taking apart a Wordpress theme to make it work with Graffiti. Part I. Part II. Part III.)
We're finally ready for the last piece of the jigsaw. I've created the layout.view file that determines the common look-n-feel for the site based on the Chronicles theme, and the index.view file that determines what a list of posts looks like. It's now time for the post.view file, the view that determines how to display a single blog post.
Apart from the comments, in effect this is much the same as a single post in a list of posts, so we can reuse the HTML/Chalk code we have from index.view. Of course, there's no list of posts, and we use $post.Body and not $post.Excerpt but that's pretty obvious.
Onto the comments section, then. Here's the PHP code for that.
<?php comments_template(); ?>
Yeah, well, that's brilliant, that. There's no analog in Graffiti, so we're just going to have to roll our own. The best way to do this is to go to the Chronicles webpage, and click on the Test Run link. You'll get an example blog with the theme. Click on the comments link on one of the fake posts, and you'll get an example single post with a comments section. From this you can "view page as source" in your browser, and copy/paste the comment HTML into your post.view file.
From this, and viewing one of the supplied Graffiti themes (so you can get the loop code and the names of the comments properties) it's a piece of cake to roll up the loop again into a chunk o' Chalk. Here's what I got:
1: #foreach($comment in $comments) 2: #beforeall 3: #if($comments.Count == 0)4: <h3 id="comments">No responses to $post.title</h3>
5: #elseif($comments.Count == 1) 6: <h3 id="comments">1 response to $post.title</h3>
7: #else 8: <h3 id="comments">$comments.Count responses to $post.title</h3>
9: #end10: <dl class="commentlist">
11: #nodata 12: #if($post.EnableNewComments)13: <div class="entry">
14: <p>Feel free to add a comment...</p>
15: </div>
16: #else17: <div class="entry">
18: <p>No new comments allowed.</p>
19: </div>
20: #end 21: #each22: <dt id="comment-$comment.Id" #if($comment.CreatedBy == $post.CreatedBy) class="author" #end>
23: <span class="comment_num">
24: <a href="#comment-$comment.Id" title="Permalink to this comment">#$count</a>
25: </span>
26: 27: <strong>
28: <a href="$comment.WebSite">$comment.Name</a>
29: </strong>
30: 31: on $comment.Published.ToString("MMM dd yyyy") at $comment.Published.ToString("h:mm tt")32: </dt>
33: 34: <dd id="comment-body-$comment.Id" class="entry#if($comment.CreatedBy == $post.CreatedBy) author#end">
35: $comment.Body 36: #if($isUser)37: <a href="javascript:void(0);"
38: onclick="Comments.deleteComment('$urls.AdminAjax', $comment.Id,'comment-$comment.Id','comment-body-$comment.Id'); return false">
39: Delete Comment40: </a>
41: #end42: </dd>
43: #afterall44: </dl>
45: end 46: 47: if($post.EnableNewComments)48: <h3 id="respond">Leave a Comment</h3>
49: <form action="$url" method="post" id="comment_form">
50: 51: #if($isUser)52: <p class="unstyled">
53: Logged in as $user.ProperName <a href="$urls.Logout">[Logout]</a>
54: </p>
55: #else56: <p>
57: <input class="text_input" type="text" name="author" id="author" value="" tabindex="1" />
58: <label for="author"><small>Name (required)</small></label>
59: </p>
60: <p>
61: <input class="text_input" type="text" name="email" id="email" value="" tabindex="2" />
62: <label for="email"><small>Mail (will not be published) (required)</small></label>
63: </p>
64: <p>
65: <input class="text_input" type="text" name="url" id="url" value="" tabindex="3" />
66: <label for="url"><small>Website</small></label>
67: </p>
68: #end 69: 70: <p>
71: <textarea class="text_input text_area" name="comment" id="comment" rows="7" tabindex="4"></textarea>
72: </p>
73: <p>
74: $macros.CommentButton("%{id='submit', tabindex='5', value='Submit'}") 75: <div style="display:none;" id="comment_status"></div>
76: <input type="hidden" name="comment_post_ID" value="$post.Id" />
77: </p>
78: </form>
79: endThis code also contains the comment form, should the post allow further comments.
Actually, I discovered after a week or so that this code had a bug that I'd copied directly from one of the supplied Graffiti themes. If you look carefully, it attempts to identify whether a comment was written by the author of the post or not, and displays the comment differently.
#if($comment.CreatedBy == $post.CreatedBy)
Although $post.CreatedBy is the correct property on the post, $comment.CreatedBy does not exist for the comment. It's obvious from reading the rest of the code that it should be $comment.Name, but it did cause me a couple of anxious minutes. With this change in place, my comments get highlighted in a contrasting background color.
And with that, I've come to the end of my small set of posts on how to change a Wordpress theme into Graffiti. I'll admit to having made more changes than just those I've described here (I've widened the basic theme display — it suits posts with code better), but once you have the basics, you can tweak to your heart's content.
Now playing:
Everything But the Girl - The Heart Remains a Child
(from Walking Wounded)
Loading links to posts on similar topics...
No Responses
Feel free to add a comment...
Leave a response
Note: some MarkDown is allowed, but HTML is not. Expand to show what's available.
_emphasis_**strong**[text](url)`IEnumerable`* an item1. an item> Now is the time...Preview of response