On Sunday, I worked a bit at what I like to call the “Happiness Bar.” (I’m not a genius, I just like to make people happy.) I helped out a few people there and it made me think about some of the different experiences people come from when they start using WordPress. Some are designers, with little development experience. Others are writers who might have some experience with editing HTML & CSS. Some are business people, who have little to no experience at all with building things for the web.

If you ever venture over to the WordPress support forums (or any theme shop’s forums for that matter) and read through some of the threads there you’ll see a wide variety of experience levels among the users there. Sometimes you can even find patterns, where people tend to get stuck on the same issue.

That was partly the motivation behind my session: Identifying common WordPress mistakes and how to avoid them. One of the main points was what to look for in a theme. I think a lot of this relates to support and maintainability. Support starts before a theme is released by the author and before it gets installed by the end user. If you’re building a site for a client and choosing a ready-made theme as part of this process, it’s good to know what you’re building on.

What Am I Building On?

Whether you’re a theme author and you’re preparing a theme for release, or you’re building a site with a ready-made theme, test the theme out. One tip I shared was to use the WordPress importer plugin with the Theme Unit test data to test drive a variety of content. When I was preparing the slides for this, it wasn’t hard to come up with a fitting example:

Theme unit test on the TwentyTen theme (grayed background for clarity)

Theme unit test on a commercial theme (grayed background for clarity)

I used Firebug to add a gray background for clarity, and you can really see the difference here. It’s clear that the commercial theme was never tested to handle images with captions that get floated to the right or left.

So that’s one way to offer great support, test things out. When you’re building a theme for a multitude of uses, things are bound to break.

Another tool that can be useful in checking out a theme is the Log Deprecated Notices plugin. Activate this and you’ll get a quick glimpse of whether or not the theme in question was coded using up to date practices. This plugin is helpful for both theme developers and consumers alike.

Is The Theme Creating Support Tickets (for third parties)?

One particularly egregious example I shared in my session addressed a certain purveyor of low quality themes that you might find through a Google Ad after searching for “WordPress Themes”. This site offers what seems to be an incredible deal: over 800 themes for under $60. Hard to beat right? Hate to be the buzzkill here, but these themes have a multitude of coding errors and contain flat-out bad practices. They seem to offer support, but for some reason, many of their customers find their way over to the support forums at wordpress.org looking for help.
Anyway, the example I related was a common problem that comes up with many of their themes, that makes this happen. Not cool.

What Will it Take to Customize This Theme?

Some themes are built with customization in mind. Some, not so much. The structure of the theme is a big part of the equation here. Structuring a theme that will be straightforward to customize requires some forward thinking on the theme author’s part. Even coding up something as simple as a custom header image can be done many different ways, as professional WordPress dev Michael Fields knows too well. One way might be easier for less experienced users to customize than another. The theme author’s decisions here will usually have a direct result in how much time will be spent supporting the theme.

An example: using hooks and filters can be a really cool way to customize themes, but it might require more effort to support this for the developer, and there might be a learning curve for the end user.

Will This Theme Work in X Years?

This was a recent lesson for me. A few of my first WordPress projects involved customizing a few commercial themes that used TimThumb for image resizing.* After the whole TimThumb security debacle last week, I have concerns that even though I knew I had a few minutes worth of updating to do on a few sites, I’m pretty sure many other sites using this script will not be updated. Many of these are older themes that are more or less abandon-ware. So, no notification from the vendor recommending the update. On the flip side of this, I’m impressed with how WooThemes handled this situation with transparency and guidance.

So, future upgrades and maintainability are two more factors to go into support that should not be ignored.

Where To Go From Here?

My advice here is to do your homework. If you’re buying themes, think about the long-term effects your choice will have. That $35 theme that does not include support or updates might cost you a lot more than the $70+ that does. If you’re building themes, the money you make from each sale can get eaten up quickly if support is taking you more time than it’s worth.

Footnote: This was before WordPress 2.9’s built-in image resizing. Either way, many themes still use this because TimThumb allows for some flexibility that the built-in resizing doesn’t have.

I had a couple of older sites using TimThumb, and there was this one site that I figured would not be as easy to update. Why? The hosting company had disabled PHP’s read file function, which broke TimThumb. So in order to get TimThumb to work initially, I had to use a workaround that swapped out that function.

This hack would not work with the newest version of TimThumb, but I did find an easy to change configuration option that made everything “just work”.

If you’re in a similar boat you could test this out. Change this:

define ('FILE_CACHE_DIRECTORY', './cache');

to this:

define ('FILE_CACHE_DIRECTORY', ''); 

The inline documentation explains that leaving this blank will allow the script to use the system temporary directory.

Of course, Your Mileage May Vary here. Backup before you do anything. If you’re in over your head, there are lots of places to get help.

The presentation started out with three important concepts: Ingredients, Care, and Craft. These concepts were illustrated with examples of some of the great local food and beverages that are produced in the Traverse City area. Thanks goes out to Matt and Carissa Visser of Isadore Farm for allowing me to use a photo of them at their farmer’s market booth. I suppose I should also thank Right Brain Brewery, Shorts Brewery, and Higher Grounds for making my most favorite inspiring beverages too.

Some of the topics we covered in this session were:

• Why install WordPress manually vs. the 1-click install
• How to choose a theme that works with your content
• How to choose plugins that won’t cause conflicts
• Where to go for reliable tutorials to help improve your craft

I related a few real life examples that I thought we could all learn from. One was about a site that I was contracted to rebuild after a failed first attempt by another developer. The problems with the site included the use of a theme that just did not work for the site owner’s content. For example, having more than three pages broke the site’s navigation layout. This theme was available as a free download at the wordpress.org theme repository. That’s right: it was available. Fortunately for the WordPress community, there is a crack team of theme reviewers now who review each and every theme that go into the repository. Older themes typically stay in unless they have a good reason to suspend them. Like a spammy footer link. A distinguished member of said team, Emil Uzelac, was present and made sure the theme was suspended after I demoed the spammy link that was output to the footer.

There was a little bit of code presented here and there throughout, and I hope that some of the newer WordPress users/developers in the audience could see the beauty in just how simple and clean WordPress code can be.

Many thanks to those who asked some great questions, offered some additional helpful tips, and gave kind words about the session. The slides from this presentation can be viewed at http://slidesha.re/slowcookwp.

Thanks to Mary Duquaine and Heather Acton, among the many others who worked so hard to make WordCamp Chicago 2011 a success. Also, a big thanks to all of the wicked awesome sponsors too.

A library for the creation of Custom Post Types, Custom Taxonomies, and Custom MetaBoxes on an EPIC Scale.

A very interesting plugin from Andrew Terris and Eric Marden. This will most certainly help out with some of the busy work with setting these up, included getting the permalinks working, custom icons, and some cool metabox functionality. No documentation as of early July ’11, (except within the code itself.)

in the .org repo:

http://wordpress.org/extend/plugins/epic-post-type/

and on github:

https://github.com/aterris/epic-post-type

The example we’ll build here is a coupon post type, where the site owner can fill out a few fields, and WordPress generates a coupon.

Some Background on Custom Post Types and Custom Meta Boxes

If you haven’t read Justin Tadlock’s excellent writeup about Custom Post Types, you really should.
In this example, we’re going to create some custom meta boxes to make it easy for the site owner to enter the coupon information. If you want custom meta boxes for your project, I suggest you work through Devin Price’s step by step tutorial about How to Add a Metabox to a Custom Post Type. That’s what I did. I added three custom fields for the amount, description and expiration of each coupon.
For the typical WordPress theme, you would use the get_post_meta() function to display the custom fields in a custom template. For Genesis, we’re going to do things a bit differently.

Page Templates and Custom Fields the Genesis Way

So here’s the heart of this tutorial. Once you’ve got your custom post types registered and meta boxes working, you’ll want to display this stuff in a template. Here we go:
Create a new file in your child theme. In this example I’m going to name it page_special.php, as the custom post type I’m working with here is named “special”.

Here’s the code and markup for this page template, note the comments:

<?php
/*
Template Name: Special
*/

remove_action('genesis_post_title', 'genesis_do_post_title');//We're not using the title for this post type
remove_action('genesis_loop', 'genesis_do_loop');//remove genesis loop
add_action('genesis_loop', 'special_loop');//add the special loop

function special_loop() {

	$loop = new WP_Query( array( 'post_type' => 'special', 'posts_per_page' => 20 ) ); ?>
				<h1><?php the_title(); ?></h1>
			<div id="specials">
	<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
		<div id="post-<?php the_ID(); ?>" class="coupon">
			<?php//use the genesis_get_custom_field template tag to display each custom field value ?>
			<h3><?php echo genesis_get_custom_field('_amount'); ?></h3>
			<p class="special"><?php echo genesis_get_custom_field('_description'); ?></p>
			<p class="expiration">Expires on:&nbsp;<?php echo genesis_get_custom_field('_expiration'); ?></p>
			</div><!--end #specials -->
	<?php endwhile;?>
	<?php
	}

	genesis();

You’ll notice that building a custom page template in Genesis is a little different as you need to remove the loop, then add your custom loop. Also, instead of using the get_post_meta() function, we’re using genesis_get_custom_field(), that’s the Genesis way of doing things. So this will loop through and display each special on the page.

You’ll notice the liberal use of class names for each displayed field. They provide hooks for styling the actual coupons. I’m not going to get into the CSS end of things on this tutorial, you’ll have your own design constraints that you’re working with.

Here’s the custom post type in the editor:

Finally, create a new page in WordPress and select the newly created page template.

Here’s the finished coupon:

I might have left out a step, or you might have a better way to do this. Why not share that in the comments?

Here’s what a few experts have been writing about the dangers of grabbing themes from sketchy sources:
http://ottopress.com/2010/anatomy-of-a-theme-malware/

http://www.themelab.com/2009/12/08/stop-downloading-wordpress-themes-from-shady-sites/

http://weblogtoolscollection.com/archives/2010/12/10/theme-malware-anatomy

http://www.chipbennett.net/2010/12/10/only-download-wordpress-themes-from-trusted-sources/

A few places to get started:

Theme finder, a WPCandy project

WordPress.org Free Themes Directory

If you’ve got any good tips you’d like to share, please leave them in the comments.

WP.org vs WP.com from WooThemes on Vimeo.

In this example, we’ll build a landing page template off of the 2010 theme by means of a child theme. This will keep all changes protected from updates to the parent theme. The steps shown here could be used to build a landing page template for most other WordPress themes. You’ll need to be comfortable with editing WordPress template files, and know some CSS to make the final customizations. The code is available to check out at GitHub.

If you’re looking for a custom landing page solution that will integrate nicely into another theme, contact me for a quote.

Step 1: Add a new page with your landing page content. In our example you’ll see that I wrote up some typical landing page copy along with a signup form.

Step 2: Add a new folder to the theme directory, we’ll call it “twentytenland”

Step 3: Open a new document in your favorite editor, paste in the following CSS, then save this as “style.css” in the twentytenland folder.

/*
Theme Name: Twenty Ten Land
Description: A Child Theme of Twenty Ten
Template: twentyten
*/
@import url(../twentyten/style.css);

Step 4: Now we need to copy three files from the parent theme: header.php, footer.php and onecolumn-page.php. The 2010 theme has a one-column page template. If the theme you’re working with has one, use that. If not, use the regular page template. Paste these into the new child theme folder. Now we’ll modify these three new templates contained here.

Step 5: Modify the header template: Rename header.php to header-landing.php We’re going to remove the code and markup that produces the banner and navigation menu. Remove everything inside the header div. Now save this document. You could even remove the header div completely, but you might use it to put a minimal header in later.

Step 6: Modify the footer template: Rename footer.php to footer-landing.php. I removed the “site-info” and “site-generator” divs. I left in the sidebar footer code because it might be useful to have those widgets available. For example, you could put a contact form in one, a testimonial in another, etc.

Step 7: Modify the page template: Rename onecolumn-page.php to landing-page.php. Make the changes as shown below:

Step 7.5: With a recent WordPress update, the bundled version of the twentyten one column page template now calls the standard page loop which includes a comment block. Probably the simplest way to avoid including a comment form would be to turn off comments for this page. Look for the “Discussion” meta box and uncheck “Allow Comments”. If you can’t find the “Discussion” you will need to enable it from the “Screen Options” tab located in the upper right corner of the admin screen.

Step 8: Now head back to the WordPress admin panel and switch to this new theme. Then edit your example landing page. Inside the box labeled “Page Attributes” you can now choose “Landing Page.”

Step 9: Customize the CSS: You can now change the appearance with a few lines of CSS. In our example, I added a light background texture, and added some color and text shadow to the title and main heading. Note the body class used here to make these new styles only apply to our landing page template.

/*
Theme Name: Twenty Ten Land
Description: A Child Theme of Twenty Ten
Template: twentyten
*/
@import url(../twentyten/style.css);

.page-template-landing-page-php #wrapper{
	background:#fff url(images/bg-texture.png);
}

.page-template-landing-page-php #content .entry-title {
	color: #703999;
	font-size: 64px;
	text-shadow: 2px 2px 2px rgba(112,58,151,.2);
}

.page-template-landing-page-php h1 {
	text-shadow: 2px 2px 2px rgba(255,255,255,.8);

}

The example landing page:

Now make it your own!

Here are a few references to help you design, write and test better landing pages:

• Seal the Deal: 10 Tips for Writing the Ultimate Landing Page
• How to Create a ‘Landing’ Page Template using the Genesis Theme Framework. It’s much easier to do with Genesis.
• Landing pages: ten top tips
• 5 Beautiful Landing Pages That Prove Great Design Still Sells Landing pages don’t need to be ugly.
• How to do A/B Testing in WordPress Test and iterate!