Attention WordPress Theme Designers: Designing Themes for WordPressMU

One of the best features of WordPress is the ability to choose from over 300 different WordPress Themes for your site’s layout. You can choose from among a wide range of looks, layouts, and styles, from minimalistic to bombastic. You can have no sidebar or four sidebars. You can have huge header art or no header.

Once you choose a WordPress Theme, most of them are licensed for GPL, which means you can then tweak and twiddle with them to make them suit your needs. Don’t like the colors but like the layout, change the colors. Want the sidebar on the left not the right, move it. Want more space between the title and the post, add it. If you are really into CSS, then you can redesign your own WordPress Theme from scratch.

With WordPressMU, though, that freedom is gone. The main host installs a range of Themes to choose from, and probably takes recommendations, but those are your choices. As far as I am aware right now, the ability to tweak those Themes is left up to the host, not the user.

Is this a good or bad thing? I think it’s a good thing for hosts building a community of uniform sites – everyone’s site looks basically the same or variations on a “theme” to create a consistent look. For those who are opening their doors to a wide range of users with different needs and desires, then the smart hosts will make sure their users have a wide enough selection to choose from.

Which brings me to the most important point: Designing WordPress Themes for WordPressMU.

At the moment, WordPress.com offers only a limited selection of themes to choose from, and the themes are not customizable. This gave me a real problem at first, as most of the themes have bugs or omit critical functionality. After testing out the available themes for the better part of an hour, I finally settled on this one, which doesn’t at all make me happy, or even look the way I’d like, but does have all the functionality working properly. As far as I can tell. For now. Even the prize-winning Connections theme omits the comments template on pages. In contrast, my WordPress 1.6 site lets me install any theme I want, customize the theme, and do whatever I need to do in order to have my blog look, feel and act exactly as I want it to.
Michael Hampton’s Lunacy Unleashed

Designing WordPress Themes for WordPressMU

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

This puts some new burdens on WordPress Theme designers.

WordPress Theme contests earlier this year helped create a good reference on the WordPress Codex called Designing Themes for Public Release. Here is a quick review of the points it makes, and how they apply to WordPressMU.

Keep The Core References

For WordPressMU, key core structural references like header, title, content, sidebar and such should probably stay the same just for continuity, but keeping the structure the same isn’t as critical since the Theme itself is a package deal. Changes to the template files, template tags, and CSS to change the structure are fine, as long as the Theme works and passes all the tests.

No Plugins

While things may change in the future, Themes for WordPressMU must work without the use of WordPress plugins. Plugins need to be added by the host, therefore they must also control the addition of any template file modifications. For now, consider there will be no plugins. This doesn’t preclude the use of built-in PHP code and scripts that may run some plugins or PHP effects as part of the Theme. Though, such inclusion will require testing and security checks to make sure the script does what it’s supposed to and doesn’t do harm or open the site up to security risks. This is an area that needs exploring and guidelines established.

Style ALL the Template Files

This still holds with WordPressMU. All page views must be designed including single post view for posts and Page, as well as multiple post views for front page, search, categories, and archives.

Style Sheet Structure

Since the user will not “see” or modify the style sheet, the structure of the style sheet isn’t important. It can be alphabetical or by structure. Still, it must be clean, valid, and have some easy to read structure, if even for good practice standards.

Consider the Details

The details in a WordPress Theme make all the difference. Pay close attention to details like the use of graphics between posts or the bullets in the sidebar. Make sure that all the little elements add to the overall and consistent look of Theme. It needs to look cohesive in all its forms and page views, and it needs to look “finished”.

Consistent and Standard Fonts

All WordPress Themes need to be designed with the most common fonts available on the web, including backup choices. With WordPressMU, this is even more important. Users will have a wide range of computers, operating systems, and browsers and the font choices need to be among the most popular fonts on the web.

Comment Comment Comment

Comments in templates and the style sheet aren’t as critical with WordPressMU themes, but I still highly recommend Theme authors include them to help anyone updating, fixing, or making minor changes to the Theme.

Lean and Mean CSS Style Sheet

Keeping a clean and lean style sheet and template files is important no matter what WordPress version the Theme is designed for. It helps everyone to have a fast loading style sheet and template files.

Validate! Validate! Validate!

WordPressMU users won’t have the ability to change any validation or browser bugs in their Theme, so it becomes even more critical that Themes for WordPressMU get put through the testing phase extensively, making sure they validate in both CSS and HTML/XHTML. They also need to be tested across multiple browsers, and through all of the page views. Many people test only the front page view and the single post view, but make sure that ALL page views are thoroughly tested and validated before release.

CSS and HTML Bugs

While browsers are still playing games with CSS and website designers continue to add hacks to force CSS to work different ways for different browsers, it’s important that the WordPress Theme designer still focus on making their Themes be as hack-free as possible while still working across the widest spectrum of systems and browsers. This doesn’t mean the design should not include CSS hacks, just take extreme care with them and make sure they are tested and validated.

There are some additional features that need to be taken into consideration when designing WordPress Themes for WordPressMU use. Again, the difference is that in WordPress, the user can make changes to a Theme, but in WordPressMU, they can’t. This puts a different twist on designing Themes for WordPressMU.

Style All Standard HTML Tags

The only place the user in WordPressMU can add style in their site is inside their posts. This means the Theme author needs to consider all the common tags a user may use inside of a post’s content and make sure that each one is styled.

Here is a list of some of the most common HTML tags a user may use. Style them to match the Theme.

• UL/LI – to at least three levels down
• OL/LI – at least 2 levels down
• DL/DT/DD
• BLOCKQUOTE with possibly CITE
• CODE
• H3, H4, H5
• PRE
• HR
• B and STRONG
• U
• I and EM
• ABBR
• ACRONYM

Some additional ones to consider are occasionally used for assigning font sizes to SMALL, MEDIUM, LARGE, BIG, and X-LARGE tags. Think of the various tag you may use in a post and make sure that those are included. Specific classes or divisions won’t work, since there are no instructions to help the user add those. If they want them, they can add inline styles.

Headings also play an important role as they may be used for post content sections. The H1, H2, and/or H3 are usually used within the template files for the header, title, and sidebar headings. The rest of the headings tags, H3, H4 and H5, should be styled to fit within the content and paragraphs to match the look of the Theme.

You can add any other tags to the Theme’s style sheet. The user may not know they are there, but if they use them, they will be styled to match the overall look of the Theme.

Use Template Tags Not Placeholders

Many Theme authors use placeholders to represent links to specific Pages in the header, sidebar, and/or footer for Pages like About, Contact, and Copyright. Since the physical Page hasn’t been created, then the placeholder sits in the template file with a # in the link waiting for the user to edit the template file and replace the link with one to the correct Page.

In WordPressMU, the user is unable to access the template file. Most WordPressMU Themes come with an About Page set up as an example, but additional Pages may be added by the user.

With this inability to change the template file, the Theme author needs to take this into consideration when designing their Theme. If a user adds 12 Pages to their site and the look of these links will interfere with the Theme’s layout and design, it’s something to think about.

This isn’t such a bad thing, but it does complicate things a little. For Pages, consider setting the template tag to list “parent” pages, allowing subpages to be used to add Pages not seen on a main menu. The user would have to experiment and discover this on their own and make adjustments to their Page structure accordingly, but it would allow the use of a design element like a horizontal menu in the header:

<ul>
<?php wp_list_pages('sort_column=menu_order&depth=1'); ?>
</ul>

The use of the following template tags come into play when designing a Theme with menus and flexible lists and the Theme author needs to consider all the ways a user may use them as part of their design:

• wp_list_cats()
• list_cats()
• wp_list_pages()
• get_links_list()
• get_links()
• get_archives()
• wp_get_archives()

Experiment with different template tags to create different looks, keeping in mind all the ways people use WordPress Pages, categories, links, and archives.

Also, consider adding a flexible category template, such as the example in Category Templates: Replacing Multiple Category Templates with One. This allows for the category description template tag to be used to create custom content on category pages. It also means that the category description template tag cannot be used inside of category links for the link title – but it’s a small price to pay for custom category pages the user can control without access to the template files.

The “one-size-fits-all” category template is merely an example of what is possible when it comes to messing around with the WordPress Loop, conditional tags, and queries. This kind of creativity makes it even more challenging and fun for the Theme author for WordPressMU Themes. You are free to design a wide range of template pages within your Theme, even adding manual links to site map Pages and custom archives. Designing a Theme for WordPressMU is not just about the CSS but now, it’s about template files, PHP and whole package.

Benefits of Designing a Theme for WordPressMU

There is a joy in designing a WordPress Theme and then seeing it appear on websites around the world. It’s like a little piece of you is being enjoyed by hundreds or thousands of users and viewers. It can be quite the thrill.

It is also your work and it’s free. The only payback is that your name may stay with the Theme and someone somewhere may find out you designed the Theme and contact you for a paying job to design their own site. It happens, more frequently than you would imagine, so designing WordPress Themes is great PR for your skills, as well as practice.

Designing a Theme for WordPressMU is even better. All the Themes I’ve seen used feature the Theme Author/Designer’s name and link to their site in the footer. I can’t think of a better business card or advertisement of your skills than a WordPress Theme that links directly to you.

There is also an added benefit. WordPressMU is not just for free websites. It is also for the corporate user. They may have an in-house design team, but the odds are that they don’t, and they will look through the available Themes as examples of what is possible, and maybe look into hiring those who create Themes that attract their attention. It’s happened before!

This makes designing Themes for WordPressMU even more important, covering all the bases so the host doesn’t have to mess with the Theme after uploading, and the users get a solid and yet versatile website design. If you are considering your Themes your calling card, they better be the best you have to offer.

Related Articles

• One Year Anniversary Review: Designing WordPress Themes for the Public
• Designing Themes for WordPressMU – Fill In All The Details
• WordPress Theme Designers: Slapping You Upside the Head
• The Battle Between Image Width and Column Width
• When the Blog Breaks: Fixing Your Broken Blog
• Are WordPress Themes and Plugins Ready for Internet Explorer 7?
• WordPress Design Details
• When the Burden of Support is Too Great
• How Do You Choose a WordPress Theme?
• Designing a Theme to Include WordPress Widgets
• WordPress Themes – Do You Want Someone Messing Around With Your Theme?
• Rules of Smart and Successful Web Development and Web Design
• Canvas WordPress Plugin: Build Your Own WordPress Theme
• Display Post Excerpts Only in WordPress
• WordPress.com Custom CSS – All The Styles for the Sandbox Theme

---

Site Search Tags: design, wordpress, themes, wordpressmu, wordpress.com, wordpresscom, wordpressdotcom, layout, css, elements, details, architecture, howto
Copyright Lorelle VanFossen, member of the 9Rules Network