This post has absolutely nothing to do with teaching or education. It’s totally about blogging. More specifically, WordPress. If you have not yet discovered the wonders of WordPress, I recommend checking it out sometime.

With that disclaimer out of the way, I’ll start out by listing the hacks that I have done, explaining why I did them, and then explaining how I went about adding them. Here goes:

1. Added a featured article
2. Put Featured & Latest images on home page only
3. Thumbnails of all images in main and archive pages
   
4. Moved most ads to search visitors only
5. Added social media links to individual posts and searches
6. Retweet button
   
7. Reader submitted links page
8. Added links to the footer and cleaned up tabs at the top
9. Removed comment pagination
10. Separated comments from trackbacks/pingbacks

Okay, so there’s the list. Let’s dig in and see what I did to make these things happen.

1. Added a featured article
I had seen some of my favorite bloggers (such as ProBlogger and Pro Blog Design), had come up with a way to highlight certain posts (either the latest post, or just any old post that they felt was important) by displaying them differently on the home page. I like the idea, and was thrilled when I was editing a post one day and clicked on the part of the WP-Admin page that said “Visibility: Public” and saw a checkbox for “Stick this post to the front page.”

I was intrigued, checked it, and sure enough, that post ended up at the top of my home page. I did some research and discovered that this is a new feature that was added to WordPress 2.7. Simple enough. But how do I style it to make it look cool?

As I see it, my options were really to run multiple Loops (one with the sticky post, and one with the latest posts), but I’d really need to go overboard and change my whole main page layout if I were going to do that right. I didn’t want to do that. Nevertheless, here are a few different tutorials on doing that:

• Definitive Sticky Posts Guide for WordPress 2.7
• How To Enable Sticky Posts in WordPress Themes
• The Loop – WordPress Codex

2. Put Featured & Latest images on home page only
The other option was to keep the sticky post stylized just like the rest of the posts. This is the default setting once I made on post sticky, so it seemed like the best option. But it just blended in there. There was nothing besides the date to indicate that it wasn’t the latest post.

I fired up GIMP, threw together a cute little “Featured Article” graphic, and then threw in on the page. I opened up index.php and found this line:

<div class="posts">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>


And replaced it with:

<div class="posts">
<?php if (is_home() && !is_paged()) : { ?>
<img src="http://www.soyouwanttoteach.com/wp-content/uploads/2009/04/featured.png">
<?php } endif; ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>


Notice the is_home() && !is_paged() instead of simply is_home(), which keeps the Featured Article image from showing up on page 2, 3, etc. It only appears above the sticky post on the very front page of the blog.

I also decided to make a Latest Articles image to match. I wanted to insert it before the first normal post in the loop, but couldn’t figure out a way to do that. So I just inserted it after the sticky posts right before the endwhile at the end of the loop. I changed:

<?php endwhile; ?>
<div class="navigation">

to:

<?php if (is_sticky() && !is_paged()) : ?>
<img src="http://www.soyouwanttoteach.com/wp-content/uploads/2009/04/latest.png">
<?php endif; ?>
<?php endwhile; ?>
<div class="navigation">

This should work correctly as long as you only have one sticky post. Beyond that, you’re on your own! This was one of the hacks that I couldn’t find any really good tutorials on. If you know of one, by all means let me know in the comments.

3. Thumbnails of all images in main and archive pages
Now that I had highlighted the featured post and stylized things pretty well, I wanted to just include excerpts on the main page.  When I did this, I noticed that the images in some of the posts were too wide and were almost breaking the formatting of the page. I decided that replacing the full size images with thumbnails would be ideal on the main, archive, and search pages. So I did some research on how to do that and came up with these:

• How To Strip Images from WordPress Posts
• Thumbnail for home page  & regular size image for permalink page – WP Support Thread

So all I did was to go index.php, archive.php, and search.php. To do both, we first find the section that starts with:

<div class="entry">

Now we’ll add some lines to it so that it looks like this:

<div class="entry">
<?php $images = get_children(
array(
'post_parent' => $post->ID,
'post_status' => 'inherit',
'post_type' => 'attachment',
'post_mime_type' => 'image', 'order' => 'ASC', 'orderby' => 'menu_order'
)
);

if ( $images ) {
foreach ( $images as $image )
{
$img = wp_get_attachment_thumb_url( $image->ID );
print "\n\n" . '<div><img src="' . $img . '" alt="" align="right" /></div>';
}
}
?>
<?php echo strip_tags(get_the_excerpt('Read the rest of this entry &raquo;'), '<p><a><h2><blockquote><code><ul><li><i><em><strong>'); ?>
</div>

There are two things going on here. First, we are getting the thumbnail for the media file(s) attached to the article. Next, we are displaying the excerpt, but only including those tags listed. This obviously excludes img calls, which is that we’re after. Otherwise, it displays both the image and the thumbnail.

4. Moved most ads to search visitors only
Now that we’ve gotten the main page a little bit more streamlined (and reduced the number of links on the main page, which is great for SEO purposes, by the way), I wanted to make the site a little more reader friendly, while still trying to bring in some money to cover hosting and other expenses related to the blog. I’ve found that search traffic is far more likely to click on AdSense ads than traffic that comes from some of the amazing people who link to my blog. So I don’t like the idea of cluttering the blog up for those good folks who are just here for the experience.

[EDIT]: After trying my hand with AdSense for a while longer, I am still not convinced that it is the way to go. I have removed all non-direct advertising from my site. However, something I am experimenting with is modifying the below code a little bit to add an extra RSS subscribe box at the end of each post when users come from search engines.

To do this, I added a function to my functions.php:

function sywtt_fromasearchengine()
{ $ref = $_SERVER['HTTP_REFERER']; $SE = array('/search?', 'images.google.', 'web.info.com', 'search.', 'del.icio.us/search', 'soso.com', '/search/', '.yahoo.'); foreach ($SE as $source) { if (strpos($ref,$source)!==false) return true; } return false; }

It can go pretty much anywhere in the file. If you don’t have a functions.php, simply create one with that stuff in it.

Then I simply go to wherever I want it in the theme (header.php, single.php, index.php, even in a Widget) and add this:

if (function_exists('sywtt_fromasearchengine')) {
if (sywtt_fromasearchengine()) {
INSERT YOUR CODE HERE
}
}

• How To Display Ads Only To Search Visitors

Added social media links to individual posts and searches
Many blog readers are in love with social media as well as blogging. They love them some del.icio.us, and Facebook, and StumbleUpon action. So I am always happy to give them the ability to easily save my blog posts to one of these. I installed the Bookmark Me plugin, and have tweaked things up just a bit.

My theme was built for me (by Dizzain.com) with a cute little blue strip at the bottom of each post that contained the link to the comments. That’s great, but I noticed that some real estate was there that could easilyused without distracting. I put the bookmark links there.

Nice, but the plugin doesn’t support Facebook. Since many of my readers are college students who are preparing to enter the teaching field, I have to assume that a lot of them use Facebook and share links with friends. So what if I found a way to add Facebook to the bookmark links as well? Here’s how I did it:

<a href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&t=<?php the_title(); ?>" target="blank" style="padding-left: 20px; background: url(http://www.soyouwanttoteach.com/wp-content/plugins/sem-bookmark-me/img/facebook.gif) center left no-repeat;" class="noicon" rel="nofollow">Facebook</a>
<?php the_bookmark_links(); ?>

I put all that at the bottom of my post, right before we start showing the comments. As far as the graphics go, I just found some nice free graphics lists and picked the ones I liked best. I then uploaded them to the plugin directory and overwrote the ones that came with the plugin. Here are some more resources:

• The Best Social Media Icons All In One Place
• Create a “Share on Facebook” link in your WordPress blog

Retweet button
I could have added Twitter to the social media bookmarks, but I like the idea of really highlighting the Retweet phenomenon (especially since I have been hooking up with more bloggers through Twitter lately). So instead, I have gone with the pretty much standard one by Tweetmeme. I personally use the compact version, but either one works. It’s real simple, check out their tutorial here:

• Integrate Tweetmeme Buttons

Reader submitted links page
This is a kind of fun experiment that I decided to try yesterday. It took a bit more work than I thought, but it ended up being a nice addition to the blog, as well as removing some of my responsibility as far as adding links whenever people suggest I add them to my site. I can just point them to the Reader Submitted Links page and voila! Since I didn’t add anything really creative or new to what these guys did, I’ll just provide the links.

• 5 Trends of Popular WordPress Blogs
• Hack Together a User Contributed Link Feed with WordPress Comments

Added links to the footer and cleaned up tabs at the top
I like making the pages easy to navigate, and I also like having the most important information readily available. At the same time, I don’t like everything to be cluttered at the top of the blog. So instead of listing every page anywhere on the blog, I just handpick which links go at the top, which go at the bottom, and which ones go both places. it’s really a pretty simple concept, just not one that I had explored a whole lot with my new theme.

It also allowed me to add a FAQ page, a Privacy Policy, as well as giving me an excuse to audit my pages and delete a handful of them that just weren’t doing what I wanted them to do, or could be consolidated elsewhere.

• 40 Creative Blog Footer Designs
• AdSense-friendly privacy policy sample for AdSense publishers to use

Removed comment pagination
One of the things that I didn’t notice until WordPress 2.7 was that pages started to have their own pages. This can pose problems with search engines. The solution: Simply uncheck the box on the Settings >> Discussion settings page that says Break comments into pages. Easy enough.

• 30 Most Wanted WordPress Comments Page Hacks
• Comment page in WordPress 2.7 and SEO

Separated comments from trackbacks/pingbacks
One of the greatest disruptions to the conversation that goes on in comments are the trackbacks. They’re great, and I love it when people link to my blog. Heck, I wish more people did! But they really detract from the discussions that my readers are having, and they sometimes can make it difficult for a new reader to follow.

The thing it, it’s a little bit different in WordPress 2.7 than in previous versions, so I had to look up how to split the comments from trackbacks. I started off by making some modifications to the comments.php and functions.php files. Now, comments show up on top, and trackbacks show up below.

I simply added this to functions.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='60' ); ?>
<?php if (function_exists('atpu')) { atpu(); } ?>
<?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 }

Next, I opened up comments.php and replaced this code:

<ol class="commentlist">
<?php wp_list_comments(); ?>
</ol>

with:

<ol class="commentlist">

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

<ol class="commentlist">
<?php wp_list_comments('type=pings'); ?>

Finally I went in and edited single.php and replaced:

<?php comments_template(); ?>


with

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

That’s it!

• Comment Design For WordPress 2.7
• How To Control Comments.php In WordPress 2.7

Anyway, I’m interested in knowing what you think about the changes (if you’ve even noticed them). If you have a better or more efficient way for me to make some of these things happen, by all means let me know!

25 WordPress Plugins Every Blog Should Have
50 Reasons To Love Your Job As A Teacher
20 Classic SYWTT Articles And Series

Joel Wagner

Joel Wagner (@sywtt) began teaching band in 2002. Though he had a lot of information, his classes were out of control. He found himself tired, frustrated, disrespected by students, lonely, and on the brink of quitting. He had had enough. He resigned from his school district right before spring break of his second year and made it his personal mission to learn to be a great teacher. So You Want To Teach? is the ongoing story of that quest for educational excellence.