Chad Coleman

Web Design Tricks

Here is a round up of some very useful tricks and snippets for web designers.

• Resizeable Background Image with jQuery
• 15 Wicked CSS Tricks
• Build a jQuery Interactive Map
• Better Way To Register the WP Sidebar

Comment Design For Wordpress 2.7

If you’re a Wordpress theme developer, I’m sure you’ve run into the problem of styling, and altering comments in your theme. Now that comments are called through a loop to allow for the much anticipated threaded comments feature, we’ll have to make use of our function file to style the comments.

If you’re like most every other developer, the first thing you want to get rid of is the “says” that follows the authors name. Now we can do it, without having to set the CSS to display none.

01. In your theme directory, open up functions.php. If you don’t have this file, go ahead and create one.

02. Let’s create the function ‘mytheme_comment‘ and paste it into our functions.php file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<?php
function mytheme_comment($comment, $args, $depth) {
   $GLOBALS['comment'] = $comment; ?>
   <li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
     <div id="comment-<?php comment_ID(); ?>">
      <div class="comment-author vcard">
         <?php echo get_avatar($comment,$size='48',$default='<path_to_url>' ); ?>
         <?php printf(__('<cite class="fn">%s</cite> <span class="says">says:</span>'), get_comment_author_link()) ?>
      </div>
      <?php if ($comment->comment_approved == '0') : ?>
         <em><?php _e('Your comment is awaiting moderation.') ?></em>
         <br />
      <?php endif; ?>
      <div class="comment-meta commentmetadata"><a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ) ?>"><?php printf(__('%1$s at %2$s'), get_comment_date(),  get_comment_time()) ?></a><?php edit_comment_link(__('(Edit)'),'  ','') ?></div>
      <?php comment_text() ?>
      <div class="reply">
         <?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
      </div>
     </div>
<?php
        }
?>

Looking at this code, you can see exactly what you want to do to style your comments accordingly. After you’re happy with how you want it, the next step is to create the callback from our ‘wp_list_comments’ in the comments.php file.

03. Open up comments.php in your theme directory, and search for wp_list_comments. Control + F should make short work of that.

The default theme has this exact call:

1

<?php wp_list_comments(); ?>

So we’ll just use the function name that we created in step 2 (mytheme_comment), and call it as a variable:

1

<?php wp_list_comments('callback=mytheme_comment'); ?>

And now, we’ll see the styling reflected in our comments!

Separate Comments From Trackbacks

And for another good tip, you should separate your comments from your trackbacks. It’s just good manners.

In your comments.php file you can create two lists, and call the loop twice. Only for each loop, you can specify which type of comment/trackback is called. Example:

1
2
3
4
5
6
7
8
9

	<h3 class="comment_title">Comments</h3>
		<ol class="commentlist">
            <?php wp_list_comments('type=comment&callback=mytheme_comment'); ?>      
		</ol>
 
	<h3 class="trackback_title">Trackbacks</h3>
		<ol id="pings" class="trackback">
			<?php wp_list_comments('type=pings'); ?>
		</ol>

For some complete code, and even some jQuery for a toggle hide switch on the trackbacks, be sure to read the article by Curtis Henson.

Wordpress 2.6 Released

The latest WP is out. Watch the video with all the newest features.

Adding TimThumb To Your WordPress Theme

TimThumb PHP Script is a custom image-sizing script, that allows you to produce a cropped and sized version of an image. These are great to use along with a Wordpress Magazine Theme. TimThumb has recently been released as open source, and here I will walk you through adding TimThumb to your Wordpress theme. (more…)

WordPress Custom Login

Just made use of the BM Custom Login plugin. If you’re looking to brand your Wordpress login page, for customers, your company, or for fun, then you’ll want to add this one to your list of default plugins.

And for security reasons, you should also implement the Login Lockdown Plugin.

(flickr)