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.

Now Hear This!

With all the talk about Flash versus HTML5 you might be forgiven for thinking that HTML5 is just about video. It’s not, of course. HTML5 is a major extension of HTML in many areas including media.

Today, I’d like to explore HTML5 audio, which is similar to HTML5 video in many respects, but fundamentally different in others. For starters, a video element is essentially just a TV set embedded in a webpage whereas audio can serve multiple purposes – four examples:

• Sound effects. A button can make a sound when it’s clicked. How about a swoosh sound when a division is toggled open or closed?
• Alerts and notifications. A little bell can sound when an AJAX request completes and updates a page section. Or, an audio “Uh Oh!” can play when you enter a malformed email address into a input field.
• Background sounds. Some web pages can benefit from background music. But say you have a photo gallery of birds. Wouldn’t it be nice to be able to click one and hear it tweet?
• Spoken content. Yes, we have podcasts, but we also need something simpler such as pronunciations of foreign words and phrases, or a click-to-have-this-post-read-to-you feature so you can go off and browse other webpages while I continue to read this one to you.

S i l e n c e.

Yo Dawg, I can’t hear your website!

This isn’t as dumb a statement as it first, um, sounds. Web developers have shied away from including sound in webpages because of several difficulties:

• Confusion – There are codecs and there are file formats. A codec is a method of encoding audio data. A file format is a container for the codec and optional metadata, such as a song title. Some file formats can accommodate multiple codecs; other formats are codec specific. For simplicity, we can narrow this discussion to the most popular file formats/codecs for the Web. These are:
  • wav – An uncompressed format. A wav file with 30 seconds of silence is the same size (megabytes) as a file with 30 seconds of symphonic music.
  • mp3 – A popular format for music that uses a lossy compression format resulting in file sizes typically 1/10 the size of a wav file with the same audio content.
  • ogg – An open-source alternative to mp3 that also uses a lossy compression format.
• Cross-browser incompatibility – Unlike images, where all major browsers support the three major file types—gif, jpg and png—all browsers do not support all audio formats. For instance: mp3 is a proprietary format and its decoding software cannot be included in GPL-licensed, open-source applications such as the Mozilla Foundation’s Firefox browser. Here’s a table showing which formats are supported by the current versions of the major web browsers:
  

  	IE	Firefox	Safari	Chrome	Opera
  wav	NO	YES	YES	NO	NO
  mp3	NO*	NO	YES	YES	YES
  ogg	NO	YES	NO	YES	NO

  (* IE8 does not recognize the audio element at all. The IE9 beta works only with mp3 files. )

• Plugin required – HTML4 Browsers do not support audio natively. A plugin is required and JavaScript must be enabled. While most browsers support audio with a distributed default plugin, web developers must still use the ugly and opaque object, embed and param elements to bring sounds to a webpage.
• Insufficient processing power – For the first time visitor to a page, it can take several seconds for an older or overloaded browser to load the player code, download, decode and play a audio file. This pretty much nixes using sound for mouseover effects, even simple click sounds for navigation buttons.

YouTube made Web video workable. No such service existed to popularize the use of audio in webpages. On the contrary, Napster.com and iTunes focused attention on downloadable music applications. Wouldn’t it be great if there was an easy way to incorporate sounds on a webpage for other purposes. Good News! There is. All major browsers now support basic HTML5 audio with the notable exception of Internet Explorer.

The HTML5 Audio Solution

HTML5 audio consists of the audio element and a JavaScript API for playing the sound it represents. The element is a container (it has both opening and closing tags) and what’s inside is fallback content for legacy browsers and search-bots. It can be written simply as:

<audio src="url" autoplay loop>
        Aw, snap. Your browser doesn't support HTML5 audio!
</audio> 

The above would be perfect for playing background music on a webpage. it could be placed anywhere in the body of the document—heard but not seen. For creating a controllable audio player, the controls attribute can be added to the opening tag.

<audio src="url" controls>
        <a href="url">Download the audio file</a>
</audio> 

Which, depending on your browser will create a player like one of these:*

IE	Download the audio file
Firefox
Safari
Chrome
Opera

(* Just pictures of the controls in different browsers. They don’t work here; neither does the link.)

Unfortunately, because of the differing support among browsers for the three file types, this approach won’t work in all browsers. That means having at least mp3 and ogg audio file versions and using browser detection to figure out which to load.

But wait. There’s an alternate form of the audio element that takes a different approach: try one format and, if it doesn’t work, try another. You still need at least two files but the syntax is much simpler.

<audio id="bgSound" loop>
        <source src="audio/bgSound.mp3" type="audio/mp3" />
        <source src="audio/bgSound.ogg" type="audio/ogg" />        
        <-- lnsert fallback Flash Player code here --">
</audio> 

The audio element must be in the body of the html document. I’ve given an id attribute to the above so it can be referred to by JavaScript statements. Place a script element right after the audio element to get its DOM object:

<script type="text/javascript">
  var bgSound = document.getElementById('bgSound');
</script>

Don’t put the JavaScript in the head of the document, the audio element must be defined before its DOM object can be referenced. The DOM object for the audio allows you to change its properties, start and stop the music. To play the audio as page background, add an onload attribute to the body tag:

<body onload="bgSound.play();">

As an alternative, use jQuery in the document head to call the play method at document ready time (when all the HTML is parsed but images may still be loading.)

<script type="text/javascript">
  $(document).ready( function () {$('#bgSound').play();} );
</script>

The jQuery $ function is similar to JavaScript’s getElementById( ) method. You’ll need the jQuery library for this to work. If it isn’t already loaded, placing the following script element in the document head will get it from Google.

<script type="text/javascript"
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">
</script>

To play a sound effect when the user’s mouse is over a link, remove the loop attribute from the audio tag and add preload, then use the onmouseover attribute in the link. You can get the DOM object and play it in one move:

<audio id="thanks" preload>
        <source src="audio/thanks.mp3" type="audio/mpeg" />
        <source src="audio/thanks.ogg" type="audio/ogg" />
</audio> 

<a href="javascript:void(0);" 
   onmouseover="document.getElementById('thanks').play();">A shout out</a>

Or, to assign a sound to a button like the one at the bottom of this post

<audio id="ella" preload>
        <source src="audio/swonderful.mp3" type="audio/mpeg" />
        <source src="audio/swonderful.ogg" type="audio/ogg" />  
</audio>

<button onclick="document.getElementById('ella').play()">
        I like it!
</button>

The JavaScript API for HTML5 Media elements contains many more properties and features including a track property which can be used to segment a file into separate sounds of different durations. One audio element could be used to (pre)load dozens of different sound effects for a website. Not all advanced API features will be supported by all browsers in the near future, but eventually, using sound on a website will become as natural and as easy to do as using images.

A shout out to my friends at WWWAC who helped test HTML5 Audio on the IE9 beta release.

What do you think of HTML Audio?    I like it!

It is intended as a guide for content creators and Web developers who wish to  create webpages pleasing to people and search robots.

The book contains dozens of examples of HTML techniques to add style to any website. Plus, an entire chapter is devoted to using HTML on blog posts, eBay selling pages, Google Docs, Wikipedia articles and in email marketing.

This edition, published by Addison-Wesley, is the fourth edition of HTML Manual of Style originally published by Ziff-Davis Press in 1994.

Links to HTML Manual of Style pages on the Web.

• Pearson Higher Education / Addison-Wesley – My publisher

• InformIT – Look for my articles on HTML5

• Amazon.com – get the Kindle Edition: $9.99!

• Safari Books Online – Download selected chapters

• SoftPro Books – Yet another bookseller.

• Facebook page – a work in progress.

• Follow @HTML5pro on Twitter – My alter ego.

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. 

Let’s say you have a page on your website and you would like to offer your readers the ability to jot down notes related to the content of that page in some kind of input field. Furthermore, since you expect visitors to revisit the page from time to time, you’d like to store their notes somewhere so that the input field can be loaded when they next load the page. Before HTML5, you would either use a server-side process, cookies or some combination of the two to make this happen. With HTML5, there’s a third choice: the localStorage window object.

First, let’s start with the input field. We could use a textarea element but in HTML5, any element can be turned into an input element by adding the contenteditable attribute:

<ul id="notepad" contenteditable="true">
  <li></li>
</ul>

In the  CSS for this list element, we want to set its size and position:

#notepad {
 height: 20%;
 width: 20%;
 display: none;
 position: fixed;
 top: 0.5in; right: 0.5in;
 overflow: auto;
 padding: 1em;
 border: thin solid;
 list-style-type: none;
 background-color: #fffff0; /* light yellow */
}

This will place the list element 1/2 inch down and in from the top-right corner of the browser’s window. The bordered box will take up 1/5 of the window’s width and height and scrolling will be enabled if there is more content then fits. The display property is set to “none” initially. The user will be able to make the notepad list visible by clicking a button with an onclick handler.

<button id="notepad_toggle"
        onclick="$('#notepad').toggle()">Notepad</button>

I’m using jQuery for the onclick handler because it makes it easy to target elements . If you copy this code, make sure you load jQuery somewhere in the document’s head.

HTML5 extends the window object with the localStorage property and two primary methods: setItem(name, value) and getItem(name) to set and retrieve name/value pairs of data items. Any number of such items can be stored with a webpage and each page’s storage object is independent of any other page’s. Unlike cookies, local storage items are never sent by the browser to the server and thus provides a efficient means of saving page state information even for megabyte data items.

For our example, we can store the contents of the notepad element each time it is changed. We will do this with the blur method, detecting when the user leaves the notepad to do something else. Here’s some jQuery that does that nicely:

$('#notepad').blur(function () {
  localStorage.setItem('notepad', this.innerHTML);
});

How nice is that? The storage doesn’t have to be initialized; it’s just there waiting for you to throw something into it.

When the page is first loaded we need to check if the notepad contents has been saved from some previous visit by this browser and if so, use the stored value to replace the inner contents of the list. This can be done with the following JavaScript statement:

  if ( localStorage.getItem('notepad') ) {
    var notepad = document.getElementById('notepad');
    notepad.innerHTML = localStorage.getItem('notepad');
  }

Note that there’s no conflict in the three uses of ‘notepad’ in the code above. The name for the local variable can be anything as can the name of the stored data item. Neither has to be the same as the UL element’s ID. Hopefully, I’m avoiding confusion by naming everything ‘notepad’ and not adding any.

Since this is only going to work on some browsers, let’s test to see if local storage is available. If it isn’t,  we can just hide the the button that makes the notepad visible.

if (!window.localStorage) $('#notepad_toggle').hide();

or, for debugging, we can call an alert message.

All of the code can go into a script element embedded in the content body, like this blog post, for example:

Notepad

Click the button above and enter anything in the light yellow notepad that opens in the top right corner of your HTML5 capable browser. Enter anything you want – I’ll never see it, nor will anyone else. What’s entered in your local storage stays in your local storage. Try dragging and dropping images, tables, links and other thingys. Notice something interesting? You can’t use HTML to markup your own typing but anything you drag or paste in retains all of its HTML formatting. Now Go Away! Come back to this page sometime later (with the same browser) and click the notepad button again. There’s your stuff!

Click here to see the code for a stand-alone demo to get you started.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Notepad Demo</title>
<!-- (c) 2010 by Larry Aronson --> 
<style>
    body  { padding: 36px; }
    #notepad {
     height: 20%;
     width: 20%;
     display: none;
     position: fixed;
     top: 0.5in; right: 0.5in;
     overflow: auto;
     padding: 1em;
     border: thin solid;
     list-style-type: none;
     background-color: #fffff0; /* light yellow */
    }
</style>

<!-- let's get our jQuery from Google -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
</script>
<script>
    $(document).ready(function () { 
      if ( window.localStorage ) { 	// see if webstorage is working
        if ( localStorage.getItem('notepad') ) {
          var notepad = document.getElementById('notepad');
          notepad.innerHTML = localStorage.getItem('notepad');
        }
        $('#notepad').blur(function () {	// save when exiting the notepad
          localStorage.setItem('notepad', this.innerHTML);	
        });
      } 
      else { 				
        $('#notepad_toggle').hide(); 	// hide button if no webstorage			
      }
    });  
</script>
</head>  

<body>
  <button id="notepad_toggle"
  	  onclick="$('#notepad').toggle('slow')">Notepad</button>  
<ul id="notepad" contenteditable="true">
<li> </li>
</ul>

</body>
</html>  

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.