I have a blogging client who has a love-hate relationship with computing. This client publishes daily and has become quite adept at the mechanics of doing so, successfully building traffic and a solid following. But when it comes to handling the blog’s administrative tasks, my client balks, refusing to look at any of the admin level menus. “I don’t like being a person who knows just enough to be dangerous,” my client has said.

The latest request from this client was to list the blog’s most popular posts in the sidedbar. It’s a WordPress site and there are many plugins available that will provide a widget for this task. Most are based on comment count as this is the metric that WordPress stores with each post record in its database. Some of the more sophisticated plugins make API calls to other services, such as Twitter and Google, to gather ranking data.

But nothing worked quite right for this client who had become a proficient Google Analytics user as well as a ardent Twitter user. I couldn’t find a popular posts plugin that would reliably match my client’s own subjective sense of popularity. I finally sent an email saying: “You want your readers to see your best stuff, in that respect, the numbers can provide guidance but your own judgement is the best metric.” I promised to figure something out that would allow the selection and ranking of posts although I didn’t have a clue how.

One of the joys of computer programming comes from those moments when you recognize that the particular little problem you’re working on is just a special case of a larger, more interesting and easier to solve problem. In this case, the larger problem was how to enable a WordPress author to publish formatted content to a sidebar widget. If I could solve that problem then my client could simply edit a page containing an ordered list of titles linked to the most popular posts. These could easily be copied from other pages in the WordPress dashboard. The client wouldn’t  need any admin level privileges. All I had to do was setup a text widget with code that pulled in the content of a designated page — A sidebar page.

How to build a WordPress sidebar page widget

Rather than write a dedicated sidebar widget, which is kind of complicated even though the WordPress codex has several examples to copy and paste from, I decided to write a WordPress shortcode which could be used in a sidebar text widget. This shortcode could also be used in other posts or pages on the site — going again for the more general and easier solution.

To start with, I created a new static page with the title, “Popular Posts”. Before you do this and publish the new page, check to see if it will automattically appear in your navigation menus. If you’re using the Menu Manager (included in WordPress 3.0+,) you’re probably okay since there’s a setting for this that’s off by default. If your theme does not use the Menu Manager, you might want to make the new page a child of some other page to exclude it from your navigation.

Next, we have to write a function that will output the contents of a page. This is easy. WordPress provides a built-in function just for that purpose called, get_page( ). We are going to use a variant of that function, get_page_by_title( ), and pass the title of the page (instead of the ID) as a shortcode parameter. Here’s the code for the function:

function my_show_page( $atts, $content = null ) {
    extract(shortcode_atts(array( 'title'=>'' ), $atts));

    if ($title != '') {
        $page_data = get_page_by_title( $title );
        return $page_data->post_content;
    }
    else {
        return '';
    }
}

The first two lines are the standard setup for a shortcode. The parameter, $atts, will contain the shortcode’s parameters. In our case this is the page’s title which is then extracted by the second line of the code. If no title is passed, it’s given an empty string value. Setting the variable $content to null allows us to place the simple shortcode:

[showpage title="Popular Posts"]

wherever we want to display the content of the page “Popular Posts” .

The body of the function is a simple if statement that makes sure a title is provided, then goes and gets the content of that page and returns it. Note that the content is returned unfiltered. That is, it’s unaffected by any plugins (e.g: ShareThis) or other code that modifies content.

The function code goes into your theme’s function file,  functions.php. Make sure you backup this file before you make any changes!! The function code can go anywhere in the file (except, of course, inside of another function) provided that it’s inside a set of php tags.

The next step is to register the shortcode so that it’s available for use. This is just a short command that also goes in the theme’s function file:

add_shortcode('showpage', 'my_show_page');

It can go either before or after the function. I usually place it after the function along with comments to guide any future programmers who may work on my clients’ sites.

Next, we have to enable shortcodes in text widgets. This is not enabled by default in WordPress because of security concerns. Sidebar text widgets are places where people often embed code from outside sources. The concern is that such embeded code might contain a shortcode that could conflict with something else on your blog or otherwise do nasty stuff. This is usually not a problem for smaller, personal blogs, however, I’ll emphasize again the importance of backing up your theme’s functions file before making any changes. Here’s the command to enable shortcodes in text widgets:

add_filter('widget_text', 'do_shortcode');

Add the above to your functions file, save it and test the blog in a separate browser window to be sure it’s still working. Errors in a theme’s functions file will usually crash the public portion of a WordPress blog, but will leave the admin dashboard in working order.

Lastly, add a text widget with the shortcode to your sidebar. Here’s a screenshot from my client’s site illustrating this.

For your convenience, here’s the entire block of commented code that I added to my client’s function file:

/**
* Create a shortcode to display a page's content
*/
//
// [showpage title="page_title"]
//
function my_show_page( $atts, $content = null ) {
    extract(shortcode_atts(array( 'title'=>'' ), $atts));
    if ($title != '') {
        $page_data = get_page_by_title( $title );
        return $page_data->post_content;
    }
    else {
        return '';
    }
}
// register the shortcode
add_shortcode('showpage', 'my_show_page');
//
// Enable the use of shortcodes in text widgets.
add_filter('widget_text', 'do_shortcode');

Now that we see how easy it is to get formatted content into a sidebar widget, perhaps you have some ideas on what can be done with custom shortcodes in sidebar widgets. If so, please share them by leaving a comment below. Thanks.

It was a rather quick project thanks to the detailed Photoshop document provided as a spec for the front and single post pages. I started by creating a child theme from WordPress’s default Twentyten theme. The advantage of using a child theme is that all of your theme modifications are isolated in the child theme directory and are preserved when the theme is updated. Knowing that the way WordPress handles images in due for a revision in an upcoming version, I wanted to position Sekonic’s blog to take advantage of any new image handling features WordPress introduces via the default theme.

This was the first blog on which I implemented a Featured Post capability and I combined that with one of my favorite theme mods: the excerpt switch, to provide the post author with finer control of what appears on the blog’s front page. If a post has a featured image, then the medium-sized version of that image appears on the front page above the post’s body or excerpt. A featured image can be one of the images appearing in the post, an image from the site’s Media Library or an external image referenced by a URL.

Matt also gave me the freedom to use CSS3 on the blog to create the rounded corners and drop shadows in the design spec. To achieve these kinds of effects without using the CSS3 border-radius and box-shadow properties, a designer must create three overlapping division elements with different background images for the top, bottom and sides of a box. With CSS3, only a single element is needed and no background images have to be loaded. The disadvantage is that border-radius and box-shadow are recognized by the current versions of Firefox, Safari, Opera and Chrome but not by Internet Explorer. IE9, now in beta release, does support these properties so it’s only a matter of a few months time before IE users get the full design treatment.

Then, just for fun, I added CSS3 transitions to the navigation tabs. The idea behind CSS3 transitions is that when an element’s property changes (e.g: the background and text color of an navigation tab when the mouse hovers over it, ) the duration and other aspects of the transition can be controlled.  For the Sekonic Blog’s navigation tabs, I specified a 1.5 second duration from the base state (dark background, light-blue text) to the hover state (gray background, white text with drop-shadows) to visually reflect the blog’s tagline: “Control Light”.

I hope you enjoy the Sekonic blog. Building a website with such good writing and compelling images was a real pleasure for me.

Their marketing director was looking for new ways to connect with their current clients and customer base but didn’t have to budget to do a full redesign of their web site. Recreating the current site’s structure and design in WordPress, adding social sharing and other functionality with plugins and widgets  looked like the solution but there would be challenges in the project.

• There were over 300 html files on the existing site without much organization. A major overhaul of the web site had apparently been done 6 or 7 years ago but the earlier generation of files had not been deleted. Internal links and navigation menus were a mess.
• A two column front page that pulled post lists from different categories needed to be built and it had to be editable by the client. Templates for other special page types would need to be created.
• Oradell needed a way to manage their busy calendar of events which included everything from special lectures to pet bereavement group session at multiple locations.
• A large amount of content had been collected over the years that needed curating and conversion including profiles and pictures of 100 doctors and staff. I would need to duplicate their doctor-popup windows.

Lisa Davis, Oradell’s director of marketing and I worked our way through the content sorting the pages into a navigable hierarchy. We played with the front page’s features and layout over the course of the project until it finally looked and felt right. I built a special template for the Services & Staff pages that included a dynamically generated menu of all of the hospital’s departments. Each department’s page is a child page of the Services & Staff page.

I installed the WordPress events manager. This is a powerful piece of programming. It’s highly configurable and easy to use but, otoh, required a lot of configuration for Oradell’s requirements.

The most fun was writing shortcodes – one to show posts from a specific category in the content of a page and another to insert a doctor or staff profile in a post or page. The first  shortcode:

[showposts category="featured" display="title"]

in the content of a page produces a listing of permalinked post titles in the “featured” category. The other choices for the display option are “excerpt” and “post”. These are used throughout the site.

The doctor shortcode was more complicated because doctor information needed to be displayed in different contexts with different requirements: in the body of a post, on the various departments pages and in the complete directory of personnel. For each doctor or staff member, the profile consisted of the person’s name, academic credentials, job title, image and bio. Since several of their doctors were interested in blogging, I decided to register all the doctors and staff as blog contributors and use the extra IM user fields to store the titles and credentials. For example, using this shortcode in a post:

[doctor name="John Dolittle" role="true" creds="true" hide="false"]

will cause Dr. Dolittle’s (not an real Oradell employee) complete profile to be inserted, including his credentials and job title following his name plus the bio with a left-aligned photograph. Setting the hide parameter to “true” will hide the bio and photo but with a jQuery toggle, Somewhat like this:

John Dolittle, DVM, MD – Chief of Staff

Dr. John Dolittle lives in a little town called, Puddleby-on-the-Marsh in a little house on the edge of the town. The house was quite small; but his garden was very large and had a wide lawn and stone seats and weeping-willows hanging over. He is very fond of animals and keeps many kinds of pets. Besides the gold-fish in the pond at the bottom of his garden, he has rabbits in the pantry, white mice in his piano, a squirrel in the linen closet and a hedgehog in the cellar.

All in all, I liked working on the new Oradell website. It presented interesting challenges and the people I worked with were wonderful.

Even though I gave her my standard disclaimer that I am an information architect, not a graphics designer, she gave me full reign on changing any design elements. “Just don’t make me look at a bunch of themes!” was her only requirement.

“That’s fine.” I replied. “you’re already using the MistyLook theme which I like so much that I’ve used it on my own site.” All that was needed design-wise was a change from MistyLook’s muted grays and greens to patriotic reds, whites and blues.

The big unknown in estimating the time and cost of this project was podcasting. The vast majority of Joyce’s posts consist of transcripts following an audio player control. Joyce complained about the difficulty she and her producer, Wayne, had in getting each podcast attached to a WordPress.com post. I hadn’t done much work with podcasts so I couldn’t tell if the problems stemmed from her methodology or from a problem with WordPress.com itself. The only way to find out was to copy one of her audio files and try to setup podcasting on my development site.  I started with PodPress, one of the more popular podcasting plugins. It worked like a charm.

Building a replacement WordPress site is not as straight forward as it might seem. A WordPress installation internalizes its URL. By that I mean the site’s full URL is stored in the database in several places and this complicates creating a new WordPress instance on any address other than the final production URL. There are two ways around this problem, both of which present difficulties.

1. Build the site on a temporary URL and convert to the production URL at launch time.
2. Modify the local DNS on a development machine in order to install the site on the production URL.

The first approach is easier up to the conversion point. The conversion requires dumping the database, running it through a filter to change the internal URLs and reloading. It’s kind of scary since it essentially means killing and resurrecting the site, then waiting a few nail-biting hours for the DNS change to propagate across the Internet before you know if the conversion was successful or not.

The second approach is safer but  has the downside that the new site cannot be seen by the client unless she also has a spare machine on which she can modify her local DNS. Even if that’s the case, modifying your local DNS is not trivial, especially on a Windows PC where, if you don’t do it right, you can screw up your entire Internet access.

Still, whenever possible, I use the second approach and send emails with screenshots when I need the client’s input. I did this with Reimagine America but, instead of email, Joyce and I communicated using Skype, taking advantage of its screen sharing and file transfers capabilities to work together on the design and layout.

For Reimagine America’s front page, I imported the showposts shortcode function I used on Oradell.com. This allowed Joyce to choose which topics (WordPress categories) to feature, how many posts to show in each topic and whether to show just the title or the title and excerpt.

As a bonus, I also copied the “Show All Articles” page that I developed for Profoto-USA extending it with the ability to sort by category as well as by date and title. I find having a page with the full index of all post titles an important addition to any blog. Click on the screen shot to the right to see the page in action. 

Someone had started a blog for Profoto-USA using a customized theme but left it an unfinished mess. The sidebar was all screwed up, the more tag wasn’t working, there were no social-sharing functions and no control over the main menu – to name just a few of the problems. Profoto-USA is about the importance of good photographic lighting with dozens of interesting articles (some of the best authored by Ron) illustrated with beautiful photographs. Please click the screenshot below to check it out.

Fixing the sidebar, installing social sharing widgets and enabling the WP 3.0 menu manager was straight forward. The real challenge was finding a way to give authors more control over the content. The more tag, mentioned above, provides the ability to place a marker in a post so that on the blog’s front page, the post is displayed up to the marker, followed by a link to the rest of the article. I got that working but it wasn’t enough to manage the huge amount of content. The beginning paragraphs of a post often do not make the best summary, especially with long magazine-style articles. WordPress provides the ability to hand-craft a article summary, called an excerpt, but this feature has to be coded into the theme. Some themes show post excerpts on their front page; some show full posts (up to the first more tag.) I decided to give Profoto-USA the choice of which to use on a per-post basis using a custom field.

The previous developer had hard-coded a modified Recent Posts sidebar widget that showed, for each post, the post title and a linked thumbnail image. The thumbnails are large: 304 x 190 pixels, and only the first two or three appeared “above the fold.” The obvious solution was to use a sideshow plugin that cycled through the thumbnail photographs. Now, I’ve used a number of such plugins before and the general problem with them is that they only do what the plugin author designed them to do plus whatever user configurable options that author cares to code in. Imho – most of them fall short. Since most of the code for fetching the post data was already working, I decided to use some jQuery to add the animation effects and navigation controls to make it into a sideshow (click for nerdy technical details.)

<div id="post-slides">
    <div class="post-slide">  <!-- first slide -->
        <a href=..." title="..."><img ... /></a>
        <h3><a href=".." title="...">...</a></h3>
    </div>

    <div class="post-slide">  <!-- second slide -->
        ...
    </div>

    ...
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $('#post-slides').show().cycle({
            fx: 'fade',
            speed: 1000,
            timeout: 10000,
            next: '#next_slide',
            prev: '#prev_slide'
        });
    });
</script>

<h4>Recent Articles</h4>
 <div id="slideshow-nav">
   <div id="prev_slide">
     <a href="#" title="previous article">&lt;&lt;</a>
   </div>
   <div id="next_slide">
     <a href="#" title="next article">&gt;&gt;</a>
   </div>
 </div>

This took much less time than I anticipated – less time than it would have taken to find and configure a plugin to the client’s specifications. With the extra time on my hands, I decided to give Profoto-USA a feature they didn’t ask for but felt the site definitely needed: an index to all articles showing only the permalinked titles and the meta-info line with author and publication date. I added it to the footer menu without telling them about it.

This site was a blast to work on. I had done a couple of other small repair and rescue jobs for Tom. He is wonderful client; tech-savvy and patient, he pushed for solutions that stretched my skill set and forced me to learn new techniques. Some of the interesting features of onPhilanthropy.com include: customized widget headings, a revamped advertising manager, a Twitter slurp and feeds from companion sites such as, DotOrgJobs.com.

If you are in the dot-org space, please visit onPhilanthropy and check out how good technology can advance good causes. And, of course, feedback is always welcomed.

My client, Kate Nasser – the people skills coach, has grown her consulting business by consistently adding content to her blog/website and by using Twitter, LinkedIn and youTube to draw traffic. A recent SEO/SEM assessment of her site recommended adding more keyword-rich content and reducing some of front page’s  clutter.  This is what the page looked liked.

Advanced Tooltips.

We had a box on the right side of the content area listing a dozen “Needs” linked to different site pages or posts. With each need there was an associated comment (technically, a definition list.) We decided to move the box to the left side of the page (ahead of the straight text content,) placing the comment parts in tooltip boxes that appear as you mouse over the topic part. Kate was free to add more content to the hidden (only from humans) comment parts.

Tooltips are the little yellow boxes that appear when your mouse hovers over a link. The content of the tooltip box is taken from the title attribute of the HTML tag that creates the link. But ordinary tooltips are boring with fixed style and color; yellow wasn’t the best choice given the site’s aqua tones.

So, I installed JQuery Tools from Flowplayer.org which has an easy to use, advanced tooltip tool. JQuery is a library of Javascript functions that make it easy to add dynamic behavior to Web page elements without having to worry about cross-browser incompatibilities. JQuery Tools is a free, lightweight tool collection that provides basic behaviors to attach to any page element. The Advanced Tooltip tool replaces the browser’s builtin tooltip and can be attached to any page element, not just links.

To make Advanced Tooltips work, you have to provide a page element with a unique id to hold the content. It doesn’t matter where it’s placed. The element, typically a division, is dynamically positioned near the moused-over element. The element is re-useable; you only need one holder element for all tooltips of a given style on a page. The tooltip is styled using Normal CSS so I was able to match the colors and typography of that section of the site’s front page.

Technical Details (Expand)

<script src="http://cdn.jquerytools.org/1.1.2/jquery.tools.min.js"></script>
<script type="text/javascript">
<?php if (is_page("2")) { ?>
    $(document).ready(function() {
        $("h3.need-title a").tooltip({ tip: "#TipBox",
                                       offset: [-25, 150],
                                       effect: 'fade' });
    });
<?php } ?>
</script>

<div id="TipBox" class="needs-tips">&nbsp;</div>

#TipBox {
 display:none;
 width: 200px;
}

.needs-tips {
 text-align: left;
 background-color: #fafcfb;
 border: 2px solid #009ea0;
 font: italic 10pt comic sans ms;
 color: #000;
 padding: 3px 8px;
}

Random Quotes

Kate has a bunch of her own quotes and was updating her front page every few days with a new quote from the collection. She asked if there were some way to automate the process. I browsed the various code and plugin collections and found noting simple or suitable. I decided to write my own.

I copied her front page as a new draft page and cloned the default page template and assigned it to the new page. Thus, I was able to work on and test the new features without endangering the site’s current front page. The cloned template would contain custom code to randomly pick a quote and place it at the beginning of the content area. The quotes themselves would be stored (and editable) as custom fields for that page with the key, “quote”.

<?php
    $todaysquote = '';
    $quotes = get_post_meta('2', 'quote');
    if (!empty($quotes)) {
        $todaysquote = $quotes[rand(0, sizeof($quotes) - 1)];
    }
?>
<div class="dailyquote">&ldquo;<?php _e($todaysquote); ?>&rdquo;
<span>&mdash;Kate Nasser</span></div>

First, a PHP variable, $todaysquote, is initialized. Then the WordPress function, get_post_meta(), gets all custom fields from post number 2 (that’s the front page) with key = ‘quote’. The values are returned as an array of strings and assigned to the variable, $quotes. If it’s not empty, the built-in, PHP random number generator picks one of its array items. Finally, the last two lines define the HTML division element that will hold the quote,  enclosing it in smart quote marks and adding Kate’s signature. Note the use of the special echo function,  _e($todaysquote),  to encode any HTML characters that might be in the quote string.

One of the upsides of this technique is that a new front page is seen in most every visit to the front page including those by search engine robots. Over time, this can expand the number of keywords associated with the page. Unfortunately, there’s no easy way to measure which quotes work best. If you do add random content like this to a page, you should check to see if you have a caching plug-in active. You might want to exclude that page from the cache.

I added this feature as a template hack because my client only wanted it on one page which already had a customized template. It could be easily generalized and added as a filter to the theme’s functions file, for example, to append a random quote to post content when generating a single-post view.

As with another law firm blog I recently built, the Air Safety And Law authors wanted thumbnail versions of their portrait photos to appear with the articles they published.  Instead of hacking the template files as I had done with the previous site, however, I formalized the technique and wrote a WordPress filter. Read my recent article on how this works.

A plug-in search turned up nothing. No surprise—Wordpress does not support user profile pictures natively. There’s no field in the database for an user’s image file name. Then I remembered reading an article in Smashing Magazine about filters a couple of months ago. They had an example where a subscribe request was appended to the end of each post’s content. Maybe that technique would work to prepend a photo.

In WordPress, a filter is like a plug-in except for two important distinctions: It’s not packaged for distribution and it’s associated with the theme. That is, you can’t manage the filter from the dashboard’s plug-in manager and, if you change themes, it disappears. That was all right for my purposes. The clients were quite happy with the theme we’d chosen – Mistylook, by Sadish Bala – and I could provide instructions on how to remove the filter from the theme’s functions file should they ever want to “deactivate” the feature.

I got the images from the client for the four lawyer/authors—a wallet-sized image and a thumbnail for each. The larger image would appear on the author’s profile page and the thumbnails would be placed at the beginning of their posts, floated left of the text. For the larger image, I modified the author’s template (author.php) as I had with the previous website. For the thumbnails, I would use the filter approach since post content is accessed in several templates and I wanted a unified solution. For the sake of brevity, I’ll skip the part about the author template mods in this article. If you’re interested in that piece, leave a comment and I’ll write another article.

I created a new directory, /wp-content/authors for the larger images and a sub-directory, /wp-content/authors/thumbs for the smaller versions. In each, I renamed the images files to match the corresponding login usernames. If, for example, there was a user with the login username of ‘bobama’, then the two images files would be: /wp-content/authors/bobama.jpg and  /wp-content/authors/thumbs/bobama.jpg . I did this with an ftp program but you can use the dashboard’s Media manager, in which case, the image files will be somewhere in your /wp-content/uploads directory with your other media files. All of the other work described in this article can be done through the dashboard’s theme editor by an admin user but I highly recommend using a good code editor with color syntax highlighting. BBEdit is my favorite.

A WordPress filter goes into the theme’s functions file (functions.php) and consists of two parts: A function definition and a call to add that function to a named WordPress “hook”. I called my function: add_author_photo() and  added it to the ‘the_content’ hook. You can think of this hook as the point in the page building process when WordPress gets the page or post content from the database and starts to get it in shape for the web page it’s building. WordPress passes the content to the function as a string and expects it back in return. Roughly, the outline of the process looks like this:

<?php
     function add_author_photo($content) {
         ...
         return $content;
     }

     add_filter('the_content', 'add_author_photo');
?>

Note how the entire filter is enclosed in a PHP container. This is important!  Now, all we need to do is fill in the “dots”.

First, we need to make sure that our function does its work in the right place since it will be called anytime WordPress fetches the content from the database. We want the thumbnail photo to appear in posts on the home page and on single post pages, but not on static pages (which are, in a sense, “authorless”) nor on the archive and search result pages and especially not in RSS feeds. The following if statement does what we want:

if (is_home() || is_single()) {
    ...
}

Next, the code needs to check that the image file we want for the current post author actually exists. The client may add more authors and contributors before their photos are available and we don’t want an ugly, empty missing-image square to appear where a nice photo is expected. This is a bit tricky. There’s a PHP function, file_exists(), for checking whether a file exists or not but it takes, as its argument, the full Unix path to the file, as opposed to a URL fragment. WordPress provides a function for doing this: get_theme_root() which returns a string that, depending on your hosting company’s site configuration, might look like this:

/var/web/clients/abc.com/htdocs/wp-content/themes

Since my ‘authors’ directory is at the same level in /wp-content as the themes directory, all I have to do is replace the ‘themes’ part in the string above with ‘authors/thumbs/’ and append the image’s file name. The following two lines of code will assign the username to a variable and do the replacement using  PHP’s  str_replace() function.

$author_uname = get_the_author_meta('user_login');
$author_photo = str_replace(
                    'themes',
                    'authors/thumbs/' . $author_uname . '.jpg',
                    get_theme_root() );

We can check whether the file exists with another if statement:

if (file_exists($author_photo)) {
    ...
}

Now we are ready to add the image tag to the beginning of the post content. I’ll add a CSS class, ‘authorImage’, to the image tag which I’ll use to make the image float left and set appropriate margins and padding (see below.) I’ll also enclose the image in an anchor tag that links the image to the author’s profile page. I’ve laid this out here in several lines for readability. The dot at the end of each line is the PHP concatenation operator.

$image_src = '/wp-content/authors/thumbs/' .
             $author_uname . '.jpg';

$content =  '<a href="/author/' .
            $author_uname .
            '"><img class="authorImage" src="' .
            $image_src .
            '" alt="' .
            get_the_author() .
            '" /></a>' .
            $content;

Here’s a screenshot of the final code I pasted into the theme’s functions file. Because I’m a nice guy, I added  /* comments */ to explain what was going on. Click on the image to open a text division with the actual code you can copy.

[RAW]

<?php
/*  Add authors' photos to posts on the home and single-post pages.
     Copyright 2009 Larry Aronson.

     For a post author identified by username, if the image file:
	/wp-content/authors/thumbs/username.jpg
     exists, it will be prepended to the content, floating left
     of the text and linked to the author's profile page		*/

function add_author_photo($content) {
  if(is_home() || is_single()) {
    $author_uname = get_the_author_meta('user_login');
    $author_photo = str_replace('themes',
         'authors/thumbs/' . $author_uname . '.jpg',
         get_theme_root());
    if (file_exists($author_photo)) {
	 $image_src = '/wp-content/authors/thumbs/' . $author_uname . '.jpg';
	 $content = '<a href="/author/' . $author_uname .
             '"><img class="authorImage" src="' .
	     $image_src . '" alt="' . get_the_author() . '" /></a>' .
             $content;
     }
  }
  return $content;
}

/* remove the following line to deactivate the add photo feature */
add_filter('the_content', 'add_author_photo');
?>

[/RAW]

The final version took a bit of debugging to fix some stupid typing errors but it worked as I wanted it to. A look at the source code for the home page shows the generated image tag and link:

<a href="/author/larryaronson"><img class="authorImage"
   src="/wp-content/authors/thumbs/larryaronson.jpg"
   alt="Larry Aronson" /></a>

All that remained was adding some simple CSS to the style sheet to float the image to the left of the post text. The rules shown below does that and sets appropriate margins.  The images already incorporated a border so I removed the border set elsewhere in the CSS and removed the drop shadow background that Mistylook adds to images as a matter of taste.

img.authorImage {
   float: left;
   margin: 0 1em 0 0;
   border: 0;
   padding: 0;
   background-image: none;
 }

That’s it. I hope you found this article useful. Suggestions for improvements are welcome.

Once Gregory started posting on blog.gpoelaw.com, we realized that his style of writing detailed legalese needed some additional typographic punch so we darkened the text and block justified the paragraphs for additional readability. Under the hood, I added my standard mix of plugins for SEO, Google Analytics and advanced editing.