Designing Themes for WordPressMU – Fill In All The Details

This WordPress Theme called “Pool” I’m currently using is designed by Borja Fernandez and works well for my blog here on wordpress.com. We don’t have a lot of choices here, but I liked the look and some of the details, but after a few months using this Theme, there are a lot of details I am growing to hate. So I thought we could all learn about designing WordPress Themes for WordPressMU by looking at the details.

In my article on Designing Themes for WordPressMU, I explain that it is important to look at all the elements in a well thought out Theme and to think beyond the pretty.

Designing Themes for WordPress is pretty wide open since each Theme is a self-contained package. The files and styles are all there, and little else is needed – to a point. The rest is up to the user to tweak with. With WordPressMU, the options are limited to choices, not tweakability. Therefore, WordPress Themes for WordPressMU need to be:

Self-contained

Ready with everything the user needs

Require no fixing or adjusting

Validated and tested

The key in that statement is ready with everything the user needs.

In order to understand what “everything the user needs”, we need to understand what details need to be ready so the user can get the most out of your blog.

Without a doubt, you want the user to read what you are blogging. It takes a lot of work to share your thoughts, opinions, and ideas with the world. The whole reason you blog is probably so someone out there will pay attention to what you have to say. Therefore, you want them to stick around long enough to not only read what you have to say, but to see what other thoughts, opinions, and ideas you have to share.

People enter your site through four possibilities: the front index page, the specific single post, a specific category, and search results. Each of these views must be designed to provide fast and easy access to the content to help the user get access to everything they need.

Front Index Page

Most people assume that most users enter their site through the front page. This is not true. Most users discovering your site for the first time enter through a single post page, and from there they move around throughout your site.

Visitors who end up on your front index page got there by typing in the link or clicking from an external site directly to your main blog url.

Most search engine search results go directly to a specific article, but some PHP driven blogs like WordPress do manage to get posts found on their main index page that end up in search engines. Unfortunately, the visitor then arrives at your front page and the information they are seeking has moved off the front page, so they either leave or have to search within your blog to find the information they need.

Still, the front page is like a welcome mat so it is important to have it looking good, representative of your entire site and Theme. The front page of a WordPress blog typically displays more than one post and it called a “multi-post view”.

There are two main choices for displaying content on the front page of your blog: full post or post summary (excerpt). In WordPress, you have three options for controlling the size of the summary excerpt.

Use the more tag from your QuickTag buttons to set a point at which the excerpt ends.

Use the Explicit Excerpt in the Write Post panel to write a summary or custom information about the post.

Change the index.php template file code for displaying posts as excerpts by changing the_content template tag to the_excerpt. This will automatically display the first 120 words of the post as the post summary.

WordPress.com users can control the use of excerpt with the first two options in their Write Post panel. Full WordPress versions can make the change in their WordPress Themes for the third option.

Web page designers for WordPressMU have a choice of using the third option to showcase the entire post on the front page or only the excerpt.

If they choose the excerpt, then they must make sure the visitor can clearly and easily spot the Read More link that takes the visitor to the full post and makes it very clear that the excerpt is not the end of the story.

Whether the designer uses the full post content or excerpt is up to personal preference, but take time to look at the layout of the front page with 10 or more posts on it. Can you tell the difference between where one post starts and another ends?

In this particular Theme that I’m using, “Pool”, it isn’t obvious. I would scroll down through the list and not spot the separation points between the posts. If I had trouble, so would others. Because I can’t edit this Theme in wordpress.com, I’ve added a graphic inside of each post that has a ripple effect applied to the header to act like a graphic separation between the posts.

Make sure your WordPressMU or any WordPress Theme you design has some form of separator between the posts. In my main site, I used a green vertical line (border) along the length of each excerpt to connect the paragraphs together visually. You can put a border along the top of the title, have the titles in a box, or have it be large and distinctly colored, or combine it with category, tag service submit links, and other information that gives visitors a clue that this is where one post ends and another begins.

Single Post

The single post is the primary entrance point for visitors to your blog. They arrive as a direct link to that post from an external site via a post, trackback, or search. This is where you make your best first impression.

If the content has value, then the user will want to stay awhile and see what other value or interesting subjects can be found on your blog. So they look around for links and clues that will help them navigate your site.

Throughout your WordPress Theme, navigation makes or breaks your blog and no where is that more important than on the Single Post.

Most site navigation points are located in the header, sidebar, and footer. The footer is usually the last place people look, so only the least used but critical links should be there. The header and sidebar are the most important areas.

Unfortunately, many WordPress Themes designed today are based upon the WordPress Default Theme, aka Kubrick, which featured a sidebar-less single post view. Instantly, the visitor’s option for moving around your blog from the single post view is limited. Their options? At the top or bottom of the post is usually links to the next and previous posts. In the post meta data section at the bottom of the post is information about which category and date the post was published. Click the category and you get to that category view, but if you have 20 categories and this post is only in one category, that’s not much help for showcasing the information within your blog.

Designing a Theme for WordPressMU, you can do anything you want, so why not take time to make sure that when a visitor arrives on a single post page, they can tell at a glance what the blog is about and where to find related or different information within the blog. It doesn’t have to be only from within the sidebar, but it needs to be easily spotted within the page.

Personally, I like seeing the following:

Categories List

Most Recent Posts

Related Posts

Search

I consider such design elements as an invitation to stay a while, not just hit and run.

Category Page Views

When I click on a category view, I expect to see a list of links or excerpts of the posts within that category. I do not want to scan through full posts and articles to get to the information I am looking for. I want to get to the information I need NOW.

In WordPress, category page views are generated through the index.php or a custom category.php template file. Using the category template file, designers can control exactly what is displayed on a category page view, including paragraph summaries of what the category is about.

This means that WordPressMU users can create custom introductions to each category which helps the visitor understand what the category is about – again, adding more information to help the user use the blog to navigate and learn more. You can see an example of this technique on my main site on any of my category page views such as in the Learning Zone of Taking Your Camera on the Road.

The key to designing WordPressMU Themes for category page views is to think like the user. They want to scan down a page listing references to many posts to find their topic of interest – so make sure you design the category view to feature excerpts or only post titles to make that process faster and easier.

Search Results Page

The last type of page that users use on your blog is the Search Results page. Users access this page from either the search form on your blog posts or from search engines which return search page results in their search page results. This is a new phenomenon I’m finding in my search engine search results, usually associated with PHP driven sites like WordPress. Search engines not only crawl and store information on your individual posts but categories, front page indexes, and search results from your site.

Again, like the category view, the user is looking for a fast listing of information not whole posts. The eye wants to move down the list very fast and scrolling down for 40 scrolls is not very helpful when the information they need is not at the top of the list.

The search results in a WordPress Theme are controlled in two ways: the index.php or search.php template files.

Like on the Front Page, you can set the posts returned in search to only show excerpts by changing the_content to the_excerpt.

Like the category page, the search template file can also be customized in many ways, but think about the user and how they will use the page to find the information they need. Quick and easy, quick and easy.

Think User – Make Powerful WordPress Theme

The more you think like the user, get in the heads of your audience, and study how people use blogs and websites, the better quality WordPress Theme you will design and develop. WordPressMU bloggers are at your design mercy. We can’t tweak our Theme choices, so we must rely upon you, the Theme designer, to see that all our desires are met.

A well-designed WordPress Theme doesn’t have to be fancy or graphicly heavy with bells and whistles like a circus – it must be usable and have great usability. It’s all in the details.

For more information on what it takes to design a solid WordPress Theme, especially for WordPressMU users, see the following:

12 Comments

Hi Lorelle
I have a WP 2 blog using my own CSS adaptation of K2. I have a category (and a category template) I call ‘photolog’. I have a menu item that calls that category and displays each post as a single page.

What I’m trying to do it put some code onto a wp-page or create a wp-page template that does the same job but gives me better looking links eg. myblog/photolog/headline.

I’m a cut and paste php sort and unable to write my own stuff. Any advice would be greatly appreciated. Thanks

Are you talking about permalinks or some navigational aids that increase user friendliness on your blog? For information on how to control your permalinks, see the article on the WordPress Codex called Using Permalinks to help you change the URL. That’s not a template issue.

Changing the template, well, you need to be a little more specific before I can help. It’s a lovely site and photographs.

I reckon I might be able to do this by making a page-template or a page with PHP imbedded, that basically called the photolog category eg . BTW that piece of code works but I don’t know enough make it look like the photolog page I currently have.

excellent article! I wish all theme designers took this into consideration. I’d love too see thumbnails of these various views when searching for themes. It seems they are often left out by ported themes.

you’ve really got me curious about this :”WordPressMU users can create custom introductions to each category which helps the visitor understand what the category is about”

I am guessing that this is in a new place in wordpress 2.8.4, now it’s under posts/categories – I’ve never seen the box to add a descriton for category before! (and not aware of it being in any themes) – I’d love to add this to some themes, I wonder if the category description field will allow for html? I’d love to use it to display text, a graphic and a link..

great possibilities with this!
(fingers crossed that html will work in this caegory description box)