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.

I built the Humintell.com website in WordPress on top of Minimal, a free theme from The WordPress Theme Shop that features variable width columns and other nice enhancements. The wonderful graphic design, typography and layout is from Dean Meyers, who added some of the playful visual effects used on the site. Dean Landsman of the Landsman Communications Group integrated the various online pieces into a coherent whole, creating/editing much of the initial content.

Congratulations, Humintell! And thanks to Howard Greenstein of The Harbrooke Group for referring me to Landsman.

I first met Ann a few years ago when I answered her ad in Windsurfing Magazine for a Windsurfing singles week in Bonaire. It was a wonderful vacation with get-togethers every evening and optional activities during the day if the wind was too light to sail. Bonaire, a Dutch island off the coast of Venezuela, is for windsurfers and divers; Antigua, in the northeast corner of the Caribbean, has 365 beaches and and a hot nightlife.

A few months ago, we started talking about redoing her website. She wanted a separate destination site for each island and she wanted to be able to post articles, pictures and videos. I discussed with her the various hosting options available and the features and capabilities of WordPress. We decided the best approach was for her to start blogging on a free WordPress.com account to get familiar with the process. Later, if she needed additional technology—Wordpress.com limits what you can add to a site—we could move her blogs to a hosted solution.

The result has been immensely satisfying and quite beautiful to see. Ann has taken to blogging like a reef fish takes to the warm, clear blue waters of Bonaire and posts something new just about every day. She’s found her personal voice in writing posts which makes both sites authentic and appealing. She’s learned quickly the ins and outs of using images and embedding YouTube videos. Every time I visit BonaireBliss.com or AntiguaBliss.com I find something new to make me smile and warm my heart.

Howard proposed a robust set of features to showcase their familiarity with leading edge, social media technologies and services. The specifications called for an integrated BBs, an event manager, feature-rich videos, a Flash-powered header with a customized navigation menu tying it all together. Howard and I knew we were pushing the limits of WordPress and that’s what the client wanted to show off.

We started with a three column theme, Seashore by Sadish Bala. I added a video presentation space on top of the  sidebars and a game space below. With a bit of work, I was able to shoehorn the custom flash video the lawyers designed into the header code and replaced the generated navigation menu with a two-level structure.

The four lawyers were already blogging on other sites. This was their first opportunity, not only to write under their own brand, but to actually craft that brand as publishers and editors. As they began to post articles, they became concerned about their authorship rights —they’re IP lawyers, remember, and important ones at that! So, as we neared completion of the project, new feature requests started creeping in.

They wanted special lawyer profile pages so they could edit in additional content about themselves. These page would feature a portrait image and an expanded contact section with a download-able, virtual address card. For these special pages, I cloned the standard single page template and modified it to fetch the page author’s portrait photo from a sub directory of /wp-content. I setup custom fields for the contact information and displayed those next to the portrait image. Following that, I formatted a box to display the most recent posts by that author. Finally, I displayed whatever content they wanted to add via the post editor. Click here to see some of the code.

The head partner of the IP division liked the profile page so much that he wanted a special version just for himself that also displayed  any press articles written about him. I figured out how to accomplish that using a custom post field and some more template programming.

They also wanted to post co-authored articles. I know that there was third-party plug-in that did something like that, but at this late stage of the project, it was easier to add more template modifications to get exactly the functionality the client wanted. The solution we devised features a double portrait image, double email links and a hook to pick up the post for the special lawyer profile pages.

It’s been exciting to watch this blog progress from it’s initial launch last month. Everything we did is being used by the client and it’s all working well.

First, make sure you are logged in as an administrative user. Go to the site admin area (also called the dashboard) and click on the Design tab; then click on the submenu tab, Theme Editor. You should now be looking at a page with a text editing window on the left and a list of theme files on the right. Stylesheet (style.css) should be the active file in the edit window. If it’s not, then select it from the bottom of the list on the right.

Scroll to the bottom of the stylesheet file and add the follow lines. Don’t worry, you only have to do this step once:

.tipbox {
 max-width: 33%;
 float: right;
 font-size: .66em;
 padding: 1em;
 border-width: thick thin thin thin;
 border-style: solid;
 border-color: grey;
}

Click the button labeled “Update File” to save your additions to the stylesheet.

Now, back in the post editor, edit your post as usual. The content of the tipbox should be entered just as if it were an ordinary text, but place that text before the content that you want to flow around the tipbox. Here, we just have one paragraph of text in the box but you can have any content—headings, lists, images, etc., in an floating box.

Once all of your content is in place, click the tab labeled, HTML, at the top of the editing area. The content of the editing area will change showing the marked up content instead of the WYSIWYG version. Find your tipbox content and insert the following text immediately in front of it:

<div class="tipbox">

and the following text immediately after the content:

</div>

Click the Visual tab to return to the WYSIWYG mode and save the draft. The  WYSIWYG mode doesn’t recognize the floating mode, so you’ll have to click on the “Preview this Post” button to see if it worked.

You can create as many tipboxes as you’d like. Enclose any content in a set of division tags  with the class assigned to tipbox – headings, paragraphs, lists, whatever, it will be boxed and floated on the right margin.

Customizing the tipbox.

Let’s take a look at the details and see how they can be changed to achieve different effects. The rules added to the stylesheet do this by giving your browser the following instructions:

• Set our tipbox to occupy no more than 1/3 (33%) of the available column width. Unlike an image element, which has a fixed width, a division element normally takes up 100% of the width available, so, we have to tell it to take less.  You can also supply a fixed value, e.g:   max-width: 200px;
• This tipbox element should float on the right margin of the column and whatever content follows this element should wrap around it on the left. This and the previous rule are required to create the sidebar or cutout element; everything else is decoration.
• Make the font size 2/3 of what it would normally be. ‘em’ is a measurement unit equal to the width of the letter ‘m’. We could have also stated the size using a percent or other measurement units: 66%, 9pt, 12px, for example, but em works better for a number of reasons.
• Put 1 em worth of space as padding between the border of the tipbox and the content inside. Space is important for readability.
• Give tipbox a thick border on top with thin borders on the right, bottom and left sides. Borders can also set set as pixels, l.e:  border-width: 5px 2px 2px 2px, would be about the same in this example
• Make the border a solid line. It could also be dashed, dotted, double, inset and outset.
• Make the border grey, You can also give it an explicit color value as an RBG value. see below

Here’s a set of rules that, instead of a border, creates a class called ‘bluebox’ that uses different background and foreground colors to visually define a floating box:

.bluebox {
 max-width: 150px;
 float: left;
 font-size: 9pt;
 margin-right: 8px;
 padding: 5px;
 color: #ffffe0;                 /* light yellow text */
 background: #000066;    /* on a dark blue background */
}

I had just returned from my honeymoon and my home office had been in disarray for months. Helping Tom promised to be more fun than doing my taxes. It was. I like New Critics and regret that I haven’t had any time in this busy year to contribute.

Tom had built New Critics on an older version of WordPress and needed to upgrade to prevent another hack. He wasn’t happy with his current hosting arrangement either and wanted to move the site to a hosting company with more services and better support.

Conversation Hub was also running on a very old version of WordPress and needed an upgrade to take advantage of the newer editing and media management tools and plug-ins available. I was able to upgrade the site, lay in the design changes and install/configure the new plug-ins in plenty of time to meet the conference deadlines.