I’ve been on vacation since right before Christmas and have enjoyed the time off. Monday I go back to work all refreshed and ready to go.
After our New Years Eve party, I spent the day doing somethings that had meant to do for a while: PHP coding for my WordPress blog. My PHP fu is not that great but this is how I learn and as hobby’s go, it’s almost productive. Starting with easy ones and working my way down, the list looks like this.
1. Clean up my theme directory.
I make changes to my theme all the time and left junk in the theme directory. There is junk in there from plugins that I was experimenting with, looks that I was trying to accomplsh, etc. I can’t remember it all but I know what I need to keep and my backups are good and current.
2. Setup my Flickr badge as a WordPress plugin to put a widget in the sidebar.
I was using a text widget and hard coded the CSS into my theme’s header.php so that the page would validate properly. That worked but if I changed themes, the styling went out the window. I had wanted to see how to create a widget plugin that inserted the CSS using the wp_head action. By looking at existing plugins I saw how and it’s not hard at all.
Now I can keep the widget no matter which theme I choose and it always validates. Next up to add options in the widget. I’m looking at the Flickr Widget to see how it’s done there. Having GPL’ed code available to examine makes life so much easier.
I want to get an options page just for giggles; I don’t plan on distributing the code since I’m re-using Flickr’s code from here.
3. And now the big one: Fix my comment CSS and get WordPress 2.7 threaded comment callback working properly.
WordPress 2.7 comes with the option of using threaded comments and getting the default output just needs these lines:
<ul class="commentlist">
<?php wp_list_comments(); ?>
</ul>
This produces good valid XHTML output and all that is required is to style it anyway you want. With some CSS I get this:
It’s really easy to do and between Otto and Chris Harrison’s posts, getting it looking good is simple. If you want to learn then visit those two sites and start playing with your theme.
Now if you want to explicitly control the output for threaded comments, you need to use a callback as outlined in Jeremy’s post. I’m adding a comment count and trying to keep the look close to the original theme’s styling. By inserting the theme’s original comment code I can maintain the look.
In my comments.php file I comment out the old line and add one to use the callback.
<ul class="commentlist">
<?php // wp_list_comments(array('avatar_size'=>40,'reply_text'=>'Reply to this comment')); ?>
<?php wp_list_comments('callback=custom_comment'); ?>
</ul>
In my function.php file I’m adding this code. Be warned, I am not a PHP programmer and if anyone sees something really gross please feel free to criticize. The $cmtorder is more of a placeholder and I’m not using it yet.
<?php
function custom_comment($comment, $args, $depth) {
$GLOBALS['comment'] = $comment; ?>
<?php global $cmtcount; ?>
<?php
$pageadd = 1;
if(get_option('page_comments')) :
$page = get_query_var('cpage');
$pageadd = (get_option('comments_per_page') * ($page - 1)) + 1;
$cmtorder = get_option('comment_order');
endif; ?>
<li id="comment-<?php comment_ID() ?>" class="<?php echo tj_comment_class() ?>">
<div class="commentNumber">#<a href="#comment-<?php comment_ID() ?>"><?php echo $cmtcount + $pageadd; ?></a></div>
<div class="comment_mod">
<?php if ($comment->comment_approved == '0') : ?>
<em>Your comment is awaiting moderation.</em>
<?php endif; ?>
</div>
<div class="comment_text">
<?php comment_text() ?>
</div>
<div class="comment_author">
<?php if (function_exists('get_avatar')) { ?>
<?php echo get_avatar($comment, '32'); ?>
<?php } ?>
<p><strong><?php comment_author_link() ?></strong></p>
<p><small><?php comment_date('j M y') ?> at <?php comment_time() ?> <? edit_comment_link(__('Edit', 'sandbox'), ' ', ''); ?></small></p>
</div>
<div class="clear"></div>
<?php echo comment_reply_link(array('before' => '<div class="reply">', 'after' => '</div>', 'reply_text' => 'Reply to this comment', 'depth' => $depth, 'max_depth' => $args['max_depth'] )); ?>
<?php $cmtcount = $cmtcount + 1; ?>
<?php } ?>
This gets the comments formatted close to the theme’s original comments but adds threading. I added the comment count as a “why not?” If you turn on paged comments the comment counter still work. I have not worked out changing the order yet, I’d like to see it working in reverse order if set.
The code is a bit ugly and I’ll clean it up later. It works and I’m not getting and errors in my log so I’m happy for now. The CSS is good and the generated XHTML code is valid.
My only problem is that the javascript reply to comment box is not working exactly the way I want it to.
When you click on the “Reply to this comment” link, the comment box show up outside of that comment’s <li> … </li>. This is probably due to how I’m using comment_reply_link() but right now the codex is a little bit sparse on that topic. I’ve looked at the source code and by changing the parameters, I do get different results, just not the results I want. If I don’t use the callback, the comment box appears within that comment’s <li> … </li>.
I’ll keep playing with it and will be switching them back and forth until I like the output.
