I have more or less completed the changes for the HTML5 version of Suffusion (probably Suffusion 4.1.0 or 4.2.0). A lot of folks think that HTML5 compatibility simply means that your site has to pass HTML5 validation. That would be doing HTML5 for all the wrong reasons. Here is why:

1. The W3C markup validation service for HTML5 is still in its experimental stages, because a lot of aspects haven’t been finalized yet. Getting a “valid” or “invalid” result doesn’t really mean much. Just like the ampersand validation errors in XHTML were more of an irritation rather than something indicative of serious errors in your markup, HTML5 has its own quirks, some of which haven’t been worked out in the WordPress core (E.g. Category links fail on validation).
2. One significant advantage of HTML5 is semantic markup. What is semantic markup? Simply put, it is markup that is context-aware. Here are some examples:
   1. This site’s header in a prior version of the HTML would use an H1 or H2 tag enclosed in a <div>. That works fine for your layout, but what about the site tagline? Isn’t that a part of your header too? HTML5 solves this by letting you define a separate <header> tag.
   2. In the older standard the widgets in your site were <div>s, as were the post contents. Again, from the point of view of your layout this is fine, but to a robot your post content is probably as relevant as your widgets. To address this HTML5 gives you <article>, <section> and <aside> tags.

   There are several other new tags that support semantic markup.

3. Several new tags can be used in your posts, such as <video>, eliminating the need for Flash-based players on compliant browsers.

Coming to the true point of this post, to take advantage of the semantic markup tags, the following changes will be made:

1. Changed from <div> to <header>
   1. The site header (#header)
   2. The title container for posts (.title-container)
2. Changed from <div> to <nav>
   1. The navigation bars: Navigation Bar Above Header (#nav-top) and Navigation Bar Below Header (#nav)
   2. Page links (.page-links) which show up when you put <!--nextpage--> in posts
   3. Post navigation (.post-nav), which shows the previous and next post
3. Changed from <div> to <footer>
   1. The post / page footer, that shows up at the bottom of each post / page (.post-footer)
   2. The site footer (#page-footer, #cred) is enclosed in new <footer> tags
4. Changed from <div> to <article>
   1. Post content (.post)
   2. Page content (div.page)
   3. Posts in the tile layout (.suf-tile)
5. Changed from <div> to <section>
   1. Author Profiles (.author-profile), shown at the top of author archives or in the “Authors” template
   2. Category Information (.info-category), shown at the top of category archives
   3. Tag information (.info-tag), shown at the top of tag archives
   4. Search preface, shown at the top of search results
   5. The comments section for each post or page (#comments)
   6. The different sections of the Magazine layout, for headlines (.suf-mag-headlines), excerpts (.suf-mag-excerpts) and categories (.suf-mag-categories)
   7. Widgets in the Custom Layout widget areas (.cl-widget)
6. Changed from <div> to <aside>: Widgets in the following widget areas:
   1. Sidebar 1 (#sidebar-1) – boxed and flattened styles
   2. Sidebar 2 (#sidebar-2) – boxed and flattened styles
   3. Sidebar 1 Bottom (#sidebar-1-b)
   4. Sidebar 2 Bottom (#sidebar-2-b)
   5. Widget Area Below Header (#horizontal-outer-widgets-1) – boxed and flattened styles
   6. Widget Area Above Footer (#horizontal-outer-widgets-2) – boxed and flattened styles
   7. Top Bar Right Widgets (#top-bar-right-widgets) – if the widgets are displayed as a sliding panel
   8. Wide Sidebar Top (#wsidebar-top) – boxed and flattened styles
   9. Wide Sidebar Bottom (#wsidebar-bottom) – boxed and flattened styles
   10. Adhoc Widgets (#ad-hoc-1, …, #ad-hoc-5)

   Note that the widget areas are still <div> elements, but the widgets in these areas are <aside> elements instead of div.

The above list may be changed further.

How does all of this affect you?

Two words: Custom Styles. Very often you use a custom style to override some theme setting. Sometimes in order to be very specific you might rely on a setting that will no longer work. E.g. If you wanted to set the background for a widget, there is a high likelihood that you used this:

div.suf-widget { background-color: #abcdef; }

This will not work any more. You can try knocking off the "div" above, or say:

aside.suf-widget { background-color: #abcdef; }

If you wish to have your site work seamlessly for the next major version, you might want to include the additional CSS above.

From what I have observed on the forums, div.suf-widget, div.suf-horizontal-widget, div.suf-flat-widget, div.post and div.page seem to be common usages. These will need to be modified to either aside.suf-widget, aside.suf-horizontal-widget, aside.suf-flat-widget, article.post and article.page respectively or to .suf-widget, .suf-horizontal-widget, .suf-flat-widget and .post (you will still need to qualify .page with article, because otherwise .page might refer to the body element as well).

And there are two other words why this affects you: Child Themes. If you have a child theme where you have made a copy of a core file, you will need to tweak the tags in the file to suit the new changes. Some files that you may have changed would be single.php or layout-blog.php or layout-list.php or layout-tiles.php or layout-mosaic.php or index.php. In fact, any template file you have copied is likely to get affected.

If you have any questions regarding this do let me know.

I will probably require help beta-testing this release, so I will keep you posted.

Apologies for the delay in getting this beta out. There are two main reasons for the delay: I was extremely busy with a lot of work at my day job, and secondly, I wasn’t able to wrap my head around one particular bug. Eventually I managed to overcome the challenges, so I present to you Beta Release 2 of Suffusion 4.0.0. This version should be as good as a release candidate.

Please note the following:

1. I had mentioned of a change in a prior post about killing an option on the Magazine template. I had forgotten to include it in the previous beta. This one removes the option.
2. Following a rather interesting and misguided rant on the WP forums, I decided to get rid of the “Custom Types” functionality from the theme. But before you hit the panic button, note that any post types you have defined through this interface will continue to work – you just won’t see the options to add new custom types. I have already applied for space for a plugin where I will be releasing this separated feature as a plugin.
3. I have, hopefully fixed the issues reported with the first beta. This includes some problems with the Mega Menus and some others with the translations.

Let me know how this goes.

As alluded to earlier, I have been working quite furiously on version 4.0.0 the last few weeks. Broadly speaking this release doesn’t change too much of how the theme used to work, however there are a few major additions:

1. Mega-menus:
   I know that I have been dangling this carrot for a while, so hopefully the delivered functionality will be worth the wait. Suffusion will be the first free theme with this functionality, so no pressure.
2. Page layouts:
   I did mention this earlier – you will be able to associate a page template separate from a layout for your pages. This will let you utilize templates offered by plugins and bundle them together with a specific layout.
3. Custom Template Layouts: This is another biggie. You will be able to assign a “Custom Template” to a page. That will let you do some awesome layouts by utilizing widgets. E.g. if you want to create a product page, you will be able to define a specific layout that has one row with just one big featured slider, then two rows with 3 boxes each, with specific product features, then one row with 2 boxes, with testimonials and pricing options.
   If this feature isn’t good enough, you can create multiple pages with the custom template and either keep the same defaults across all of them, or create specific layouts for individual pages.
4. Since a very very long time I have had one particular feature request on my plate. Although this request is 2 years old, I have always had it in plan for different releases, but then pulled it when the releases became big. Even during the release of the Photonique skin I wanted to improve the look and feel for the Featured Content and I did make some changes for the same. Yet I chickened out at the last moment when it came to specific aspects of improving the look and feel. This time I bit the bullet and finally put it in place. The Featured Content now has options to do a whole lot of cool things in terms of look and feel.

In addition, the regular improvements to speed, performance and usability are included. I have finished coding all the major items and am hoping to wrap up development in a couple of weeks. As I mentioned, I will be pushing this release out for beta testing.

I am going to be making a change in Version 3.9.3 that might impact some users. I had once introduced a method to include custom PHP in the theme. That was more than 20 months back. Lots of things have changed since then, including provision of support for child themes.

If anyone is using that piece of functionality (and I doubt if the total count of such users is more than 10), I will be removing it in 3.9.3. Note that you can take all the functions defined in the Custom PHP file and put them in a child theme’s functions.php file.

Please feel free to post here in case you have any questions.

I know that there is a navigation menu bug in 3.9.0 and that is on its way to being fixed. The reason it hasn’t been done yet is because I have been down in the trenches working on a new skin for the theme, as alluded to in the last couple of posts.

In this post I wanted to give you a feel of what is coming and open it up for feedback. I am calling this skin Photonique (like Photonic, but different) because it is better suited for photo-blogs. Since it is meant more for photo-blogging, the ideal settings for this would be 0 sidebars and an 800px layout. I would like to call your attention to several new features, key among them being the comment display enhancements. The comment form also looks a lot more classy, but that is something you cannot see because I have blocked comments on that site. You can check it out here.

I have also been working on adding a Typography module to the theme and functionality to seamlessly use your own icons.

Stay tuned.