The efficient method of producing rounded corners on a block element is to use CSS.

All 4 corners:
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;

Applying to, respectively, Gecko browsers (Firefox) – Konqueror – Webkit browsers (Safari, Chrome).

Or just the one corner:

-webkit-border-top-left-radius: 3px;
-khtml-border-radius-topleft:10px;
-moz-border-radius-topleft:10px;

(Note the difference in syntax, just to keep you on your toes)

And there’s also the CSS3 specification:
border-radius: 5px;
border-top-left-radius: 5px;

So, as a theme designer, you immediately come up against the question – if it doesn’t work with Internet Explorer, do I put it in my theme? (Or go with the fun and games of making up a few round background graphics…)

As of today, I would say yes, go with CSS rounded corners in a WordPress theme – even though IE users aren’t getting the full experience. The principle here is progressive enhancement – standards-compliant and fully-featured browser users gain the benefit, and the impetus is applied to, yes, MS to get with the program.

It’s not as if the rounded corners don’t degrade gracefully back to the foresquare and conservative straightness loved by MS, is it…

Having recently been taken to task by a punter who berates our poor suffering HTML designer for daring to use tables in some of our WordPress themes, maybe best not to say which ones…

There does seem to be an attitude that tables = evil, without even stopping to think.

Our correspondent has missed the point. The reasons for not using tables in global layout are well-established now and pretty much taken as read. In 2002, the debate and revolution was common currency. It may well be that someone coming to the discipline a bit later on, won’t be entirely clear about the principles of table-less design, when to use, and when not.

There’s nothing intrinsically wrong with <table> as a tag

Where the problems start, when using tables for macro page layout, is that it becomes hard to avoid nesting, tables within tables within tables, messy code – if you’ve ever hacked around with osCommerce, you’ll know how much fun that can turn into. It is also harder, though not impossible in all cases, to get the markup semantically correct. (There’s nothing ‘unsemantic’ about a table, that a div magically cures).

But we’re talking about lower down in DOM, as it were…

If you want three boxes in a horizontal line, then a table is more likely to do the job effectively than floating three divs – a table clears itself, you have as much (perhaps more) control over heights, both of the start point, and relative between each box – and once you get the hang of the slightly peculiar CSS declarations that go with the TD tag, it seems a no-brainer. You see enough examples of broken-layout pages that haven’t been checked for widths in all screen resolutions, with their floated divs heading south to know that a certain sloppiness can creep in.

So, yes, the tables stay in the themes. You won’t ever see a theme here laid out using one big table on the page, as used to be, but there’s no reason to throw away a perfectly useful design tool.

Alibi3col is a three-column free WordPress theme, with central content and left & right sidebars.

Compatible with WordPress versions 2.7+
Tested on Firefox 3, Internet Explorer 7 and 8, and Opera 9.

Features

• Horizontal menu for top-level pages
• Link and hover colors fully customizable from the admin panel

Demonstration: Alibi3col demo

Download: Alibi WordPress Theme 1.5 – alibi3col

Our free themes are supplied “as is” – sorry, but we don’t have the resources to offer support for enquiries about individual installation/customisation. You’re free to use and modify them as you wish, but we would ask you to retain the credit link in the footer.

OfficeFolders is a free WordPress theme, two-column, with a right sidebar.

Colors: blue, grey, white
Widget Ready: Yes
Width: Fixed

Compatible with WordPress version 2.2 upwards
Tested on Firefox 2,3, Internet Explorer 7 and 8, and Opera 9.

Features

• Horizontal page menu – configure order and exclude pages

Demonstration: OfficeFolders demo

Download: OfficeFolders WordPress Theme 1.4 – folders.zip

Our free themes are supplied “as is” – sorry, but we don’t have the resources to offer support for enquiries about individual installation/customisation. You’re free to use and modify them as you wish, but we would ask you to retain the credit link in the footer.

LouiseBrooks is a fixed-width, 2 column with right sidebar theme, with a little Deco styling, not too much… and the theme is now fully updated for WP 2.7 functionality, threaded and page comments etc…

The theme has been tested on Firefox 2,3 Internet Explorer 6,7 and Opera 9.
Compatible with WP 2.2 upwards.

Demo: LouiseBrooks Theme

Download: LouiseBrooks WordPress Theme 1.5 – louisebrooks.zip

Release Notes:
This theme is not sponsored.
Released under the GPL license.
This WordPress theme contains NO third party sponsorship links.

If you’re a theme developer, you’ll (perhaps) be looking at keeping up with the latest in javascript/AJAX and incorporating a few tweaks into your brand new theme – in some ways, it’s been made very easy for you (and in one or two ways it’s just a little tricky…)

So, assuming you have a basic knowledge of PHP, theme design and javascript, here’s how it works:-

Loading up jQuery

WordPress arrives with jQuery already bundled, so this bit’s easy enough. But we need to get it loaded onto the page, which doesn’t happen automatically…

The plan here would be to get some nice tabbed divisions going, maybe in the sidebar, courtesy of jQuery.

<?php
add_action('template_redirect', 'them_js_head_load');

function them_js_head_load(){

 // we don't need this on admin pages, so...
	if(is_admin()) return;

      wp_enqueue_script('tabber', get_bloginfo('template_directory') . '/scripts/tabs.js', array('jquery', 'jquery-ui-core', 'jquery-ui-tabs'), '1.0');
}
 ?>

In this code, we’ve enqueued a custom script tabs.js, that’s going to initiate the whole process – and we’ve also declared its dependencies – jquery, jquery-ui-core, jquery-ui-tabs, the user interface sublibraries, also bundled into WordPress as standard.

These are already registered, so only the handle is required, here: ‘jquery-ui-tabs’, etc.

The full list of bundled libraries is at: WordPress wp_enqueue_script.

Vital! – The snippets of jQuery code you’ll find while out and about on the net make extensive use of the shortcut $ to express the jQuery global object. This isn’t going to work in WordPress, so at all times we use jQuery(document).ready(function($) – and then it will work… Once inside the function, we can use $ as a shortcut.

The reason for this slight complication is that Prototype and Scriptaculous libraries arrived first into WordPress and have got to hold on to using the $ shortcut. And don’t be tempted to dabble with jQuery.noConflict() here – you won’t get good results.

And from here, since you know what you want to put in your theme in terms of flashy javascript/AJAX add-ons, I’ll leave you to get on with thieving some snippets and getting them up and running….

* Update – some of this information is superseded by changes in the way WordPress handles the loading of javascript – there’s a follow-up here – More about WordPress and jQuery