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

Woven Hand Concert

I was fortunate enough to get to see Woven Hand play in Spokane, Washington last night. Awesome concert.

I didn’t quite get the photos that I would have liked to, due to a couple tall guys in front. But these turned out okay.

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.

Business Telephone System Websites

My current place of employment has a business phone system side of the company. The company was in need of a shopping cart to sell products to a national market.

This web project was created by FT11 Business Systems.

I Broke Up With #

And I’ve been steady with javascript:; ever since.

Ever since I’ve become friends with jQuery, I’ve found that using # inside an anchor href has become occasionally overly jealous and sometimes outright psychotic. After these past incidences, which usually fall in line with using fun stuff like localScroll and scrollTo, I’ve decided to tell # to # sand, and strictly go with javascript:; inside my href.

As # works as an anchor reference point, for the top of your page, you can imagine it may get in the way of content sliders and other plugins and scripts that make use of a #’d href.