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.

1. Use the more tag from your QuickTag buttons to set a point at which the excerpt ends.
2. Use the Explicit Excerpt in the Write Post panel to write a summary or custom information about the post.
3. 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.

That’s right! Didn’t you know that? You can totally customize your category page views.

If you are using the full version of WordPress, you can customize category templates in many ways including making each category look different from the other.

This isn’t very helpful for WordPressMU users, but the feature for creating a “customizable” category template file to display category specific information for each category, controlled by the information the user enters in the Administration Panels > Manage > Categories panel.

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:

• Navigating Your WordPress Site
• WordPress Design Details
• Choosing a WordPress Theme
• WordPress Tips and Tricks for Template Files
• Secrets of WordPress Theming
• The Secret of Successful Editing of WordPress Themes
• Designing Themes for WordPressMU
• WordPress Codex – Stepping Into WordPress Template Files
• WordPress Codex – Customizing WordPress Category Template Files
• WordPress Codex – Customizing Your WordPress Sidebar
• WordPress Codex – Using WordPress Themes
• WordPress Codex – WordPress Theme Development
• WordPress Codex – Designing Themes for Public Release
• WordPress Codex – Creating a Custom Search Page
• WordPress Codex – WordPress Template Files
• WordPress Codex – Articles on Blog Design and Layout
• WordPress Codex – The Loop in Action
• WordPress Codex – Customizing the Read More
• WordPress Codex – WordPress Site Architecture 1.5

---

Site Search Tags: wordpress, theme, wordpressmu, wordpresscom, wordpress.com, design, website, templates, search, category, categories, index, posts, single+post+view, mult-post+view, designers