A new con-caution by John Resig called Sizzle has recently caught my eye. It’s a series of JavaScript files that you can add to your website to improve your JS Selector capabilities, adding advanced CSS3 selectors to jQuery and other JavaScript libraries.

Sizzle Browser Support

• Firefox 2.0+
• Internet Explorer 6+
• Safari 3+
• Opera 9+
• Chrome 1+

By using this library you can effectively do more with less CSS code, and even replace some of your JS and server-side logic.

A Few Good Reasons

By using Sizzle you’ll also become familiar with CSS3 selectors you’ve probably never used, and will likely use in the future. In an ideal world we would all take the time to learn these and use them in our everyday work, but more often than not it’s simple not possible because of older browser’s and their lack of support (Internet Explorer). By providing full support of CSS3 in Internet Explorer 6 and up, Sizzle helps to solve this issue.

Other Features

• Provides meaningful error messages for syntax errors
• Optimized for performance – only 4KB when gzipped and minified
• Completely standalone (no JavaScript library needed)
• Created by a rock solid JavaScript developer, expect to see enhancements well into the future.

I haven’t yet used Sizzle, but based on most of John’s other work I think it sounds pretty promising. I’ll be playing around with it in furure work, if anyone has anything to add please do.

I’ve always kept my eyes open for a fresh WordPress starter theme to use for my next custom theme project. In an ideal world I would always use the same template to begin with, and that template would be caste in silver and polished with gold, but let’s be honest here. I’ve used my fair share of starter themes, and have found myself moving from one to the next from project to project. Partially because I have the attention span of a goldfish, but also because I’ve never truly been satisfied with the themes I’ve tried. I’ve even spawned my own home grown theme, called Base, which we now routinely use in our WordPress CMS processes at Fresh Tilled Soil. I’ve been pretty satisfied with the Base theme, mostly because of the self worth that comes along with using it, but as always I have this inkling in the back of my head that we could be doing things better by harnessing the power of many, rather than just a few.

Child Themes for Modular Theme Developement

With this realization in mind I discovered Thematic, which boasts abilities way beyond our Base theme by harnessing the power of the open source crowd. Thematic will allow you to begin your next custom theme with a solid set of pre-built functions, styles and scripts that make the process faster and quality better. Thematic uses a feature of WordPress called child themes, which has been long since ignored since it’s addition to the core. Using child theme relationships you can keep your customizations separate from the original Thematic install, making maintenance and updates easier.

Thematic Features

A few features of Thematic that caught my eye include:

• Browser and OS body classes for realistic cross browser testing. Yes browser targeting is the devil, but let’s be realistic here; it’s unavoidable.
• A simple, well built, dynamic drop down menu that is automatically generated based on parent/child page relationships in WordPress.
• Pre-styled typography for that looks great in all browsers for virtually anything you can include in a post.
• Speed optimization
• Search engine optimizations
• Backed by a community, so it’s been through rigorous testing
• Extra widget-ready areas—13 in total and more possible in your Child Theme
• Various layout options for 2, or 3 column designs
• Fully compatible with popular WordPress plugins like All in One SEO & Platinum SEO

The Selling Point

The true selling point for me is the ability to differentiate your customized source code from the original downloaded Thematic code with a child theme. Let’s say you have 50 clients with custom themes setup as Thematic child themes, you could quickly and easily provide those clients with new features as newer versions of Thematic are rolled out, without harming any customizations. If for some reason a theme customization did break during an install, you can simply revert back to the working version of Thematic and report the issue to the community for support.

There are a few other WordPress theme frameworks out there, Thematic just happens to be the one that caught my eye. To mention a few:

• Whiteboard
• Theme Hybrid
• WP Framework
• Carrington

I would love to hear some other opinions about the other options that exist, and why they may indeed be better. Please don’t hesistate to post your feedback.

I’ve always known that something wasn’t quite right with corporate websites, and after seeing things like Dustin Curtis’ mockery of American Airlines, I couldn’t help but explore the topic furthur. Why is it so hard for a large corporations to create successful strategies online? Bureaucracy.

I’ve recently published an article about the various frustrations of working with corporate clients in the web design world. It’s located on the new Fresh Tilled Soil: What’s Fresh blog.

Luckily, there is finally some proof out there that you can use to start driving more conversion on your website using specific copyrighting styles. Dustin Curtis has recently posted about his little You Should Follow Me on Twitter experiment. Using AB testing, Dustin was able to test various ways of getting people to follow him on twitter to find out which combination achieved the highest conversion rate.

The Results are Astonishing

• Starting with a statement: “I’m on Twitter.” 4.70%
• Switching to a command: “Follow me on twitter.” 7.31%
• Trying a stronger personal command: “You should follow me on twitter.” 10.09%
• Adding the literal callout “here”: “You should follow me on twitter here.” 12.81%

The final result was a 173% increase in conversion rates.

Not bad at all.

If you’re a developer I recommend reading the many high quality sources of information available on the web. This is really the only way to stay on the bleeding edge of things. I’ve decided to share with you the sources I frequently read, and hope that you can contribute some ideas to make this list grow as time goes on.

Development & Plugins

1. Noupe.com’s WordPress Category – Noupe has some great lists and articles available in a setup similar to Smashing Magazine.
2. Yoast – Though not directly focused on WordPress, Joost de Valk has some some great articles about WordPress and has also contributed a great deal to the community at large by creating some very useful plugins over the years.
3. Weblogs Tools Collection – A great resources for marketing your blog, and improving it with the latest tools and plugins.
4. WPCandy – A great resources dealing specifically with WordPress and nothing else. Topics include: WordPress Themes, Plugins, Tips, Tricks, and more.
5. Lorelle on WordPress – Lorelle has been writing about all things WordPress since the beginning of time it seems. She has some great articles that talk about WordPress’s inner functionality, extendability through the use of plugins, troubleshooting and all things developer related.
6. WPShout – A newer one I’m less familiar with, it’s entirely focused on WordPress and looks pretty promising.

Marketing & Profitability

1. ProBlogger – ProBlogger is focused on marketing, writing and selling  your blog. They have some invaluable articles that discuss writings styles, how to profit off of advertising, and how to reach your audience.
2. Upstart Blogger – More focused on the topic of blogging for profit in general, this one is a great resource for anyone who runs their own professional blog.

Design

1. WeLoveWP – A design gallery to help you get inspired before your next design, or to realize that WordPress really can power beautiful, elegant websites.
2. WPDesigner – A design focused blog specializing in WordPress.
3. Vendelay Design: WordPress Category – This could have made it to the development list above, but since it’s by a design firm I figured that “design” was more appropriate. Needless to say they have some pretty great WordPress articles relating to both design and development.

Suggestions?

This list is far from complete. Show me up and let me know some of your favorite source of high quality WordPress information!

Recently I worked with a client that requested a similar feature. Because of their less than tech savvy audience, they wanted to have a local avatar system that was dead simple. Here’s a video explanation of the system I setup to handle the situation. Even though I am addressing the client directly, this provides a great introduction to how everything works.

I achieved this setup with the help of 3 great little plugins created by Jeff Farthing:

• Redirect My Login
• Theme My Login
• Theme My Profile

With these plugins installed you can easily style the WordPress login screen, the WordPress create an account screen and the profile editor screen so that your website users never have to see the WordPress backend. They’re all pretty self explanatory, aside from maybe the Redirect My Login plugin. This plugin allows you to control the page a user is redirected to after they login. This is handy for situations when the login box is on multiple pages and you want users to be redirected back to the page they logged in from.

Once you’ve installed the plugin’s and tweaked the settings in WordPress you can customize the look and feel with CSS. These are the styles I used in the demonstration above. Please understand that these may not look exactly the same as the demo due to the cascading nature of the CSS used on this site.

/* Custom Login */
html #profile,
html #login
{
	padding:0;
}
#your-profile h3
{
	font-size: 13px;
	color: #333;
}
div#login #loginform
{
	background:#eee;
	float:left;
	padding:18px;
	font:12px/18px Georgia, Times, serif;
}
div#login #registerform
{
	background:#e9e8ba;
	float:left;
	padding:18px;
	font:12px/18px Georgia, Times, serif;
}
div#login #loginform p.submit,
div#login #registerform p.submit
{
	margin-bottom:0;
}
div#login label
{
	font-weight:bold;
}
div#login label input
{
	font-weight:normal;
}
div#login input#rememberme
{
	vertical-align:bottom;
}
table.form-table
{
	text-align:left;
}
table.form-table img.avatar
{
	margin-right:20px;
}
#content #avatar-data a
{
	border-bottom:none;
}
#avatar_file
{
	margin:10px 0 15px 0;
}
#pass2
{
	margin-top:10px;
}
#description,
#pass2,
#pass1
{
	margin-bottom:4px;
}
table.form-table label
{
	width:300px;
	display:block;
}
table.form-table th,
table.form-table td
{
	padding:4px 0;
}
table.form-table th
{
	color:#424242;
	font:13px/18px Georgia, Times, serif;
	vertical-align:top;
	width:300px;
}
table.form-table td
{
	font-size:10px;
	font-weight:bold;
	text-transform:uppercase;
	color:#9A9897;
	vertical-align:top;
}
table#avatar-data td
{
	vertical-align:top;
}
table.form-table td input
{
	margin-right:5px;
}
body ul.links,
body #login ul.links
{
	list-style:none;
	margin:0;
	padding:0;
	clear:both;
	font-family:Helvetica, Arial, sans-serif;
}
body p.message,
body #login .error
{
	font-size:10px;
	padding:9px 10px 7px 10px;
	font-weight:bold;
	text-transform:uppercase;
	font-family:Helvetica, Arial, sans-serif;
	border:none;
}
body p.message strong,
body #login .error strong
{
	font-weight:bold;
	color:#111;
}
div#login ul.links a,
body #login ul.links a
{
	font-size:10px;
	font-weight:bold;
	text-transform:uppercase;
	border-bottom:none;
}
body ul.links li,
body #login ul.links li
{
	display:inline;
	margin-right:10px;
}

If people are at all interested in this sort of thing please let me know, I’d be happy to create a better how-to video showing how it was all done.

Smashing Magazine is a website and blog that offers resources and advice to web developers and web designers. It reviews software and web-based tools for web designers and developers, and publishes guides and how-tos on web design and web development. From time to time they offer free fonts, icons, and templates for download.

2. Nettuts+

Nettuts is a web design and development article depot with many contributing authors. It is part of the Envato blog network. The articles range from software reviews, discussions on new technologies and frameworks to improve process, how-to guides on WordPress, and interviews with renowned developers. Nettuts+ gives you access to the extended set of paid tutorials and articles, and only costs $9 a month with no commitment to get started. One great thing about Nettuts+ is that it offers quality screencasts to show hands on examples. Also be sure to check out PSDTuts for high quality photoshop tutorials too!

3. Noupe

Noupe is another community driven article site for web designers and developers. They have a great wordpress section, and feature some incredible list posts. I’ve found that Noupe is a better source of WordPress related information and resources than SmashingMag or Nettuts.

4. Web Designer Wall

Another great resources, this one features some inspirational vectors design resources, CSS & PSD tutorials, flash tutorials and general web design news. I’ve found that this is an all around good resources for jQuery, CSS and WordPress. It provides original content that always keep me up to date with my coding and design practices.

5. Boagworld

Do you commute to work? If you do then I would highly suggest throwing some recent webisodes of the Boagworld podcast. Marcus Lillington and Paul Boag of Headscape offer up their insights into the modern world of web design, which are quite good. They discuss all aspects of working on the web including design, process, billing, hiring, development and new technologies. I listen to this one weekly and it keeps me up to date with the latest technologies and solutions circulating the modern web community.

Ryan Carson, Founder of Carsonified

Ryan Carson is the brains behind Carsonified and Think Vitamin and has even written articles for A List Apart. With honorable mentions in well respected web design books such as Designing the Obvious, Transcending CSS and Beginning CSS Web Development he’s a well known web celebrity that provides an ample amount of knowledge to the web design community.

Cennydd Bowles, UX Designer at Clear Left

Cennydd is a lead user interface designer at british web design agency Clear Left. Clear Left has won various design awards for it’s work, some of which is featured in The Web Designer’s Idea Book, and is well known around the world as a leader in web standards design and development.

Simon Collison, Creative Director at Erskine Design

Simon Collison is a well known leader in the web design community. He has written many great books including Beginning CSS Web Development, CSS Mastery: Advanced Web Standards Solutions and Web Standards Creativity.

Elliot Jay Stocks, Freelance Designer

Elliot Jay Stocks is an influential freelance designer with some very impressive web related work under is belt. He’s recently written a Site Point booked called Sexy Web Design: Creating Interfaces that Work and also has some work featured in The Web Designer’s Idea Book.

These are just a few of the influential interviewees that Ryan has been interviewing. Ryan also addresses an important question…

What is your job title and why?

With job titles like Rockstar, Wizard and Guru it’s no wonder why hiring skilled web techs is so difficult. How does one become a wizard? It’s not as if you can whip out your wizard certificate. I think it’s great that Ryan is addressing this topic, for both employers and job seekers.

This series is also a great resources for anyone that was as puzzled as I was in college about entering the world of web design.

1. More Fields

More Fields is the plugin that I’ve chosen to use for most of my custom field scenarios. It allows you to create your own “post type” to make the WordPress administrative interface more intuitive for less tech savvy users. By default WordPress has two “post types”, Pages and Posts. Any custom post type you create is based on either a Post or Page. Let’s say that you wanted to create your own post type called Case Studies. If you select Page as the Case Studies post type, then any Case Studies you create will appear under the Case Studies menu as well as under the Pages menu. At this point you may be asking yourself, what’s the point? If your Case Studies show up under Pages and Case Studies what’s the difference.

The difference is that you can control what options show up on Case Studies side of things. You can remove the Excerpt, Send Trackbacks, Custom Fields, Discussion or Post Slug boxes. If you want to add your own custom write panels for Case Studies, you can create “Boxes” that have specific form fields in them. These fields include:

• Single line text fields
• Multi-line textarea fields
• WYSIWYG editors (without the ability to upload images unfortauntely)
• Checkboxes
• Radio toggles
• Selectable file list that will let you choose from the files uploaded by the main WYSIWYG editor for that specific page or post

These boxes become write panels and are visible only on post types you choose. It all sounds complex, I know, but I would highly recommend setting up a WordPress sandbox install somewhere and playing around with it. It’s truly very powerful.

The Lowdown

If your looking for an easy to setup alternative to Flutter that allows you to create custom post types then More Fields may be for you.

2. Custom Field Template

Custom "Additional Content" Field Expanded

The Custom Field Template plugin is very similar to More Fields, and was the first plugin I explored for managing custom fields and write panels. It has it’s advanatages and disadvantages. Unlike More Fields, the Custom Field Template plugin does not provide the ability to manage “Post Types”. Any custom fields you create will show up for all Posts, or Pages, depending on how the plugin has been setup. You can add a WYSIWYG editor with the ability to upload files; something you can’t currently do with More Fields.

If your interested in how you can setup the Custom Field Template on your site, check out my Advanced Content Management with WordPress Custom Field Templates tutorial post.

The Lowdown

If your looking for a rock solid way to add a custom write panels to your pages and posts, then Custom Field Template may be your guy.

3. Flutter

Flutter is a very popular plugin that add’s a great deal of custom field power to WordPress. Like More Fields, you can create custom post types that have specific custom fields attached to them. It’s a bit difficult to get setup, and it will probably require the skills of an experienced web developer to get up and running.

Once it is up and running it’s absolutely wonderful. Flutter has better file management than any other plugin on this list, allowing you to upload images or files using two separate fields.

The Lowdown

If your looking for a solid write panel and post type creator with great file management fields then Flutter may be for you.

4. Pods CMS

Pods is a CMS framework that lets you create, manage, and display your own content types. Don’t bother hacking blog posts into becoming something they’re not. With Pods, create entirely new data structures with only the fields you need.

Pods CMS is somewhat new to me, and was originally something I heard about on the WordPress Weekly Podcast. It has a 5/5 star rating with 23 ratings on the WordPress Plugin Codex and was developed by seasoned programmers with an in depth knowledge of the way data types should be stored in databases. As best described by the authors:

The idea behind Pods seems to have stemmed from the Drupal Content Construction Kit (CCK) and seems to be very promising. I regret to say that I’ve never actually used the plugin, but have a general idea of the power behind it. Can anyone that has used Pods discuss some of it’s advantages and disadvantages? I’d love to hear about them.

The Lowdown

If your looking for advanced custom field management with a strong backend that can scale then Pods may be for you.

5. WP-CMS Post Control

The WP-CMS Post Control allows you to completely customize how specific users view the WordPress administration pages. You can remove many features to avoid confusion, and simplify the interface for less tech savvy users. Personally I’ve found that is very useful and do this to a certain extent with the More Fields plugin. This plugin seems to provide far more control over the admin interface by allowing you to:

• Force standard browser upload rather than the Flash uploader
• Remove the revisions feature completely
• Turn off the auto save feature
• Create a message panel allowing you to show messages to authors.
• Hide the Screen Options and Help dropdowns
• Hide the Favorites dropdown
• Hide the Dashboard QuickPress
• Control the display post options like the preview button, permalinks, tags, categories, excerpts, trackbacks, custom fields, discussion, and comment & ping options
• Control the display of page options like custom fields, discussion, comment & ping options and attributes.

The Lowdown

If the people using the WordPress admin on your site aren’t too technical, it may be a benefit to simplify the interface by removing certain options. You can use the WP-CMS Post Control plugin to easily do this.

6. Custom Write Panels using Functions.php

Last but not least, is the home grown approach. For all of you out there that enjoy getting your hands dirty, you can create your own write panels without the use of plugins. Function Web Design has a great tutorial on how to do this. You can read it here: Tutorial: Creating Custom Write Panels in WordPress.

If your at all farmiliar with PHP development I would highly recommend exploring this approach. It may take more time up front but it will help you understand how these write panels are created and how the information inputted into them is saved. This information will help you solve problems in the future faster and more effeciently.

It’s now featured on WeLoveWP.com and has a pretty good rating so far. Pretty much everything you see is being managed by WordPress with the aid of some handy plugins. If anyone has any questions about how the site was built let me know I’d be happy to shed some light on our work.

The site was designed by Liz Abbate Hyman and developed by Alex Federov.