Sayontan

Sayontan Sinha is a technology strategy consultant living in Houston, Texas. Coding is his hobby, as are philately, numismatics, classical music, creative writing and quizzing. He is the author of numerous pieces of WordPress software, including the ultra-popular Suffusion WordPress theme and the versatile Photonic (for Flickr, Picasa, Smugmug and 500px.com integration) and FontMeister.

Nov 142010
 
Opinion

I have completed adding the finishing touches to the official plugin for the Suffusion BuddyPress Pack, to be distributed from the WordPress site. I am currently waiting for access to the SVN repository at WordPress so that I can upload the plugin. Once I have the access the plugin should be readily available. You will be able to search for it from your administration panel at Plugins → Add New by searching.

The plugin has come along quite nicely. I have also bundled in it the support for the BuddyPress Album+ plugin. In future iterations I will add support for a few more third party plugins, assuming they allow their templates to be overridden by the theme.

Note that for the plugin to work you must have at least version 3.6.9 of Suffusion, which is the current version.

Once the plugin is officially released I will let you know.

Nov 112010
 
Design

Before I begin about this release, I would first like to apologize to all people whose layouts broke due to the last release. As it turns out I had not tested certain configurations involving the static Tabbed Sidebar, which resulted in all people using this feature having their sites become train-wrecks. Disabling the Tabbed Sidebar would have fixed the issue for all affected people, but there was no way you as a user could have known that.

Anyway, this release is a bug-fix release and there are no new features. Here are the fixes:

  1. Layout bugs
    1. The biggest issue – wonky layouts upon activation of the Tabbed Sidebar – has been fixed. There is one exception – if you are using IE6 (yes, that fossil) and you have the Tabbed Sidebar on and your Tabbed Sidebar is on the left side and you have at least one sidebar on the left site, then your left sidebar will render incorrectly on IE6 (only on IE6). I spent some time trying to figure this out, but gave up because I had to get this release out early and this particular combination has an extremely low probability of occurring. Otherwise I have hopefully resolved all issues on all browsers regarding this mishap.
    2. The Widget Area Below Header was not spanning the full width of the wrapper and was showing a blank space on the side.
    3. The Widget Area Above Footer was overlapping the right sidebar if the sidebar was longer than the content.
    4. The No Sidebars template was showing up with empty space on the side.
    5. In the “Tiles” layout excerpt images were becoming very tiny because the widths were computing incorrectly.
  2. If you had defined more than one WP 3.0 Menu, each menu item was getting repeated multiple times in the navigation bar. This has been fixed too.
  3. There was a bug that was preventing the post footer from appearing in the archive view (front page, category, date archive, tag etc). So if you had Tags or “Posted By” at the bottom of a post, that wasn’t being displayed. This now works.
  4. There was a very old bug where the excerpt title in the “Tiles” layout where the header of excerpts wasn’t reading the alignment setting correctly. Instead it was borrowing the alignment of Magazine excerpts.

One point I would like to highlight – often when you upgrade your theme it apparently breaks your layout, while in truth there is nothing wrong with it. In such cases try out a few very simple things. First and foremost, clean out your browser’s cache and reload your page. Second, if you have a caching plugin make sure that you rebuild its cache, otherwise it will serve content that is not current.

I also thought I should highlight what some known issues are. There are 2, actually, both of which are JavaScript-related:

  1. At some point in the last 3 releases the Google Translator widget stopped working. I have no idea why, since I haven’t changed anything there. If you were looking for this feature to work I encourage you to look for some free plugin to help you there.
  2. At some point in the last few months the Fade / delay effect on the navigation menu stopped working. Again, I have no idea why. Since this is a very low impact issue I didn’t spend an excruciating amount of time trying to resolve this.

Another aspect I wanted to highlight was regarding my comment in my previous post, about “Rolled up menus”. A few users had difficulty understanding the concept, so I thought I will explain it here. To create a new dummy node:

  1. Go to Appearance → Menus and open up your menu.
  2. Create a new menu item using a Custom Link.
    1. For the URL specify #. Make sure you delete the “http://” that sits there by default
    2. For the Label put in whatever you want to name your root node.
    3. Add to Menu
  3. Once added, move this item to the top of the list.
  4. Now, indent every other item under this top item. This way each other node is a child of your newly created root. Remember to indent – this is important.
  5. That’s it. Since you have set the URL to be “#” Suffusion knows that it shouldn’t open any page for it. All other items are listed as children of this new node.

That’s it for this release. I am hoping this will smooth over the rough edges of 3.6.8. I will keep subsequent releases smaller in scope, though, quite frankly I don’t foresee anything being so large in scope.

Over the next few weeks I will focus on building a proper plugin for Suffusion and BP compatibility, assuming that the support queue for 3.6.9 isn’t huge.

Nov 112010
 
Opinion

As the WordPress theme review process gets really strict about what WP functions are permissible in themes and what are not, it becomes more and more difficult for theme developers to support older versions of WordPress. Most developers have already taken the step to stop supporting anything older than version 3.0.

I have always been pro-backward compatibility and Suffusion works for any version of WP starting from 2.8. But with the complexity of code and the stringency of approval criteria rising, this will not be sustainable. As a result I have decided to phase out support for older versions of WordPress.

I will start by first removing any code that is specific to version 2.8, then remove 2.9 support. I would like to make this post a formal announcement of this decision. If you are a Suffusion user on a version of WP older than 3.0, now is a great time to upgrade. Version 3.0, which came out in early June has been stable for a while now and has some great features. If you haven’t upgraded you are missing out on a great number of goodies. And if the only reason you are not upgrading is because some plugins that you are using have not been written to work with 3.0, you should start looking for alternative plugins for the same task, or else you will run the risk of having a very inefficient system, or one where your theme and plugins will support different versions of WP.

With regards to version 3.6.8, I have already released version 3.6.9 with fixes for all the reported bugs in there. It has been approved, but not made live yet by the reviewers, so please sit tight.

Nov 072010
 
Design

After what seems like ages, here is a new version of Suffusion. As already mentioned, this has been a very very code-intensive release because of the nature of the changes.

These are the main changes in this release:

  1. New Features
    The following were added in this release:
    1. Fluid Width – By far the biggest change in Suffusion since the inclusion of options in the very second release. This change required me to overhaul the HTML structure of the theme and always put the content before the sidebars, then do massive amounts of testing. While I put in every bit of effort required to get this working as per expectations, if you find something that is not working as you expect, please let me know. I will be very happy to fix it.
    2. Improved Menus – In any other release this would have been the prima donna. But as it stands, this has been relegated to second position. Now you have even better control of your navigation menus, in terms of the number of options you can pick from:
      1. Include all, ignoring next option
      2. Include selections from the next option
      3. Exclude all, ignoring next option (New)
      4. Exclude selections from the next option (New)

      The new options can be better understood in context of some major code reengineering. Earlier I had a very comprehensive menu-building code, that worked very intuitively. This behavior was different from WP’s default behavior. However the old code created an insane number of queries, particularly if your menu was big.
      In this release I have removed all my self-created code and resorted to using WP’s inbuilt functions – wp_list_pages, wp_list_categories, wp_list_bookmarks and wp_nav_menu. his significantly reduces the number of queries and the load on your server.
      As a tip, if you want to completely remove pages/categories/links from your menu, use the “Exclude all, ignoring next option” setting instead of “Include selections from the next option”. This is much more optimal in terms of code.

    3. You can now get rid of the HTML title that shows up when you hover over your navigation menu. Visit Blog Features → Main Navigation Bar Setup → “Title” attribute upon hovering over navigation bar.
    4. There was no styling available for the HTML elements legend and fieldset. CSS declarations have been added for them.
  2. Removed Features
    The following features have been removed:
    1. I have removed the “rolled-up” setting for WP 3.0 menus as it is redundant. If you want to create a rolled-up menu you can automatically create a base node in the menu and add the rest of your menu under it.
    2. I have also removed the option to not use body_class WP function to generate classes for your body. This removal was essential because the body_class function is essential to the style setup for the theme.
  3. Bug Fixes
    The following bugs were fixed:
    1. A fix has been included for a severe bug that was causing page templates to max out at a width of 600px. The bug was caused by incorrectly applying filters to the sidebars and templates.
    2. The following navigation menu-related bugs have been fixed:
      1. Selected navigation bar items (Pages, Categories and WP 3.0 menus) were not getting highlighted in the Minima skin.
      2. Selected navigation bar items for WP 3.0 menus were not getting highlighted across any skin.
      3. The values set for highlighting in Visual Effects → Theme Skinning were not being accurately reflected.
    3. The following BuddyPress-related bugs have been fixed:
      1. In various BP screens, if something was selected from a drop-down list (like filters, or sort criteria), nothing was happening. The correct AJAX calls for this have been included.
      2. The Create Profile and Edit Profile pages in BP were not rendering properly. This has been fixed.
      3. Messages in the inbox etc. were not being styled properly. This has been addressed.
    4. There was a bug in the List Layout style, which was offsetting the posts by 1 if all posts were not being displayed. In other words, the top post was not being displayed, and if there were  N+1 posts in all and each page was to display N posts, the second page was showing an error. This has been rectified.
    5. Links in featured content were not getting the right color. Again, this has been fixed.
    6. There was an error in the charset syntax in header.php, style.php and rounded-corners.php. This wasn’t impacting anything as such, but it has been rectified nonetheless.
    7. In the options pages if you put in 0 as a value for some dimensions it wasn’t being read correctly. I have changed the code to handle this.
  4. Changes
    1. The comments section has been revamped to look better and to facilitate better styling. There is now a custom callback function invoked from there.
    2. As per the theme review guidelines I had to change the credit link at the bottom. It now just links to the Suffusion home page and not my home page.
    3. Somewhat whimsically I have changed the default font from Arial to Trebuchet. You can however switch back to Trebuchet if you want, from the Visual Effects → Body Font Customization options.
    4. You now will not see any version tag appended to JS files included by the theme.
    5. The Spanish and French translations have been updated. Thanks to David for his modifications of the French translation!

I will soon update the Suffusion BP Pack so that you can make use of the new changes to the core theme. I will keep you posted.

Nov 072010
 
Opinion

After slogging very hard the last 3 weeks I managed to get all the changes I was hoping to include in place for version 3.6.7 last night. Making use of the illusion of an extra hour from daylight savings I went ahead and tried to submit the theme to WordPress.

But as I tried to submit it I hit a snag. I kept getting a message that said:

Error 413: Request Entity Too Large

No matter what I tried and from which browser and machine, the error did not change. It is highly likely that the WP servers had a configuration change in the back-end. I did post out a message to the theme reviewers asking them as to why this is happening. After all the file is just marginally larger than the previous versions and I have never had this problem earlier. Let’s see what they say.

As I mentioned earlier, the primary features of this release were a reworking of the navigation bar code, a fundamental change to the HTML markup and a set of options for fluid/flexible width. In addition there have been a number of BuddyPress-related style changes. I will release a new version of the Suffusion BuddyPress Pack when this version of Suffusion gets approved.

I will post a detailed change log once the theme is approved.

Oct 282010
 
Opinion

This is a follow-up to my previous post. I wrote earlier that I was incorporating fluid-width options into Suffusion. Over the past couple of weeks I have managed to work a good bit on this and I am happy to say that I have managed to get the markup rearranged, and I started full-fledged work on incorporating fluid width into the theme today.

You might be wondering what I mean when I say “get the markup rearranged”. To explain, with a fixed-width setting I can define my layout this way:

<div id='sidebar-1'>…</div>
<div id='sidebar-2'>…</div>
<div id='main-content'>…</div>

This would render my page showing the first sidebar, then the second sidebar and then the main content – in other words, it represents a layout with 2 left sidebars. The code would change depending on the layout. So if I wanted a single left and a single right sidebar, my markup would become:

<div id='sidebar-1'>…</div>
<div id='main-content'>…</div>
<div id='sidebar-2'>…</div>

This works pretty easily and well with fixed-width layouts because each column has a pre-defined width. However with fluid width there are significant problems in this approach. Typically fluid width layouts would mean that the sidebars have pre-defined widths in pixels, but the main-content column takes up the remaining available space. Naturally, when you have the main-content appearing before a sidebar, the challenges become significant.

The fix for this is to use what is referred to as the CSS Holy Grail. Actually the Holy Grail is for a fluid-width central column and fixed width sidebars, but the markup and CSS for it can be extended to fixed width layouts as well. Using this approach you will really have just one markup for all layouts:

<div id='main-content'>…</div>
<div id='sidebar-1'>…</div>
<div id='sidebar-2'>…</div>

You can then use the CSS properties float, margin-left, margin-right, left and right to control where you want to show what. This approach is recommended by experts because:

  1. You can change your layout, but your content will always remain the same. So depending on your layout your CSS changes, not your HTML.
  2. This has the added benefit of being SEO-friendly, because your main content is closer to the beginning of your document. Particularly in cases where you have a long sidebar, this is a great benefit.

Porting this approach to a fixed-width setting, however was a huge challenge. Just think about it – I had to test all the following configurations for the changed markup:

  1. General layout:
    1. No sidebars
    2. Single left sidebar
    3. Single right sidebar
    4. Single left, single right sidebars
    5. Double left sidebars
    6. Double right sidebars
  2. Page templates for each of the 6 configurations above
  3. In each of the configurations above I had to factor in situations where you would have tabbed widgets, wide sidebars etc.

All in all this amounts to more than 50 different configurations. To add to the complexity, it would have been a great world if Internet Explorer was well-behaved. Instead, for each of the 50+ configurations above, I had to tear my hair out figuring out what works for IE6.

Anyway, this part of the challenge has been overcome. I am working on now putting in fluid width components into the layout. This has its own set of challenges. I had never imagined how easy fixed width has been so far. In changing the code I am now realizing how ingrained the fixed widths are into different elements of the layout. I had a lot of widths running off the main-content column’s width. Again, our favorite IE6 and Microsoft’s proprietary “expressions” are causing me a lot of grief.

Stay tuned – I will hopefully have the new release out very soon.

Oct 112010
 
Opinion

This is the longest I have gone between releases of Suffusion and unfortunately the current release is significantly more complex than the previous ones, hence version 3.6.7 is still a few weeks away from release.

A general fact of any software development cycle is that the more complex the software the longer the development cycle. As things stand today Suffusion is quite complex under the hood. As a result when I try to make a foundational change to the theme, it is a very very arduous exercise. Such changes were much easier to make when the theme was simpler. That is the difference between foundational changes and add-on changes: add-on changes are still easy to do given the theme’s modular structuring, which is why I can add new sidebars etc without breaking a sweat (actually adding sidebars is not that easy, but it still is much easier than what I am doing right now). There are two major changes I am working on at present:

  1. A revamped approach to navigation menus – I was never happy with the way WP handled its functions wp_list_pages etc. I felt that their concepts of “include” and “exclude” were slightly messy and I tried to build a fool-proof system for building menus myself. The net result:
    1. I was successful because I achieved what I had set out to do. Including and excluding items worked as advertised.
    2. I ended up introducing some rather undesirable inefficiencies in the code. The menu-bar code worked well, but to work the way I had envisioned it required to do a lot more queries in the back-end system. For users who had a large number of pages etc, the menus generated at least 100 extra database queries.
    3. Some plugins refused to cooperate with the menu code.
    4. Some features like highlighting the correct page etc were notoriously hard to implement.

    So in this release I decided to fall back on WP’s standard functions instead of my enhanced ones. The result is that menus will not work the way I think they should (which shouldn’t really concern you – I am but one individual), but they will work the way WP thinks they should.
    The change is complex because it required me to change all my menu code, test for pages, categories, links and WP 3.0 menus, fix all style-related problems and what not. Luckily though, this is a piece that I have finished implementing.

  2. An option for fluid width – This is a more cataclysmic change. It involves revamping the entire HTML markup and a humongous amount of implementation and testing. This piece is taking a lot of time to finish implementing, let alone get into full-blown testing.

Adding to the implementation complexity are some major changes on the personal front for me, like an upcoming move from the US to Canada and you can see why this release has been taking time.

The light at the end of the tunnel, though, is that once this release is done, you can do pretty much anything with the theme layout. At that point I can focus on the funky features I had promised in the birthday post of Suffusion.

Sep 272010
 
Announcement

Over the past several weeks I have been finding it very difficult to provide support for Suffusion. It is becoming increasingly difficult for me to keep up with my day job, theme development, support and most importantly, my life.

With immediate effect I am formally announcing a reduction in the support I provide for the theme. For folks familiar with the forums, there are 3 categories where you can post topics at present: Bug Reports, Support Requests and Translations. From now on, I will only respond to questions where I believe my explicit inputs are required, like a genuine bug report, or some specific support topics.

All questions of the following sort will be generally ignored by me (others might choose to offer solutions, though, and I might occasionally respond to such queries):

  1. How to integrate plugin X with the theme (which file to edit etc.).
  2. Most questions regarding why your layout is broken. I say “most” because there are times when the layout being broken is truly because of a bug, but in 90% of the cases it is due to a user putting in improper HTML.
  3. Any question on adding support for a feature will be ignored. For example, allowing Flash-based headers, ability to load images through the theme options etc.
  4. Questions asking “What will happen if I upgrade the theme? Will I lose my changes?” This question has been answered literally hundreds of times at several places.
  5. Sending me a PM asking for a solution will be ignored. And sending me an email asking for a solution will be ignored too. The forum exists so that people can share information, so sending me a PM or email defeats the purpose of the forum. As things stand today I anyway redirect users to post on the forum if they send me a PM or email, so it is not like you will lose out on any support by this official announcement.

The forum has had several thousand posts in the last one year and a lot of questions have been answered there. But what had been originally set up as a means to genuinely help people out has now become a free-for-all, with a lot of people rushing in to cut corners on development costs by piling on the free support offered here. I am finally taking a stand here – if you need a complex requirement for your site, please hire a developer and get him/her to customize the theme for you.

What you can do to speed up things on your side are the following:

  1. I encourage searching the forum and finding things out for yourself. As mentioned, several thousand posts exist in the forum and a very high likelihood exists that something has been answered.
  2. The software is released as open-source for a reason: so that you can read and modify source code if you really need to do something not offered by the theme.
  3. Without a trace of hubris I will state that the theme is extremely customizable, more than several premium themes. In addition, for people happy about writing code it offers you full support for child themes. Both of these combined let you customize the theme as per your will. Make use of these facts – they will make life a lot easier for you.

At this point I would like to extend my deepest gratitude to Connie, Dark_Fox28, Colin and other folks who have been tirelessly volunteering with support issues. If I do happen to meet any of you, lunch/dinner is on me.

I will continue to publish tutorials every now and then on how to maximize your output with Suffusion, and I will continue to put out new releases (albeit at a much slower pace), but please don’t expect anything more than that from me. It is quite depressing to receive 60+ support requests when you are on vacation for 2 days, when you know that you are already handing out software for free that would have taken people thousands of dollars to develop.

Sep 102010
 

Version 3.6.6 of Suffusion was approved today. Here are the major changes in this version:

  1. New Features
    1. Finally a very frequently demanded feature has made its way into the theme. Visit Visual Effects → Theme Skinning. Guess what? You can now skin the Navigation Bars! The navigation bars are way too complex to handle purely by CSS, hence there is a small chance I might have missed something. If so, please report it on the Support Forum.
    2. A few new filters have been added. See point #3 in the previous post: there are new filters for suffusion_filter_template_prefixes and suffusion_filter_template_sidebars. In addition there is a new filter for suffusion_set_title. This will help you control the title on specific pages of your site. For example look at my personal site. The page title is “Eloi and Morlocks” for most pages, yet the home page says “Sayontan Sinha’s home page”.
    3. There is a new template for building an HTML sitemap of your site. There are a lot of configuration options available, which you can check out from Templates → Sitemap.
    4. You can now change the order of entities on your Magazine template. Take a look at Templates → Magazine to see how. I will introduce an ability to order things within excerpts etc in a later release.
    5. You can also position the footer better now – either inside the wrapper or outside. See Visual Effects → Footer Customization for options.
    6. The “Author Information” section (Blog Features → User Profiles) was either visible for both, pages and posts, or invisible for both. I have added the capability to show it for either pages or for posts.
    7. I have also added extra security checks in the back-end by putting in check_admin_referer and check_ajax_referer calls to validate nonce values on options pages. This doesn’t impact users directly, but it adds an extra security layer.
    8. There is a new translation for Traditional Chinese (zh_TW). Thanks to Sh2153!
  2. Bug Fixes
    1. There was a problem with the auto-generated CSS file not being accessible in Multi-site installations or when zipping was switched off. I have fixed this.
    2. There was a problem with the “transparency” feature in Visual Effects → Theme Skinning. Earlier setting a transparency value would make all the included elements translucent. This was because I was using the CSS opacity attribute. I have switched the code to use RGBA instead of opacity and it at least works as expected for compliant browsers (Firefox, Chrome, Opera, Safari). I did try to fix it for IE using filters, but I couldn’t get it to work. I might introduce a hack for IE later. In any case, the functionality was broken in IE earlier as well, so you are not losing out on anything.
  3. Changes
    1. Users will probably love this. The buttons on the options page are not at the bottom any more! And they are not at the top either! After a good bit of thinking I figured out a really smart way to position the buttons in a place that was always accessible, and didn’t require me to change much code. I present to you the new-look buttons:

      save-options

      You can drag the button window to any other place on your screen, and it always floats in position. So even if you scroll up or down you will see the buttons. I do plan to shorten the lengthy options pages in a release soon. It has been on my agenda for a while now.

    2. Given the number of widget areas and their customization options, I pulled up the Sidebars and Widget Areas option and the Widget Styles option and created a new main menu option called Sidebars and Widgets.
    3. The German translations have been updated for version 3.6.5.

Hope you enjoy this release.