Feeds

themes

 Defining WordPress Theme Requirements

Submitted by Gerard McGarry on July 30, 2007 - 4:44pm in

Ahmed wrote last week about what makes a WordPress theme great. In his post, he mentioned building a high quality generic theme and tried to define the elements that stood out in popular themes such as K2 and Cutline.

I've designed a few custom WordPress themes in the past using K2 as a base. The thing about K2 is that it has a strong semantic structure, and once you comprehend that structure, customizing it with CSS becomes much easier. If I were building a generic WordPress theme, I'd want it to have strong, clear mark-up (both XHTML and CSS) so that it could be easily customized by other developers.

In this post, I want to take Ahmed's thinking a little bit further and define what I think would be a definitive set of requirements for a high quality WordPress theme.

Structure Requirements

  • Fixed width layout: Fixed width gives you better control over how content will be displayed. If you're planning to monetize the blog, setting a content width of 470 pixels and a sidebar width of about 300 pixels should fit most ad sizes in nicely.
  • Two Columns: One for content, one for the sidebar. I have to disagree with Ahmed - I think the capability to add extra columns complicates things. A two-column layout should provide enough functionality for a generic theme.
  • Proper Semantic Structure: The XHTML layout of most blogs has the blog title as a H1 on every page. This is wrong. The blog title should only be H1 on the homepage. On all subsequent pages, the page title should be H1, whether it's a category page or a single post.
  • Extended Footer: I like the idea of an extended footer. It's an opportunity to keep the sidebar clear of clutter and - used correctly - could keep the reader on the site longer by giving them categories, related posts or perhaps some targeted advertising.
  • Meta Information In Sidebar: I've always thought the lump of meta information after each WordPress post is a waste of space. In my ideal theme, I'd like to move this meta information (author, date posted, categories, etc) to the top of the sidebar.
  • Content To The Top: I've always tried to design my themes with the content as high up on the page as possible. This means ensuring that the sidebar comes after the content in the HTML code. Positioning of the sidebar can always be achieved through CSS if you want to maintain the illusion of a left-hand-sidebar.

Semantic Requirements

I touched on semantic requirements earlier, but I want to give this area more thought.

  • Using the_excerpt: By using the excerpt instead of displaying full posts in archive and category pages, you help prevent duplicate content issues. The only place you should be able to see the full post is on the single post page.
  • Support For Common XHTML Elements: It's important to provide support for H1-H5 tags, making sure they diminish in size stylishly. Likewise, you should have proper support for blockquotes, citations and code snippets. It doesn't matter if you don't use these elements, you need to build in support for them for people who do.
  • Microformats?: From time to time, Microformats make the headlines and we're told they're the next big thing in web design and SEO. Should our WordPress theme support Microformats? You decide.

Design Requirements

The striking thing about K2 and Cutline is how stark both themes are. They don't waste time on frivolous graphic elements - the design is purposely kept simple: users of the theme either keep it that way or use it as a base for further customization.

So, with the design, I believe we should:

  • Focus on making best use of typography: good spacing and sensible font choices. I think a medium font size will be good for legibility without looking too chunky.
  • Make the best use of whitespace to improve legibility.
  • Keep colors and graphics out of the equation as much as possible. The more we embed our own color preferences, the harder it will be for others to customize the theme.
  • I believe the XHTML should be of a high standard and it's important that the default code of the template validates.
  • Support For Widgets: With WordPress widgets becoming a standard these days, it would be a major omission to leave out widget support in the theme.

Coding Suggestions

  • Extensibility: Ahmed suggested building in theme support for a number of WordPress plugins. In an ideal world, plugins will conform to a What are the most popular plugins that might require theme support?
  • Readable Code: In order to make the theme easily customizable, the code has to be easily understood. That means clearly structuring the HTML and CSS so that modifying and troubleshooting is straightforward!
  • Documentation and Code Snippets: I think a decent readme file explaining the layout would be useful. Also some code samples showing how to implement code for supported plugins and common tweaks like moving the sidebar might be useful for the less technically inclined.

I think in designing something that will be easily customizable, we need to cater to the blogger and the theme developer. A well-coded and flexible theme is more likely to be picked up and modified than one which is a complete mess.

If anybody has other suggestions that would make a killer WordPress theme, let me know in the comments. Let's try and get together a definitive spec for a theme that would stand up alongside K2 and Cutline!

Gerard McGarry is a music blogger for Unreality Music, web designer and all-round Web 2.0 enthusiast.


 Integrating Plugins With Your WordPress Themes Using functions.php

Submitted by nathanrice on May 22, 2007 - 8:09pm in

Have you ever been browsing through the theme viewer or checking out the daily theme release announcements over at WeblogToolsCollection.com, and noticed that a certain theme requires a plugin to function correctly (or at least has a feature that requires a plugin to work)? I certainly have, and although I have never required a plugin for any themes I've released, I can see why one would want to include the functionality of a plugin to make that theme even more awesomely cool (and perhaps get more downloads).

But it is generally frowned upon to require the user to download and install a plugin in order for your theme to work properly. So what is a designer to do? Of course, he could just try to figure out what the plugin does by examining the code, but most designers don't have a working knowledge of PHP/MySQL. Another option is to just remove the feature from your theme, but that means you lose that super-cool feature that might have set your theme apart from the others.

Thankfully, there is a solution that is actually quite simple.

A while back, I was working on a custom design for a client, and he requested a very long list of features that were beyond what I could do with a vanilla WordPress install. So naturally, I hit google up for any plugins that would give me the functionality he was looking for. But again, I wanted to deliver a fully functional theme to this client, without having to instruct him to install a list of plugins to get the theme working properly.

After thinking for a while, it hit me: just copy the code from the plugin into the functions.php file of the WordPress theme. I did so, and it worked like a charm! Absolutely no plugins were activated, and I was able to deliver a theme that worked perfectly right out of the box.

A few possible limitations to this method.

I'm not sure about this, but some plugins do add new rows/columns/tables to your database. There is a possibility that a plugin will do this upon activation, and may not work as an integrated function in the functions.php file. Again, I'm not sure about this.

Also, plugins with multiple files, especially plugins that require you place files/folders in multiple locations, probably won't be easily integrated into your theme. Plugins that only require a single file upload are best.

A few extra tips

  1. Be sure to keep the plugin information in tact when copying the content of a plugin file over to your functions.php file. This way you can keep track of which plugins are installed, and where one ends and another begins.
  2. Be sure to copy the entire contents of the plugin file to your functions.php file. If you're missing an opening or closing tag anywhere, it could break your theme.
  3. Use obvious separators when integrating multiple plugins. This is sort of like point 1, but you'll definitely want to use a consistent and obvious marker for when a plugin begins and ends.
  4. Test, Test, TEST!!! Do not just slap the code in last minute and expect it to work. Test it extensively and make sure that your theme doesn't break. Plugins are buggy sometimes, so you need to make sure it's working properly before you release it or make it live.

One Final Tip

If you are comfortable enough with PHP, it should be noted that you can put the plugin files in a folder within your theme folder, and simply use your functions.php file to include those plugin files. I like to keep the php calls to a minimum, but you're certainly welcome to go that route if you are more comfortable with it.

Anyway, I thought that was a cool little tip, and hopefully so will you.

Happy Coding!


 Monetize With Performancing

Submitted by Ryan Caldwell on April 17, 2007 - 1:46pm in

Community is important to us at Performancing. Over the next few months we plan to roll out a number of new programs that enhance and give back to the Performancing community.

Earn $10 For Front Page Blog Posts

If we like your blog post enough to move it to the front page, you'll earn $10. Each day, we'll scour the entire set of Performancing blog posts and when we find posts that contain useful information, we'll promote them to the front page. On the 1st of each month, we'll pay users for the previous month.

AdSense Revenue Share

This is exciting. We're sharing 70% of all AdSense revenue generated by your own content. This gives you a chance to utilize and leverage the strong Performancing platform to add an additional revenue stream for your online endeavors. Additionally, you earn 10% of all AdSense revenue generated by users that you refer to Performancing.

To setup AdSense sharing, go to "my account" in the right navigation menu. Then click "edit" followed by AdSense ID. Here you can enter your own AdSense ID.

To refer users to Performancing, go to "my account" and scroll down to "Your referral link" - if a new user uses this link to sign-up at Performancing, you'll receive 10% of AdSense Revenue generated by the user's own content.

Theme Contests

Details are forthcoming, but we will be holding regular WordPress and Drupal theme contests with substantial cash prizes. Stay tuned!

Plugin/Module Contests

As with our theme contests, we'll be offering substantial cash prizes for plugins developed for Firefox and WordPess, as well modules developed for Drupal. Contest winners will include not only the developers, but also those who provide the concepts/ideas which we get implemented.


 Performancing Releases Its 2nd WordPress Theme "ModernPaper"

Submitted by Ryan Caldwell on April 16, 2007 - 4:08pm in

One of the services that Performancing aims to provide to the blogging community is the regular release of free, high quality themes.

In that spirit, we are glad to announce the launch of our second free WordPress theme called ModernPaper, from none other than Brian Gardner.

ModernPaper screams "professional publication" but is highly customizable and well suited for any use.

ModernPaper Links:

View ModernPaper in the theme viewer
Download ModernPaper
Forum Support For Modern Paper