Quick Tip: The foundation for a great WordPress theme: HTML5

We recently had one of our readers ask “what are the best practices for cross browser design coding?” It seems almost like an uphill battle when we run into problems when our web pages look differently in various versions of Internet Explorer versus Firefox versus Chrome.

We think if you’re going to code a WordPress theme from scratch and not use an existing framework like Genesis, Headway, WP Mosaic, or Pagelines, you should start with a robust and well supported HTML5 framework and insert the necessary WordPress hooks. WP Mayor has an excellent roundup on HTML5 frameworks and how to get them to work with WordPress. There are at least three WP themes specifically built around HTML5 (Toolbox, Roots, and Twentyten Five) that you’ll want to take a look there.

Two finds of the day: Another WP theme finder and best WP shortcodes

Here’s another WordPress theme finder, that’s not as visual as WP Candy’s but nevertheless may be useful for some. It’s called QualiThemes. We like it as it includes both free and commercial themes and you can rate them. Our nitpicks: the original theme developer doesn’t get listed on the page and the drop down menus to filter the themes could use some visual work and spacing.


We also noticed there’s a huge list of awesome WPshortcodes at WordPress Answers by Stack Exchange including: delay RSS posts, add excerpts to pages, customize the order of the admin menu navigation, and profile the database performance.

Get it: QualiThemes | WordPress Answers


Why I heart Genesis

Editor’s note: This week we have a friend and guest writer: Lori Berkowitz from Bee Dragon give us some insight as to why she thinks the Studio Press’ Genesis framework is the greatest thing since sliced bread. We reviewed Genesis from earlier this week from a content creator’s perspective, so here’s a coder’s perspective.

From a developer’s point of view, I have a huge crush on Genesis! I have become somewhat of a “Genevangelist”. The amount of time Genesis has saved me in the past year is incredible. I can build custom page templates in minutes and that is just the tip of the iceberg. I’ve been working with it for a little over a year now and have built quite a few sites using child themes, either completely custom or built from one of the child themes.

Genesis provides a lot of hooks, some filters, some shortcodes, and other handy developer friendly features, but my favorite function is genesis(); It allows you to make a page template by adding whatever hooks, functions, html, etc. that you want the page to have, followed by genesis(); The genesis() function will completely render the appropriate page type and follow whatever instructions you gave it in the rest of the file. For example, a page template for a custom post type could look like this:

php // Template Name: Template Name Here
remove_action('genesis_loop', 'genesis_do_loop');
add_action('genesis_loop', 'custom_loop');
function custom_loop() {
global $paged;
$args = array('post_type' => 'PostType'); // any wp_query args can go here
genesis_custom_loop( $args );

If you are interested, I have been collecting Gensis snippets here.
The source link on some snippets leads to other sites with lots of useful Genesis info and tips.

Cheat Sheet: Anatomy of a WordPress theme

If you’re learning how to create your own WordPress theme, check out this succinct but informative cheat sheet called “Anatomy of a WordPress Theme” over at Yoast.

While this is not a tutorial or a detailed how to, this will give you a big picture overview of how WordPress works.

The only thing we think it’s missing is it doesn’t talk about page templates.

New WordPress WYSIWYG Theme Builder – ThemeFrame

We’ve seen a variety of products and services like Artisteer or PSD2CSS that claim to let you build WordPress themes easily and quickly. Let’s add a third product to the mix that I ran into today called ThemeFrame. On paper it looks great with live Preview, CSS Inspector, color pickers, and visual sliders for settings. Hopefully I’ll get a chance to check these guys out in the next few weeks and do a quick review.

Update: if you want to get to the meat, check out their screencast video. A video is worth a 1,000 words!
And if you’re in the San Francisco bay area, check out the EastBay WP meetup for November 21st, where they’ll be taking a closer look at PSD2CSS.