For WordPress 2.7+ Installations

Locate the following code in your index.php or single.php file (whichever file your theme uses to show single post pages):

<?php comments_template(); ?>

Replace that code with the following:

<?php comments_template('', true); ?>

That is it for that file.   Now go to your comments.php file and locate the following code:

<?php if ( have_comments() ) : ?>

Immediately below that code, insert the following code:

<?php if ( ! empty($comments_by_type['comment']) ) : ?>

Okay, once that is done, you’ll next need to scroll down a little further (still in the comments.php file) and locate the following code:

<?php wp_list_comments(); ?>

You’ll want to replace that code with the below code:

<?php wp_list_comments('type=comment'); ?>

Immediately below this function you should see the following code:

</ol>

Directly below that code, place the following code:

<?php endif; ?>

That should take care of the comment loop.  The last step is to insert the code which will display the trackbacks/pingbacks.  This can be placed anywhere below the code we just hacked above:

<?php if ( ! empty($comments_by_type['pings']) ) : ?>
<h3 id="pings">Trackbacks/Pingbacks</h3>
<ol>
<?php wp_list_comments('type=pings'); ?>
</ol>
<?php endif; ?>

Some people prefer to display their trackbacks and pingbacks below the comment form or somewhere else out of the way, so this is really up to you!  Just place the above code where you want to show them.   If you don’t like them showing at all on your blog, just don’t place the above code at all.

Once that is done, it is time to give it a try.  Check it out on your blog and let us know how everything turns out!

For Pre-WordPress 2.7 Installations:

Prior to WordPress 2.7, the comment form wasn’t nearly as functional as it is with the newer versions and also included a lot more code, but it is still possible to separate the trackbacks and comments using the old comment loop.     If you’d like to separate your trackbacks from your comments on a WordPress 2.6 or earlier installation, here is the steps you’ll need to take.

First, access your comments.php file and grab the following code:

<?php foreach ($comments as $comment) : ?>

Immediately after the above code, you’ll want to place the following code:

<?php $comment_type = get_comment_type(); ?>
<?php if($comment_type == 'comment') { ?>

Next, scroll down a little bit and locate the following code:

<?php endforeach; /* end for each comment */ ?>

Immediately before the above code, you’ll want to place this code:

<?php } /* End of is_comment statement */ ?>

This will filter out all of the trackbacks and pingbacks from your main comments loop. Now we need to create a second comments loop to display the trackbacks and pingbacks.  Almost immediately below the code from step 2 you should find this code:

<?php else : // this is displayed if there are no comments so far ?>

Immediately before the above code, you’ll want to place this code:

<h3>Trackbacks</h3>
<ol>
<?php foreach ($comments as $comment) : ?>
<?php $comment_type = get_comment_type(); ?>
<?php if($comment_type != 'comment') { ?>
<li><?php comment_author_link() ?></li>
<?php } ?>
<?php endforeach; ?>
</ol>

You can adjust this code to display how you want to, including using a different header if you have a specific look for your header 3.

If you’ve tried this tutorial, let us know how it worked for you in the comments!

• Code: Add Recent Comments and Top Comments to WordPress
• Code: Adding Edit Buttons to WordPress

One of the things I recommend readers do on these types of blogs which use WordPress is to adjust the date field to instead show the last modified date.   This way posts that were written two years ago won’t have that date if you’ve updated them more recently!

Here is the code you’ll need to easily accomplish this.   As always, you’ll want to make a backup of your single.php file (or any files you will be changing) before proceeding.

Locate the following code in your template (may not look exactly like this):

Posted on: <?php the_time('l, F jS, Y') ?>

Now replace it with the following code:

Posted on <?php the_time('F jS, Y') ?>
<?php $u_time = get_the_time('U');
$u_modified_time = get_the_modified_time('U');
if ($u_modified_time != $u_time) {
echo "and last modified on ";
the_modified_time('F jS, Y');
echo ". "; } ?>

Now your posts should show the last modified date immediately after the original posting date, rather than just showing the original post date!

• Code: How to Display Recent Posts in WordPress
• Code: Display Categories and Archives in WordPress
• Code: Adding Edit Buttons to WordPress

Here is the code you’ll need to easily add the most recent Twitter entry:

<?php
// Your twitter username.
$username = "TwitterUsername";
// Prefix - some text you want displayed before your latest tweet.
// (HTML is OK, but be sure to escape quotes with backslashes: for example href=\"link.html\")
$prefix = "";
// Suffix - some text you want display after your latest tweet. (Same rules as the prefix.)
$suffix = "";
$feed = "http://search.twitter.com/search.atom?q=from:" . $username . "&rpp=1";
function parse_feed($feed) {
$stepOne = explode("<content type=\"html\">", $feed);
$stepTwo = explode("</content>", $stepOne[1]);
$tweet = $stepTwo[0];
$tweet = str_replace(”&lt;”, “<”, $tweet);
$tweet = str_replace(”&gt;”, “>”, $tweet);
return $tweet;
}
$twitterFeed = file_get_contents($feed);
echo stripslashes($prefix) . parse_feed($twitterFeed) . stripslashes($suffix);
?>

Simply add your Twitter username where it says “TwitterUsername” in the code above!

• Code: Add a “Tweet This” Button
• Code: How to Display Recent Posts in WordPress

For those unfamilar with these buttons, they only show up for people who are logged into the admin panel (readers can’t see them).   When clicked, you are routed directly to the post/page or comment within the admin panel so you can edit the post.   It has been my experience that having access to these buttons can save a lot of time when trying to manage and update older posts. 

If you’d like to add an “edit” button on your individual posts or pages, here is the code you will want to place somewhere in your post and/or page template (usually called single.php and page.php) where you want it to display:

<?php edit_post_link(__("**Edit**"), ''); ?>

If you’d like to add an “edit” button to your individual comments, here is the code you need to place somewhere in your comments loop (usually called comments.php) where you want it to display:

<?php edit_comment_link(__("**Edit**"), ''); ?>

Don’t forget that you can also wrap them in a div to control its placement and appearance.

• Code: Add Recent Comments and Top Comments to WordPress
• Code: Display Last Modified Date in WordPress

Well, I for one still believe that categories and archives should be displayed on blogs.   If you’d like to do the same for a WordPress blog, here is the code you’ll want to use.   For your convenience, we’ve provided two options for each:  traditional display and drop-down menus.

Simply paste the WordPress code below in your sidebar.php file where you want the category or archives to display:

Display Categories

<h2>Categories</h2>
<ul>
<?php wp_list_cats('sort_column=name'); ?>
</ul>

Display Categories in Drop-Down Box

<form action="<?php bloginfo('url'); ?>/" method="get">
<?php
$select = wp_dropdown_categories('show_option_none=Select category&show_count=1&orderby=name&echo=0');
$select = preg_replace("#<select([^>]*)>#”, “<select$1 onchange=’return this.form.submit()’>”, $select); echo $select; ?>
<noscript><input type=”submit” value=”View” /></noscript>
</form>

Display Archives

<h2>Archives</h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>

Display Archives in a Drop-Down Box

<select name=\"archive-dropdown\" onChange='document.location.href=this.options[this.selectedIndex].value;’>
<option value=\”\”><?php echo attribute_escape(__(’Select Month’)); ?></option>
<?php wp_get_archives(’type=monthly&format=option&show_post_count=1?); ?> </select>

• Code: How to Display Recent Posts in WordPress
• Code: Displaying Updated Posts in WordPress
• Code: Add Recent Comments and Top Comments to WordPress

In this post, we’ll be providing the code for creating both recent comments and top comments to the sidebar of your WordPress blog.

Displaying Recent Comments

<?php
global $wpdb;
$sql = "SELECT DISTINCT ID, post_title, post_password, comment_ID,
comment_post_ID, comment_author, comment_date_gmt, comment_approved,
comment_type,comment_author_url,
SUBSTRING(comment_content,1,30) AS com_excerpt
FROM $wpdb->comments
LEFT OUTER JOIN $wpdb->posts ON ($wpdb->comments.comment_post_ID =
$wpdb->posts.ID)
WHERE comment_approved = '1' AND comment_type = '' AND
post_password = ''
ORDER BY comment_date_gmt DESC
LIMIT 10";
$comments = $wpdb->get_results($sql);
$output = $pre_HTML;
$output .= "\n<ul>";
foreach ($comments as $comment) {
$output .= "\n<li>".strip_tags($comment->comment_author)
.":" . "<a href=\"" . get_permalink($comment->ID) .
"#comment-" . $comment->comment_ID . "\" title=\"on " .
$comment->post_title . "\">" . strip_tags($comment->com_excerpt)
."</a></li>";
}
$output .= "\n</ul>";
$output .= $post_HTML;
echo $output;?>

Displaying Top Comments

<?php $result = $wpdb->get_results("SELECT comment_count,ID,post_title FROM $wpdb->posts ORDER BY comment_count DESC LIMIT 0 , 10");
foreach ($result as $topten) {
$postid = $topten->ID;
$title = $topten->post_title;
$commentcount = $topten->comment_count;
if ($commentcount != 0) { ?>
<li><a href="<?php echo get_permalink($postid); ?>" title="<?php echo $title ?>"><?php echo $title ?></a></li>
<?php } } ?>

• Code: Displaying Updated Posts in WordPress
• Separating Trackbacks and Comments in WordPress 2.7+
• Code: How to Display Recent Posts in WordPress

Here is the code you’ll want to place in your sidebar.php file where you want the updated posts to display:

<?php
$today = current_time('mysql', 1);
$howMany = 5; //Number of posts you want to display
if ( $recentposts = $wpdb->get_results("SELECT ID, post_title FROM $wpdb->posts WHERE post_status = 'publish' AND post_modified_gmt < '$today' ORDER BY post_modified_gmt DESC LIMIT $howMany")):
?>
<h2><?php _e("Recent Updates"); ?></h2>
<ul>
<?php
foreach ($recentposts as $post) {
if ($post->post_title == '') $post->post_title = sprintf(__('Post #%s'), $post->ID);
echo "<li><a href='".get_permalink($post->ID)."'>";
the_title();
echo '</a></li>';
}
?>
</ul>
<?php endif; ?>

• Code: How to Display Recent Posts in WordPress
• Code: Add Recent Comments and Top Comments to WordPress
• Code: Display Categories and Archives in WordPress

Here is the code you’ll need to display recent posts.  Simply copy the following code and place it in your sidebar.php file where you want the recent posts to be displayed!

<?php query_posts('showposts=5'); ?>
<ul>
<?php while (have_posts()) : the_post(); ?>
<li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
<?php endwhile;?>
</ul>

• Code: Displaying Updated Posts in WordPress
• Code: Display Categories and Archives in WordPress
• Code: Add Recent Comments and Top Comments to WordPress

Unfortunately, many web designers aren’t including separate stylesheets for printers with their designs.  As a result, we decided to write this tutorial to explain how to create a print stylesheet.   Due to most of our readers being on WordPress, we will place our focus there, though this can be adapted for just about any blogging platform!

What is a Print Stylesheet?

Lets start with the definition so you know what we are talking about.  A print stylesheet is an alternate stylesheet for a website or blog that your website will use whenever someone attempts to print a page off of your blog instead of the standard stylesheet.

How Does a Print Stylesheet Work?

A print stylesheet overrides any designated style.css code when someone attempts to print a page off of your website.  If a print stylesheet is created correctly, people printing a webpage will avoid printing the unnecessary elements, such as the header, footer, and sidebars.

How do I Make a Print Stylesheet?

First thing you need to do create your print.css file. This can be done by taking a blank Notepad (or equivalent) file and naming it print.css.  You can also make a copy of your blog’s style.css file and rename it, then remove the code within the copy.

What Code Do I Put Into My Print Stylesheet?

Depending on the setup of the theme your blog is using, this step will either be pretty easy or incredibly difficult.  Basically, we don’t want things like your header or sidebars to appear in your print stylesheet, so you’ll want to setup your print stylesheet to remove these elements:

#header, #nav, #sidebar, #footer .noprint {display: none;}

Depending on how the div id’s are setup, what you put above will vary.  In other words, use the above as a guide, but customize it to match your theme.  You can also use this method to censor out images and other unwanted elements of your post pages (if applicable).  Lastly, if you have your contact information in your footer, you may want to consider leaving the footer on your prints.

Next, you will want to expand your content section so that it looks decent when printed, instead of the content margins your standard style.css uses.  It will probably look something like the following:

#content {width: 100%; margin: 0; float: none;}

Now, to ensure that alternate colors are not picked up when printed, you’ll want to do something like the following to make sure it prints using black ink:

a:link, a:visited {color: #000000}

Because most people use white paper, this should make your printouts better looking.

How To Tell Your Theme to Use the Print Stylesheet

Once you’ve built and uploaded your print stylesheet, the next step is of course to tell your theme to use it when someone prints something!  This is probably the easiest step of all!  You’ll want to simply paste the following code into your themes header file (we recommend placing it just below the standard style.css code):

<link type="text/css" media="print" rel="stylesheet" href="<?php bloginfo('template_url'); ?>/print.css" />

So, there you go!  Hopefully if you’ve followed these steps, and uploaded your new print.css file to your WordPress blog’s theme, anything printed from your website will look much better.

• Code: Add A “Print This” Button
• Separating Trackbacks and Comments in WordPress 2.7+