user byrne theme conventions
In order to facilitate productivity and collaboration across a side number of themes that I produce, I have slowly developed (and am always evolving) some simple conventions I adhere to when creating themes for Melody.
The most fundamental principal when designing a theme in Melody is to do everything you possibly can to avoid having your users edit templates. This principle helps to make your theme more configurable and malleable by others so that its appeal and utility can grow. It also helps make your theme more maintainable, let me explain.
When a user customizes a theme's templates, they make future upgrades more difficult because when a new version of the theme comes out, they have to backport their changes to the new version. This generally sucks. So if you are driven to keep users out of your templates, then you ultimately make their lives easier in both the short and long term.
Finally, templates are like source code. And generally speaking, people should not go in and edit source code unless they know what they are doing. Otherwise, the code may not behave in an expected manner, making it more difficult to support and maintain.
-
Theme Options - Use theme options liberally. Whenever you are embedding text into a template, text that a user might likely want to edit, then it is probably a good idea to turn that into a theme option. Also, when you want to give the user the option of showing 1, or 5 or 10 featured stories on the front door - theme option! There is no harm or overhead in creating theme options. They are easy to create and require no programming knowledge at all. Do it. A lot.
-
Custom CSS - Require and use the Custom CSS plugin. This provides a sanctioned way for users to customize their stylesheets without editing templates.
Package all CSS for your theme as static content, and NOT as an index template. Again, the only stylesheet your theme should ship as an index template is for user specified CSS through the Custom CSS plugin.
Package all Javascript files as static content. The only Javascript your theme should publish is a file that contains all of your blog's javascript variables.
Also, use the following jQuery plugins for your theme. These plugins are a refactoring of Movable Type's legacy javascript templates. They are more modular and can be easily stashed in your theme's static folder.
- jquery-mtauth.js - provides event hooks for login and logout events
- jquery-mtgreeting.js - allows the "Welcome, Byrne - Sign Out" text that often appears on websites to be easily customized.
- jquery-mtcomment.js - provides a framework for AJAX commenting.
When packaging your theme, the filenames you choose from your templates can aid a great deal in ones ability to sort through and find the theme file they might be looking for. What I like to do is exploit the simple convention that files are often sorted alphabetically in directory and folder listings/displays. Therefore what I like to do is name files in a very symmetrical pattern. For example:
- All template modules should be prefixed with
m_. For example:
m_html_head.mtmlm_banner.mtmlm_footer.mtmlm_userpic.mtml
- All widgets should be prefixed with
w_. For example:
w_recent_entries.mtmlw_search_box.mtmlw_recent_comments.mtml
- Feeds and stylesheets should be named in a similar fashion as modules and widgets:
feed_recent_entries.mtmlfeed_recent_comments.mtmlstyles_custom_css.mtml-
styles_theme_css.mtmlThe names/labels of the templates should also be symmetrical: - Feed: Recent Entries
- Feed: Recent Comments
- Stylesheet: Custom CSS
- Stylesheet: Theme CSS
Theme Manager gives you lots of extra ways to make your theme feel more professional, and the best set of things every designer should do is:
- Provide a good name and description for your theme.
- Provide thumbnails and previews of your theme to be displayed in the "Apply Theme" dialog.
Questions, comments, can't find something? Let us know at our community outpost on Get Satisfaction.
- Author: Byrne Reese
- Edited by: Violet Bliss Dietz