Legacy XHTML mode

In order to preserve backwards compatibility, all themes that upgrade from pre-2.0 to 2.0 are automatically set to use a xhtml legacy mode. This is more or less the same as 1.0.4 with few modifications or additions. Users are encouraged to upgrade to html5 markup.

New things included in xhtml mode

Additional semantic css classes

In 2.0, new css classes have been added to the main structural elements. These classes are there in both the xhtml and the html5 markup. None of the previous classes or id's have been removed, so your old stylesheet will continue to work. The classes have been added to improve the semantics of the elements and make it clearer what each element is.

The new classes and their corresponding id's are:

#wrapper          -> .site-wrapper
#header           -> .site-header
#branding         -> .branding
#blog-title       -> .site-title
#blog-description -> .tagline
#main             -> .site-main
#container        -> .content-wrapper
#content          -> .site-content
#footer           -> .site-footer

The widget areas also got classes added, that corresponds to the name of the widget area.

.primary-aside
.secondary-aside
.first-sub-aside
.second-sub-aside
.third-sub-aside
.index-top
.index-insert
.index-bottom
etc

ARIA roles

Similar to the css classes, the ARIA roles that has been added to aid assistive technology are included no matter if the markup is xhtml or html5.

New filters for the main structural html element tags

Also in 2.0, filters have been added to the opening and closing tags of all the main structural div's. These filters exist both in xhtml and html5 modes. This means that if you want to use a css framework like foundation or bootstrap, you can filter in column and other layout classes without touching the template files.

New h3 element in the #access div

A new heading with a class of menu-toggle has been added to the #access div. This is used to toggle the mobile menu visibility on very small screens. This element is hidden on larger screens by Thematic, but a child theme that doesn't use any parent stylesheet will need to add styles for it in the child stylesheet.

Switching from xhtml to html5

There is a check box on the Theme Options screen that turns the legacy mode on or off. Simply uncheck the box in the Theme Options to start using the html5 markup. If you want to make sure no-one accidentally turns on the xhtml mode again, you can remove the checkbox from the settings page with a one-line filter:

add_filter( 'thematic_show_legacymode_checkbox', '__return_false' );

Here is more detailed guide of how to make the transition from xhtml to html5.

Enforcing xhtml mode and turning off deprecation calls

A theme that for some reason really want to use xhtml markup can do so by adding the checkbox from the settings page with a simple filter:

add_filter( 'thematic_show_legacymode_checkbox', '__return_true' );

Then add theme support for the legacy mode in your child theme to enforce the xhtml mode.

add_theme_support( 'thematic_legacy' );

If you have debugging turned on, you will see a lot of deprecated calls regarding some xhtml functions. These can be turned off with another call to add_theme_support:

add_theme_support( 'thematic_legacy_quiet' );

Using the responsive stylesheet in xhtml mode

It is possible to take advantage of the new responsive stylesheet and layouts even though the markup is still xhtml. These are not automatically added by Thematic in xhtml mode, but you can add them in your child theme.

Add the parent stylesheet to the child theme. Either through adding it as a dependency

function mychild_add_thematic_styles() {
	return array('thematic-main');	
}
add_action( 'thematic_childtheme_style_dependencies', 'mychild_add_thematic_styles' );

Or by enqueuing it directly

function mychild_scripts() {
	wp_enqueue_style( 'thematic-main', get_template_directory_uri() . '/library/css/main.css', array(), '' );
}
add_action( 'wp_enqueue_scripts', 'mychild_scripts' );

To add the layout section to the Theme Customizer, it is a simple call to add_theme_support (Note: in 2.0-beta1, this was not yet possible.):

add_theme_support( 'thematic_customizer_layout' );