Apr 212012

This is hopefully the last beta for version 4.2.0. I am making beta release 4 available for you to try out. This release has some minor fixes:

  1. The saved options in the Custom Layout section of the Edit Page screen were not showing up in the back-end.
  2. There was a bit of a problem with the size settings for the Custom Layout template – the widget sizes were not showing up correctly. Now, apart from a small alignment issue with the “auto-arrange” option, everything should be working fine.

Do give this release a try! This is essentially the last opportunity to try out your corner cases before I make a formal release of this version.

Apr 172012

Following some more testing from Mark, here is beta release 3 of Suffusion. The following are the key changes to this beta:

  1. The mosaic layout and the list layout were sometimes showing incorrect titles if used with the new Custom Post Type Archive layout. This should be fixed now.
  2. There was a critical problem with post backgrounds in IE8. Hopefully it should all be good now.

I urge you to give the beta a try if you haven’t done so yet. Though the volume of changes isn’t very high, it is still very far reaching in terms of impact. Since completely new HTML5 markup has been introduced, giving the beta a run will definitely facilitate a “no surprises” experience.

Apr 152012

I have made the second beta available for version 4.2.0. I did mention this in a comment last night, but for the benefit of the testers I thought it might be a good idea to make an official post for this.

You can get the beta from here. The beta fixes a couple of bugs reported by Mark:

  1. There was an issue with incorrect sidebar counts coming up in the new Custom Post Type Archive.
  2. There was another problem with the “auto-arrange” for the Custom Layout template not working correctly.

Give it a try and let me know if things are fine.

Apr 112012

I have completed the features that need to go into 4.2.0 of Suffusion. You can get the beta release 1 of the theme for testing. The following are the big features included:

  1. HTML5 Markup
    Obviously, the biggest part of this release. I have converted the markup of the theme from XHTML to HTML5. Please give the theme a thorough spin and see if any aspect of usage is broken. Good things to test:
    1. Browser compatibility: Do check on both older and newer versions of IE
    2. Markup consistency: Different sidebar layouts and other aspects of your site should behave just the same as with the older markup.
  2. Extensive Custom Post Type Integration
    I have provided a new template called Custom Post Type Archive. Using this, you can display archives of any custom post types that you have. You can control things such as how you want the layout of your archives to be, what byline information you want to display etc. When you select this template and save a draft of your post you will see a new tab in Additional Options for Suffusion for the Custom Post Type Archive. You can make all your selections there.
    I have also added a set of options under Custom Types → Layouts, that will let you configure the display of individual post types. Customize and be merry!
  3. Save Options CSS as a File
    This feature is back! You can now go to Back-end → Site Optimization and pick the option to save your CSS as a file. Note, that in some cases you might be asked to verify your FTP credentials. Don’t be alarmed – that is a part of WordPress’ native security module.
  4. Layout Adjustments
    I have switched from a JavaScript-based layout module for the Custom Layout template, Tile layout and Magazine template, to using the more modern CSS attribute column-count. Note that this won’t work for IE and IE will continue using a JS-based layout. However Firefox, Chrome and Safari should be able to use the new engine. This will make columns more evenly balanced in the modern browsers.

Do let me know what you think of the beta. I will probably release the capability of saving of options as a file in an interim release while you give the beta a test-drive.

Mar 122012

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.

Feb 072012

Thanks to some thorough testing from some of the Beta testers, a few other bugs were caught in Beta. I have fixed those and am uploading Beta Release 3. Do give it a try and let me know of any issues that you face. The key fixes in this release are:

  1. Sometimes a “Page of Posts” template was not showing skewed sidebars. This should be working now.
  2. In some cases the Magazine layout with 3 excerpts per row was pushing one excerpt to the row below.
  3. There was an issue with uploading images via Suffusion’s back-end, where after uploading only a “0” was showing up in the field.
  4. Some incompatibilities with NextGen have been addressed.
  5. The Widget Area Below Header and Widget Area Above Footer were disappearing if a “flattened” display style had been selected for them.

I am hoping this is the last beta. Of course, that is subject to your input.

Feb 062012

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.

Jan 232012

I am putting up the first beta for Version 4.0.0. You can download it from the Google code page. I welcome you to test this version and put it through the grinder. Try out different combinations of layouts, test it with plugins etc. and let me know what comes up.

To reiterate, here are the highlights:

  1. Mega-Menus:
    To see what the fuss is, go to Appearance → Menus. Then create a menu. For the root level items in your menu you can pick a Mega Menu Widget Area. Pick one, assign it a number of columns and do the other settings as required. Make sure you assign this menu to a menu location.
    Then go to Appearance → Widgets and add widgets to the Mega Menu area that you have selected. Now check it out on the front page.
    Typical things to test would be:
    1. The menu shouldn’t overflow the wrapper’s borders if the menu width is less than the wrapper width.
    2. Check with the different widget height settings, such as “Auto-arrange” or “Equal height for the same row” etc.
    3. Vary the number of columns and see the effect.
    4. If you have picked an empty widget area, you shouldn’t see the tab in the navigation bar.
  2. Custom Layouts:
    Go to Templates → Custom Layout Template. Save the settings as you wish. Then create a page and assign the “Custom Layout” template to it. Upon “Save Draft” or “Publish”, in the “Additional Options for Suffusion” box you will see a new tab for “Custom Layout”. You should be able to save the settings. Add the widgets to the widget areas and then visit the page in the front end. Your new page should conform to your selections.
    Typical things to test would be:
    1. You should be able to create different pages with this template.
    2. For each page you should be able to control the number of columns in each Custom Layout widget area.
    3. Each page should respect the corresponding selections.
    4. Try the different widget height settings.
    5. Use this capability in conjunction with Widget Logic and see the effects.
  3. Page Layouts:
    Instead of picking a “Single Left Sidebar” page template, you can now pick a “1 Left Sidebar” layout for a page / post. This gives you the advantage of combining third-party templates with Suffusion layouts. With this, the regular page templates with sidebar options are deprecated. You can still continue using them, but using a layout is going to be much easier.
    Things to test would be:
    1. If you have a page template such as “1 Left Sidebar” assigned, then you assign “2 Left Sidebars” layout, your page template will get the preference.
    2. Pick any other page template and assign a layout to it – you will be able to get the combination of both.
  4. Featured Content:
    I added a lot of new options to the static Featured Content and widget. You will now have options to display icons, position the slider index and the controls differently etc.
  5. Magazine Template / Tiles Layout:
    I have changed the markup here to use div instead of tables. This will now prevent the unbalanced column widths that you currently see. Do give this a thorough test with all your layout combinations.
  6. General Checks:
    Try the following general checks (not a complete list, but it should give you some idea):
    1. There were issues with the latest version of the NGG plugin – that should be gone.
    2. Activate another theme, then come back and activate Suffusion – you shouldn’t see any errors of any sort in this process.
    3. Check if the menus are working correctly in terms of custom colours, rightly showing a downward or sideward arrow etc.
    4. Try sharing posts with this release – you shouldn’t see any fatal errors reported when you do this.
    5. You should see some “pointers” with tips in the back-end if you are using WP 3.3.x.

Note that this is a beta release. So please don’t use it on a live site! Feel free to post your comments and bugs here.

Jan 192012

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.

Jan 102012

As I wrap up the development of version 4.0.0, there is one very important note for people using the Magazine template.

Current users of the theme see an option, Templates → Magazine to change → Sidebar layout to adopt, where you can pick a particular layout. If that is set to “Default” for you, you have nothing to worry about. But if you are using a specific layout, this will temporarily stop working. The fix though, is very quick. You have to open the Magazine page for editing, and go down to “Additional Options for Suffusion”. There you can pick the appropriate page template and save the post. Things will work as usual after that.

I will be doing a beta release for 4.0.0 in a couple of weeks. Hopefully this beta will be fine, unlike the fiasco of 3.7.5!