Alex King has created a plugin and submitted a couple patches, but until the WordPress UI catches up we as theme developers need to be a little creative.

In the most recent version of Portfolio Press, I ended up styling the image format to look like this:

(You can also view it on the demo site)

Post Format Styling

Instead of putting a title above the post like the standard format, I decided to hide it. In my opinion the focus should be on the image.

Instead of displaying the the_excerpt like I do for other posts in the archive view, I display the_content so that full images are able to be displayed.

Then, using jQuery, I built a rollover effect that displays the post title when someone hovers over the image. If you click on the image, it will take you to the full post.

jQuery With Post Formats

Using jQuery makes it much easier to work with the post formats because you don’t need to guess what’s in the content. It also fails gracefully if it doesn’t find the markup it’s looking for.

For instance, the rollover effect in Portfolio Press is applied only on the first image detected in the post format- even if the author dropped 12 in there. If there’s no image, no additional markup is added.

The script checks to make sure the image is at least 200px wide. The rollover title still might not fit in a larger image, but at least it has a chance.

Authors sometimes link their images to the fullsize version. However, in the archive view I want the image to only link to the full post. The script I wrote will unwrap any link around the original image, and replace it with a link to the post in the archive view. This might not be what some users in intend, but I think the majority will.

Enough Talk

Here’s the script I used to create the rollover effect on post format images:

    // Image Post Format
    $('#content .format-image').each( function() {
    	var image = $(this).find('img:first');
    	if (image.width() > 200 ) {
	    	var link = $(this).find('.entry-title').children();
	    	var title = link.text();
	    	image.unwrap('a');
	    	image.wrap('<div class="image-wrap" />');
	    	image.wrap(link.text(''));
	    	image.parent().append('<h3/>');
	    	$(this).find('h3').text(title).width(image.width() - 20);
    	}
    });
    $('.format-image .image-wrap a').hover( function() {
    	$(this).children('h3').slideDown(100);
    }, function(){
    	$(this).children('h3').slideUp(200);
    });

View It

You can view the post formats here. Portfolio Press 0.9 can be downloaded from GitHub (the latest isn’t in the .org repository yet).

I just finished a small project for Bluefin Software redeveloping their blog. They wanted to stay with WordPress.com hosting because of its ability to scale and low maintenance. And incredibly, by using just the custom design upgrade and widget areas in the Coraline Theme, it was possible to build exactly what their designer had envisioned.

Bluefin Blog After Custom Design

Bluefin Blog Original

Benefits of Using WordPress.com

Using WordPress.com has a few benefits:

• It’s completely free to have a basic blog. The custom design option is only $30/yr, and custom domains are only $12. Together, it’s still about half as much as using a shared host like HostGator or BlueHost.
• It scales up incredibly well. WordPress.com serves up 2.5 billion pageviews a month. Your site will run fast, content is served off a global CDN, and you never have to worry about upgrading a plugin.
• It handles everything most users need. Contact forms, polls, stats, twitter widgets, code highlighters, and flickr widgets are all available.

Disadvantages of Using WordPress.com

If you use WordPress.com you won’t be able to add any plugins. You’re stuck with what they got. No bbPress or Gravity Forms for you, sorry.

You can’t alter the theme markup. Although it’s possible to do a lot with CSS, you won’t be able to do everything- especially in the javascript department. You’re also limited to the selection of themes on WordPress.com.

Tips for Custom Design on WordPress.com

If that doesn’t deter you, here’s some tips for working with the custom design option:

Pick the Right Theme

Before you get heavily involved in the design, try to pick out the theme you want to use and work within it’s limitations.

I originally chose Toolbox to build the site off of since it’s a blank canvas with good markup, but to make the custom footer work I needed widget areas at the bottom. That’s why I switched to Coraline, which has an incredibly flexible layout.

Use the Widget Areas

Widget areas are the one part (besides the actual post content) where you can control the markup. Just paste in the HTML you need (no scripts or iframes though).

Build the Site Locally

I built out the Bluefin design locally using MAMP. All the free themes on WordPress.com are available on WordPress extend or directly through SVN from Automattic.

Make a Child Theme

Once you have the theme you plan to customization, make a child theme, import the WordPress.com content (if you have it), and start styling. The other advantage of building a child theme is that it will be very easy to switch to self-hosted if you need to in the future.

Upload All Your Assets to WordPress.com

When you’re ready to move the design over, simply paste in the contents of your child theme’s CSS in the custom design editor. If you’re using any images, those should be uploaded into your media assets on WordPress.com and replaced in the stylesheet so they can be served from WordPress.com’s CDN.

In Conclusion

WordPress.com won’t be for everyone- but it’s definitely a great option for some. It’s low (or free) price and quality support make it a great option for folks who aren’t ready to make the plunge on self-hosted, and also for companies and organizations that just need a basic website and fairly unique look.

Also, as a developer it’s quite nice. On a .org site you can do anything with enough time and work, but on .com the scope is inherently limited. In this case, to 400 lines of CSS.

When setting up a new site with Canvas, I’ll make new default style settings using a child theme. This is the safe way to set up the theme, because if the design is done purely through the admin panel there’s the chance we’ll lose it if it’s ever reset. It also gives us the full css toolkit rather than just the options that Woo has provided.

Additionally, by using a child theme, we can make changes to the markup (adding extra divs or wrapper for styling)- and not be worried about losing those customizations when a new updates of Canvas roll out.

Instructions for Setting up the Child Theme

1. Install Canvas in your WordPress theme directory.
2. Create a new folder in the themes directory for your child theme.
3. Add a “style.css” file, and paste in the following information:
   

   /*
   Theme Name: Canvas Child Theme
   Theme URI: http://www.yoursite.com/
   Version: 1.0
   Description: Custom Theme based on Canvas
   Author: Your Name
   Author URI: http://www.yoursite.com
   Template: canvas
   */
   /* Default styles */
   @import "../canvas/css/reset.css";
   @import "../canvas/style.css";
   /*-------------------------------------------------------------------------------------------*/
   

4. You would change the theme name, author, description etc. to customize it, but the important part is “Template: canvas” which tells the child theme where to get it’s template files from.
5. You can now add your own custom styles in the css file to override any of the default css settings of Canvas.

Remove Inline Styling Entirely

If you like all the Canvas options that allow users to change the layout, logo, footer text, etc. but don’t necessarily want them altering the design, you can disable that ability from the Canvas admin panel. If you want to make absolutely sure it’s off, you can also disable from the functions.php file in your child theme:

// Removes the Woo Themes Inline Styling
	function remove_canvas_actions() {
 		remove_action('wp_head','woo_custom_styling');
	}
	add_action('init','remove_canvas_actions');

Moving the Menu Above the Logo

// Unhook the menu from where it currently is
function remove_canvas_actions() {
		remove_action('woo_header_after','woo_nav');
	}
add_action('init','remove_canvas_actions');
// Move Menu Nav Above the Logo
add_action('woo_header_inside','woo_nav');

Adding a Header Image

One design feature I really like about the new default 2010 theme is the ability to set your own custom headers for individual pages and posts. If you would like to have these on Canvas, it’ll just take a few more additions to the functions.php file:

// Code to Create Custom Headers
	$defaultheader = get_bloginfo('stylesheet_directory') . '/images/default-photo.jpg';
	define( 'HEADER_TEXTCOLOR', '');
	define( 'HEADER_IMAGE', $defaultheader);
	define( 'HEADER_IMAGE_WIDTH', apply_filters( 'canvas_header_image_width',  960 ) );
	define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'canvas_header_image_height',	107 ) );
	define( 'NO_HEADER_TEXT', true );
	add_custom_image_header( '', 'canvas_admin_header_style' );
	// This theme needs post thumbnails
	add_theme_support( 'post-thumbnails' );
	// We'll be using them for custom header images on posts and pages
	// so we want them to be 960 pixels wide by 107 pixels tall (larger images will be auto-cropped to fit)
	set_post_thumbnail_size( HEADER_IMAGE_WIDTH, HEADER_IMAGE_HEIGHT, true );
	function canvas_admin_header_style() { ?>
		<style type="text/css">
			#headimg {
 			height: <?php echo HEADER_IMAGE_HEIGHT;
			?>px;
 			width: <?php echo HEADER_IMAGE_WIDTH;
			?>px;
			}
			#headimg h1, #headimg #desc {
			display: none;
			}
		</style>
		<?php
		}
// Adds Header Image to Theme
	function childtheme_header_after() { ?>
    <div id="header-image">
 	<?php if ( is_singular() && has_post_thumbnail( $post->ID ) ) {
		echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
	} else { ?>
  		<img src="<?php header_image(); ?>" alt="Header Image" />
  	<?php } ?>
	</div>
	<?php }
 	add_action( 'woo_header_after', 'childtheme_header_after' );

This is just set up to for the 960 layout, but you could code it a little further to get the Canvas option for layout and set this width automatically. See the child theme I built here: http://canvas2010.wptheming.com/.

Unhook IE Conditional Stylesheets

If you’re doing heavy customization of Canvas, you may also want to unhook the default IE conditional stylesheets and load your own new ones from the child theme. Here’s how you would do that:

// Reduces Database Calls
define('CHILDTHEME_URL', get_bloginfo('stylesheet_directory'));
// Removes Canvas Browser Specific Stylesheets
function remove_canvas_actions() {
		remove_action('wp_head','woo_IE_head');
	}
add_action('init','remove_canvas_actions');
// Adds the IE Stylesheets again, but now looks in the Child Theme Directory
function woochild_IE_head() {
?>
<!--[if IE 6]>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/includes/js/pngfix.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/includes/js/menu.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="<?php echo CHILDTHEME_URL; ?>/css/ie6.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" media="all" href="<?php echo CHILDTHEME_URL; ?>/css/ie7.css" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" media="all" href="<?php echo CHILDTHEME_URL; ?>/css/ie8.css" />
<![endif]-->
<?php
}
add_action('wp_head','woochild_IE_head');

Add a New Widget Area

Add this code to your functions file:

function childtheme_widgets_init() {
	register_sidebar(array('name' => 'New Widget Area','id' => 'newwidgetarea','description' => "New Widget Area Sidebar", 'before_widget' => '<div id="%1$s" class="widget %2$s">','after_widget' => '</div>','before_title' => '<h3>','after_title' => '</h3>'));
}
add_action( 'init', 'childtheme_widgets_init' );

And replace the regular sidebar call in your template with this line:

<?php if ( is_active_sidebar('newwidgetarea') ) dynamic_sidebar('newwidgetarea'); ?>

For instance, if you were replacing the sidebar on the home page, your code in index.php would look like this:

</div><!-- /#main -->
            <?php woo_main_after(); ?>
            <?php if ( is_active_sidebar('newwidgetarea') ) dynamic_sidebar('newwidgetarea'); ?>
		</div><!-- /#main-sidebar-container -->
		<?php get_sidebar('alt'); ?>
    </div><!-- /#content -->
	<?php woo_content_after(); ?>

//Replace Blog Title with Your Logo
function remove_thematic_blogtitle() {
     remove_action('thematic_header','thematic_blogtitle', 3);
}
add_action('init','remove_thematic_blogtitle');
function child_logo_image() {
     //Add your own logo image code
     //Here's an example
    ?>
    <h1><a href="/" title=""><img src="<?php bloginfo('template_url'); ?>/images/logo.jpg" alt=""/></a></h1>
   <?php
   // End Example
}
add_action('thematic_header','child_logo_image', 3);

Add a Search Form to the Header

function add_search(){
include (TEMPLATEPATH . '/searchform.php');
}
add_action('thematic_header','add_search');

Add “Home” to Menu Options

// Add 'Home' Menu Item
function childtheme_menu_args($args) {
    $args = array(
        'show_home' => 'Home',
        'menu_class' => 'menu',
        'echo' => true
    );
	return $args;
}
add_filter('wp_page_menu_args', 'childtheme_menu_args');

Remove Blog Description

//Remove Blog Description
function remove_thematic_blogdescription() {
	remove_action('thematic_header','thematic_blogdescription',5);
	}
add_action('init','remove_thematic_blogdescription');

Remove the Post Footer

add_filter('thematic_postfooter','my_postfooter');
function my_postfooter() {
// The Sound of One Hand Clapping
}
add_filter('thematic_postfooter','my_postfooter');

Add a Twitter Link Under Each Post

function childtheme_postfooter($output) {
	$twitterlink = '<p><a href="http://www.twitter.com/devinsays">Follow me on Twitter</a></p>';
	return ($twitterlink . $output);
}
add_filter('thematic_postfooter','childtheme_postfooter');

Add Google Analytics Tracking Code

//Google Analtyics
function analytic_footer() {?>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "XXXXXXX";
urchinTracker();
</script>
<? }
add_filter ('thematic_after', 'analytic_footer');

Add Thumbnail Support

// Add Thumbnail Support for Theme (introduced in 2.9)
if ( function_exists( 'add_theme_support' ) ) {
	add_theme_support( 'post-thumbnails' );
	}

Change the Footer Message in Your Site to:
“Copyright (Current Year) (Your Blog Name) | (Link to Admin Page) | (Link to RSS)”

// Generate footer code
function childtheme_footer($thm_footertext) {
     $date = date('Y');
     $blog_name = get_bloginfo('name');
     $admin_url = get_bloginfo('wpurl') . '/wp-admin';
     $entries_rss = get_bloginfo('rss2_url');
     $thm_footertext = sprintf(
     '<p>&copy; %s %s | <a href="http://wptheming.com/2009/10/useful-thematic-filters/">Site Admin</a> | <a href="http://wptheming.com/2009/10/useful-thematic-filters/">Entries RSS</a></p>',
     $date, $blog_name, $admin_url, $entries_rss);
     return $thm_footertext;
     }
add_filter('thematic_footertext', 'childtheme_footer');

Add a Favicon

function childtheme_favicon() { ?>
    <link rel="shortcut icon" href="<?php echo bloginfo('stylesheet_directory') ?>/images/favicon.ico">
<?php }
add_action('wp_head', 'childtheme_favicon');

Removing Plug-In Code

A lot of times plug-ins will insert unnecessary stylesheets and scripts. Here’s some filters to remove some of that cruft in popular plug-ins. Although it’s listed here under Thematic filters, you can use the following code on any WordPress site.

// Remove Page Navi CSS
function childtheme_deregister_styles() {
	wp_deregister_style( 'wp-pagenavi' );
}
add_action( 'wp_print_styles', 'childtheme_deregister_styles', 100 );

Removing and Renaming Widget Areas

This feature is in the trunk version of Thematic. It should be publicly released when WordPress 2.9 comes out, but you can download it via SVN if you want to get a jump on it. For a more detailed tutorial on widget areas with Thematic read this post in the forums.

/* Defining Widget Areas */
function remove_widget_areas($content) {
	unset($content['1st Subsidiary Aside']);
	unset($content['2nd Subsidiary Aside']);
	unset($content['3rd Subsidiary Aside']);
	unset($content['Index Top']);
	return $content;
}
add_filter('thematic_widgetized_areas', 'remove_widget_areas');
function rename_widgetized_areas($content) {
	$content['Primary Aside']['args']['name'] = 'Sidebar';
	$content['Index Bottom']['args']['name'] = 'Home Content';
	return $content;
}
add_filter('thematic_widgetized_areas', 'rename_widgetized_areas');

Disable Header Scripts

If you’re not using drop down menus, no need to load the header scripts.

function childtheme_remove_scripts() {
    remove_action('wp_head','thematic_head_scripts');
}
add_action('init', 'childtheme_remove_scripts');

Other Resources

If you’ve ever been to the Thematic forums, you’ve no doubt noticed Christopher Goßmann’s awesome presence. Here’s his code snippets for changing/styling layouts.

Design Notes has a few snippets, some of which I added to this list.

Here’s 6 Useful Thematic Snippets for related posts, linkable post images, and removing default scripts and stylesheets.

If you’re interested in using non-standard web fonts, check out this article for How to Add Typekit to your Thematic Child Themes

Thanks to Justin Tadlock for the PageNavi CSS removal code.

According to Matt, “WordPress takes care of 80-90% of (the mechanics of ) Search Engine Optimization (SEO)”. So by using WordPress, you are already better positioned for search than the majority of websites. But what else contributes to page rank and search optimization?

I would highly recommend watching Matt’s presentation in full, but if you don’t have 45 minutes to spare, I took some notes:

Permalink Structure

Use a permalink structure in WordPress that will take advantage of your keywords. If your post titles have the most relevant search terms, use a preset structure like “http://wptheming.com/2009/09/sample-post/” or a custom structure like “/%postname%/”. You can read about this more in depth at Michael Gray’s site.

Alternate Keywords in the URL

The url of your post is an opportunity to use alternative keywords. If your title is “Changing the default printer on Linux and Firefox” you may want to your url be “change-default-printer-linux-firefox”. The difference is the keyword “change” in your url vs. “changing” in your title. By using both you will increase the odds of someone finding your content.

Also, make sure to separate the keywords in the url with dashes. WordPress already does this by default, but you may want to pay more attention to what gets generated.

An Overview of Page Rank

Page rank determines how fast your site is found by Google, how often they search for new content, and how deep they look. Matt defines page rank as “The number and importance of links pointing to you.”

Your page rank improves when other sites link to yours- especially if those sites are very relevant or popular. A link from the New York Times, for example, will contribute more to your page rank than a link from a small time blog with just a few readers.

How to Increase Page Rank

Offering content people want to link to will help improve your page rank. Matt offers these tips for expanding your reputation and generating quality links:

1. Provide a useful service.
2. Do original research and reporting.
3. Give great information.
4. Have a creative niche.
5. Make lists, people love to read top ten reasons why…
6. Create controversy.
7. Social network and make friends.

I won’t give examples for each of these tips, though Matt does in his presentation. The main idea is if create content people want to read and share, they will link to you.

Tips for Writing Good Content

Be interesting. Write often. And Katamari- which is Matt’s metaphor for starting small, finding your niche and slowly expanding.

Keyword Possibilities

Think about what people are likely to search for and include those terms in your content. If you want someone to find a post about “flash drives”, also include the keywords “thumb drive” and “usb drive”. Google offers a tool to help you find out which keywords are relevant. Matt’s instructions for it are: “Think about the words you want to rank for, type those words in, and make sure those words are in your post.”

Don’t Overdo It

The last important rule is to not overdo it. You don’t need to use a keyword five times in a post. The search engine will get it after one, and definitely by the second. The most important thing is to be relevant to your readers and write interesting content.