The US Round-table on Sustainable Beef asked me to develop a site for their “Sustainability Framework.” Basically, ther were in the process of developing a large document that would be used by stakeholders in numerous beef-production related industries for sustainable environmental, health, and business practices.

The interesting challenge to the project lay in the fact that the USRSB wanted to capture comments on the working document using the website. So, it occurred to me quite obviously that I could use WordPress, with each section of the text as a post, and users could leave comments. Simple!

However, USRSB suggested that it would be much better if we could have user’s comment on specific line sin text, sort of like the kind of comments you can leave in a Word doc. Fortunately, there is a plugin for that! I installed “Inline Comments” and we were off.

The Shim

Just one more wrinkle: USRSB wanted to hide/expand content in accordion-like sections. Fine. Except that “Inline Comments uses the position of “p”elements relative to the browser  window to create coordinates for the  comment interface. A little comment icon pops up when you over over a sentence and the location for that icon is calculated when the window loads. So, if you have hidden content (i.e. in a collapsed accordion) the locations to correspond to those lines won’t be calculated.

The solution? Resize the window every time the user clicks. Given that Inline comments will calculate the position for the comment icons when the window resizes, a little jquery shim will call resize whenever the user collapses or expands and accordion:

( function($) {

$(“body”).click(function ( ) {

} ) ( jQuery );

Child Pages for Different Sections

Each industry sector has six different report sections. So,for the Cow/Calf sector, there is Air and Gases, Water, Safety etc. What I did was to create child pages for each sector with the appropriate report section titles. Then is used a secondary navigation that would display an icon for the child pages when the user is on the page for the industry sector:

The template is written such that when a sector page is chosen (parent) a div with the secondary navigation (icons) is populated with a short loop that finds all the child pages of that parent and outputs their featured images – which are the icons.

The site was produced using my favorite WordPress theme framework, Beans. I use it for almost everything, as its incredibly flexible and lightweight. I think this is a good example of what can be done with Beans for a site that doesn’t have a typical menu structure, but instead has some vertical menus and a bit of nesting.

I have worked with the USRSB on a few projects now and I’m always happy to do so.