If you’ve ever had a problem losing a blog post to an errant web-based WYSIWYG editor, or have struggled cutting and pasting from an MS Word document into a blog post, then you might want to take Windows Live Writer for a spin.

This small Windows desktop client plays nicely with all the major blog platforms out there and offers more formatting options than you may get with your standard blogging interface (eg. tables for starters). 

Go ahead and download Windows Live Writer or read my post over on IBM developerWorks for more information on this nifty little app.

For some years the WordPress platform has been called a ‘lightweight content management system’. It’s functionality goes way beyond that of a standard blogging platform (driven by the large number of plugins and theme extensions), and with a bit of know-how you can mold it to fit your content management needs. That’s just what Anca Mosoiu from Tech Liminal did on a recent assignment to redesign the intranet for a Government organization. She ran through this case study at a recent WordPress Meetup and I caught up with her at her Oakland office and received answers to a number of questions that had been perplexing me since her presentation.

What are the main advantages WordPress offers in terms of improving information architecture?

Anca explains that before using WordPress, the intranet was a laundry list of largely static links. Updates to the homepage were handled by the webmaster. Deeper content was tied up in a wiki – content that had grown organically over time with very little structure and in some instances out of date.

WordPress helped impose an overarching organizational structure, removing much of the extraneous/duplicate content – at least from the homepage. It also allowed for the display of dynamic content by pulling out the latest content for different sections:

Underlying this framework is Wordpress MU (multi-user) with a network of sites powering the different sections. MU by itself does not support a hierarchy: this was developed by Anca to permit the hierarchical organization of the sites, which is great for organizing deeper content, such as the different components of the HR department.

WordPress also relies heavily on Categories and Tags (and more recently custom taxonomies) for organizing its content – something Anca utilized to great effect with the display of announcements from across the different sites in the network.

One area that required custom development was the common network navigation (the top menu) shared by all sites in the network. The top menu was built to give people the sense of a site hierarchy. By applying the same theme to all of the sites in the network, visitors get the feeling they are always within the same website.

What are some useful customizations/plugins to consider for a Wordpress intranet CMS?

A selection of the plugins Anca recommends:

TinyMCE Advanced
Tables are not easy to achieve in Wordpress unless you have a good understanding of HTML. However tables are a common form of content organization in an Intranet, and this plugin does a great job of bridging the gap. In addition to tables, the plugin gives you much more choice over formatting choices.

WordPress MU LDAP plugin
Useful for connecting Wordpress up to a database of users (using the popular Microsoft LDAP interface). For instance, it allows company employees to post comments on the site, and update relevant content, using the same password they use for other applications such as email .

WordPress MU Sitewide tags
This plugin, used for some time on the Wordpress.com homepage, aggregates tags across all the sites into a common network cloud. As tag clouds are a great way of displaying large bodies of content in a meaningful way, this is a considerable navigational aid.

Customized link widget
Link lists are used in various places on the homepage to display important links. This widget developed by Anca’s team, allows you to set up custom classes for different link lists so you can alter the appearance of each list. It also allows you more control over the ordering of the links in the list.

What role does the intranet manager play?
The role should be more communications-based and less about the technnology. You ideally want someone who can help motivate the workforce into constantly generating relevant content. In addition, they should be able to help coach content providers and help fix minor issues that come up (such as post formatting). The individual should be able to form strong links with employees across the organization to make the intranet a lively, collaborative space.

Do you track how successful the implementation is? Eg. page views, frequency of posting
Tracking and analytics were set up as part of the site architecture from the beginning. The site has been only been up for a little over a month, currently having four users signed up to provide content. At the point of launch, new posts were being made at the rate of about one per day.

What are the key differences between designing an implementation for an Intranet vs. external consumption?
Anca points out that with an Intranet site, there are different priorities and constraints. One thing that can generally be guaranteed is the browser that will be used to view the site – there’s no need to cover every case, since everyone is standardized on Firefox. Contact information, personal names and email addresses can be published on the site without privacy concerns. There are less worries about security, because the site is behind a corporate firewall. This can also be a drawback, in that it provides disincentives to upgrade.

The site itself can be much more specific, since there are a fixed number of actual constituents and stakeholders. However, since there are these specific constituents, a fair amount of effort was expended getting everyone’s buy-in.

How long did it take to setup this implementation for the JGI Intranet?
All in all, the project lasted about 6 months. About 3 of those were focused largely on development, while the rest was focused on gathering support for the new site, inventorying content that would need to be added, and creating a design that would meet the needs of most of the organization.

Anca’s presentation on this project:

Anca Mosoiu is a partner in Tech Liminal, a web design/development agency and all-round tech-house based in central Oakland. They host regular Meetups to support East Bay bloggers (which I can testify has helped me breathe new life into Caged Ether).

I manage a small coterie of blogs that on average receive about 20,000 page views per month. Somewhere between 16-19% of these visitors touch the homepage somewhere on their travels. The clear majority actually enter through the homepage. Bottom line: the homepage is pretty damned important.

This recently brought me onto an argument on what is the most effective way of displaying posts. Here I’m not talking about the intricacies of laying out the front page of your blog like a magazine or a photo gallery. Rather just talking the basics: what options do you have with the straight forward roller approach that originally was one of the key defining features of a blog and arguably still remains the most common blog format. It commonly looks something like this:

This opens up a big question: how much of each post do you show on the homepage?

Most blogging platforms, including Wordpress, Blogger and the Lotus Connections platform we use here at IBM show the entire post on the homepage. However, you’ll also see many popular blogs abbreviating posts on the homepage with just an excerpt and a link to the individual post in its entirety, eg. Altimeter, Read Write Web and TechCrunch.

Which approach is better?

Here I my thoughts on the blog excerpting question:

Advantages of excerpting posts

• Easy to scan many posts
• Easy to track interest/engagement at the post level
• Added Flexibility: decide on length of excerpt, inclusion of images
• Works well for group blogs: you have a greater chance of seeing the multiplicity of views from different authors upfront

Advantages of listing full post on homepage

• Remove an extra click between viewer and full blog post
• Good for display of short posts (‘Read More…’ could link to only one more sentence)
• Attracts more comments (visitors can often comment directly from the homepage)

As you can see, there is no clear-cut solution, but I favor the approach of displaying excerpts on the homepage with links to the full articles. Why? To appease the scanners. A homepage listing multiple excerpted posts makes it easy to move quickly through the content and see if you find something relevant. The caveat being if you are a blogger that tends to write short, pithy posts.

Am I over-fixating on a minor detail? Probably. As Mark Murnahan points out, content generally trumps structure. A well written, relevant piece will do well, whether or not it’s excerpted on the homepage. However, I would still contend that if you run a network of blogs and have to and have key objectives and targets to achieve (for instance average page views per article, number of comments per article) playing around with the homepage structure can have a dramatic effect.

How to excerpt with Wordpress

If you are blogging using a standalone version of Wordpress you can simply excerpt your homepage posts using the the_excerpt function within your homepage template. This will display the first 55 words and will strip out all images and HTML. If you want more control, you can use the Advanced Excerpt plugin which gives a lot more flexibility. I see the main advantages being the option to select which HTML tags to include and options over how much of the post to excerpt.

I’m in the process of redesigning CagedEther after inspiration following a Theme Framework session. On investigating different Wordpress themes, I came across a system to that may well help me juggle and organize the various pieces I want to squeeze into my blog’s latest incarnation. First though, a minor detour into my personal history, to illustrate the system’s heritage.

Somewhere in my distant past I was a sub-editor on a monthly print publication and this took me back to something I’d learnt then: the grid used heavily in the newspaper industry to construct those front page formats we’re all so familiar with.

For instance, here’s an example of a 5-column grid used by the UK’s Guardian:

Some elements such as the headline and the main image cross multiple columns, but overall they are still bounded by the lines of the grid.

Then along came the web and rather than designing for broadsheet or tabloid format, we have a screen to fill. Still, the grid format translates over into this world. However, rather than a 5-column layout, many news publications and blogs rely on different column formats, as illustrated here by Mark Porter:

In this instance, Mark points out just how similar the 12-grid layout is between between the online version of the UK’s Guardian and Telegraph.

In terms of blog templates relying on the grid system, take a look at the beautifully functional Neutica Wordpress template:

and the highly flexible Basic Maths theme:

So where did the grid system come from?

Graphic designer, lecturer and author Josef Müller-Brockmann is credited with being one of the strongest evangelists of the grid system back in the early 70’s. Interestingly, he is also the creator of the Akzidenz-Grotesk font: a precursor to what we now know as Helvetica. I say ‘interestingly’ because many of the grid system designs rely heavily on this efficient sans-serif block font: Helvetica is a great compliment to a tightly-defined grid.

For more information on designing using this system, check out The Grid System website: an excellent resource pulling together snippets from across the web. And yes, the site is a testament to the visual order and composure a grid system brings.

If you have any experiences of designing with a grid, please share them in the Comments section!

If you are a long-time Wordpress developer who understands all the ins and outs of theme development then this post isn’t for you.

OK, now we’ve got that out of the way, for those of you left, let’s try and decipher where the real value lies in theme frameworks. Help comes in the shape of a Wordpress Meetup earlier this week in San Francisco. We had the chance to hear a number of case studies from internet marketers, developers and blog owners – each with a different perspective on the utility of theme frameworks.

Alejo Grigera is a product expert at Google but also runs Mr Bluesummers: a blog covering 3D modeling. He talks us through Arjuna, which he terms a ‘robust theme’. What does he mean by that? Let’s step back and look at what a standard theme is.

Standard themes

The basics of Wordpress themes means you can take the default Wordpress blog theme that comes out of the box:

and turn it into something like this:

Themes give you the power to enforce your own look and feel around your sweet musings.

Robust themes

But what if you want to take this a step further if you have different types of posts (eg. video vs. articles) or different sidebar elements? Well, certain themes out there have a number of options allowing you tweak certain elements. Arjuna is one of these. It allowed Alejo to turn the standard Arjuna theme:

into this:

Notice the changed header (including translation flags) and different elements running down the right hand side. All possible due to options within Arjuna. He also has the flexibility to change the layout based on the type of post (eg. 2 column versus 3 column) – all from within the Wordpress admin console.

Theme Frameworks

If you’re still following, let’s start delving into theme frameworks proper. Jeremy Reither from R3R consulting showed us what he has achieved with Thematic on his side project My Family Law. Here customization goes a step further with different sections of the sites having completely different layouts.

Such as the library page:

And the article view:

Again, there’s a way you can code this with PHP but theme frameworks make this level of personalization possible from within the admin console. This is important for My Family Law as there are multiple authors – more skilled in the ways of law rather than development. Each author can have their own blog and some flexibility over how their posts appear, yet still adhere to the overarching ‘framework’.

Thematic also supports a number of widgets from Google Ads to Twitter, and by combining with a plugin like Widget Logic, you can fine tune which sidebar elements you want to display on which pages. Powerful stuff.

Child Themes

A big advantage of theme frameworks prior to Wordpress 3.0 was the ability to add child themes: that is related themes that share common elements but can be substantially different. Since Wordpress 3.0 came out, this functionality is included in the core, however depending on your implementation, you might still want to use the frameworks to handle children.

What exactly is a child theme? Chancey Mathews from GigaOm summed this up perfectly (he uses the Carrington theme framework). Look at these sites…

GigaOm:

The Apple Blog:

Earth2Tech:

All have the same structure and share common elements (including that signature thick black underline), but there are obvious differences. However they all share the same core display code. This makes it easier to maintain and easier to control updates across all the sites. I can say this from experience having spent hours adding extra navigation to a series of five blogs which were essentially identical save for minimal elements like headers and sidebar links. A framework could have saved me hours.

Anatomy of a framework

Jeremy Reither showed this image explaining where the framework code sits in the Wordpress template.

(click on the image for more detail)

The framework effectively wraps its code around the existing Wordpress code, extending the functionality. The architecture of each framework does differ so it is worth investigating which one makes sense for you.

I’ve just started work on a redesign of this site using the Thematic framework and so far have been surprised with the ease with which you can built out a fully-functioning site. One word of caution: most frameworks rely heavily on the power and flexibility of CSS (especially in terms of child theme implementation) so brush up on your CSS skills if you are looking to modify an existing theme.

More information on theme frameworks

Theme frameworks covered in this article:

• Thematic
• Carrington
• Arjuna

Other popular frameworks:

• Thesis
• Hybrid
• Sandbox

Further reading:

• Wordpress codex
• Lorelle on Wordpress

Conclusion

So if you are looking to create a stylized blog/CMS with Wordpress, look further into the world of frameworks. If you have have experiences to share around theme framework implementation, please comment!

Andy Peatling from BuddyPress kicks off Wordcamp 2009 for me. So, what is BuddyPress? In another presentation, Matt Mullenweg, the WordPress founder describes BuddyPress as ‘Facebook in a box’ ideally suited to the creation of niche social networks. Features include in-depth profile pages, a life-stream, messaging, groups, albums, forums, blogs (obviously, given that it’s from the WordPress team).

Andy points out that BuddyPress grew as a collection of plugins for Wordpress MU (the multi-author edition of WordPress) that have been rolled into one large one. The advantage here is that you can pick and choose which elements to configure and run, but more on that later.

Why use BuddyPress rather than Ning, Facebook or other available social networks?

A major benefit of BuddyPress is that you get the power and stability of Wordpress. It’s also heavily extensible and plays nicely with most of the massive collection of WordPress plugins out there. WordPress is the run-away leader when it comes to open source blog applications and so BuddyPress can leverage the sizable community that exists around WordPress. In some instances you can use existing Wordpress plugins right out of the box, eg. LDAP functionality to handle registrations. Other plugins and widgets may require some modification.

Another key feature is BYOTOS. Umm, exactly what is BYOTOS? Bring Your Own Terms Of Service. For instance, Facebook scared many users when it changed its terms of service in February to include the clause whereby they can do anything they want with your content. As you download and install BuddyPress on your own servers, it is really up to you to decide your own terms of service for your community.

Setting up BuddyPress

The first step is to setup Wordpress MU, which commonly runs in the LAMP (Linux/Apache/MySQL/PHP) environment. You should ideally use sub-folders for each profile rather than sub-domains.

Next step is to download BuddyPress.

Once installed, each component has it’s own folder so disabling a component is as easy as deleting the relevant folder. The advantage here is that you only configure what you need. Setting up the forum piece which uses BBPress is currently the trickiest part, although this is due to get easier.

Skinning BuddyPress

You use Wordpress themes for blog/content pages. If you are used to running WordPress blogs, you are probably familiar with these themes. Buddypress has its own themes for social pages. You can see an example of this in practice on GigaOm Pro (a community version of Om Malik’s popular technology blog):

(click thumbnail to see full size)

You also have the option to enable blog networks, which each have their own distinct theme. This is a key feature that really isn’t really available on most other social network solutions out there.

Note that each component has it’s own theme folder so you only skin what you need to skin (eg. if you just need profiles, just skin those). Knowing which theme file you need to edit for a given page is easy as URLs map to template files:

If you have used WordPress, you are probably familiar with the concept of the ‘loop’: the code block that handles the display of each individual post on a page. Buddypress themes use the same ‘loop’ concept, but for more than just blog posts. Output any BuddyPress content by creating custom loops.

BuddyPress ships with a skeleton (vanilla) theme that eases customization.

Extending BuddyPress

If you need to build a plugin then check out the ’skeleton component’ that comes as standard with  BuddyPress. This can help you understand the hooks and actions from which the plugin can access BuddyPress functionality. Again, if you have built plugins for WordPress, the concept is the same and should make sense.

There are a number of ready-built plugins you will find on BuddyPress Dev. For instance there’s a plugin to allow users to pull in photos from a Flickr stream.

BuddyPress: the future looks bright

Given that BuddyPress was only launched around Wordcamp this time last year, it’s remarkable to see the rich feature set available today. The team continues to make constant improvement and recently asked the community to vote on features they would most like to see in upcoming releases.

If BuddyPress can capitalize on the considerable community and large popularity of WordPress, this really could become a major player in the social network solution space.

Follow Andy Peatling on Twitter.

Wordcamps are events organised by the Wordpress gang to pull together developers working on the popular blogging platform. The latest event took place recently in San Francisco, pulling together some of the top brass working on Wordpress. The affable inventor of Wordpress, Matt Mullenweg led the proceedings.

Wordpress sessions of interest:

• SEO for Wordpress
• Secret of virality
• BuddyPress: Social network for Wordpress

Andrew Mager made this wonderful blow-by-blow account of Wordcamp San Francisco 2008.

Unfortunately I didn’t get to attend this session, but thankfully, through the beauty of blogging, there are numerous other accounts online.

BuddyPress grew out of a series of plug-ins that added social functionality to Wordpress MU (the multi-user edition). It is being touted as Facebook-in-a-box, ie. you can setup your own personal Facebook for your community.

Credit: Andrew Mager

More screenshots from Andy Peatling’s blog.

Andy graciously added his presentation to Slideshare:

[slideshare id=557755&doc=buddypress-1218919909998633-8&w=425]