Case Study: LightSpeed at Home coding the WordPress Publisher Theme

We have recently completed a project for Media 24 using WooThemes Canvas theme that showcases our best coding work to date.

LightSpeed was approached by Media 24 to develop four magazines sites for their Country Living Magazines division (this division has since been restructured) which included Home Magazine, Ideas Magazine and their Afrikaans counterparts, Tuis and Idees.

Using Canvas to develop our Publisher Theme

At LightSpeed we’ve made no secret about how much we love the WooThemes Canvas Theme. Canvas has the most extensive functionality of all the WooThemes and is well suited to magazine sites – which made it the perfect platform for building on and adding additional functionality to meet our design goals.

Instead of developing individual themes for each site which would have resulted in unnecessary duplication of functionality, we decided to create a theme that could be applied to a number of sites, but with the flexibility to be modified and customised according to each site’s specific requirements – Our WordPress Publisher Theme was born.

The LightSpeed WordPress Publisher Theme

The Publisher Theme is essentially our magazine publishing framework for building magazine style websites. It is a Canvas child theme aimed at websites for magazines and publishing houses.

We used the Canvas Magazine template and extended the functionality with the use of theme options and the addition of widgetized areas which can be added or removed through the backend.

Our Publisher theme for Canvas includes the following features:

• BuddyPress social network functionality
• Events and recipes (including calendars, sliders etc.)
• The homepage includes widgetized areas for displaying Recent Articles and customizing articles displayed
• The theme includes extensive theme options – allowing our Content Managers to easily setup and customize sites quickly through the backend without requiring extra development
• The basic theme features generic, vanilla styling with additional stylesheets for adding colours and backgrounds to individual sites (these stylesheets can be activated with a stylesheet-switcher – allowing us to customise the theme to suit different sites)
• Use of the WPML (WordPress Multi Language plugin) and extensive use of Translatable strings throughout the theme allow us to translate the theme into different languages. Tuis magazine is the Afrikaans equivalent of Home magazine.
• The header includes Search, Social Media links and Subscribe functionality which can be customized extensively with theme options in the backend
• The footer includes a Subscribe section with options to upload images and customize content in the backend (using theme options)
• In addition, there is a section for Related weblinks – which link to related sites (these make use of the WordPress menu system and theme options for easy setup and customization)
• Latest issues have their own custom post type, page templates and widgets for easy management
• Archives of posts include a featured section for the first post displayed – This helps to draw users into the content
• Individual posts have been customized to include related posts
• Our Ad Manager Plugin further extends the theme – allowing Ads to be added and updated quickly and efficiently

LightSpeed Modules

In the course of developing our Publisher theme, we had to develop certain modules to meet the requirements of our client. This development was mostly undertaken by Warwick Booth and Iain Coughtrie, and they did an excellent job.

Modules:

• LightSpeed Ad module using CPTs for adtags (Warwick)
• LightSpeed Events module for Canvas (Warwick and Iain)
• LightSpeed Recipes module for Canvas (Iain)
• LightSpeed Q&A module for Canvas (Iain)

Ideas Recipes Module

Homemag Events Module

When initially planning each module, we firstly decided which features we would like to see in each respective module, and then organised that into phases – What we could realistically expect to achieve in the limited time we had available.

Within a few months Iain had built a relatively stable Events module. He learned a lot during the process, and was able to apply that knowledge to developing the Recipes module. Whilst developing the modules for the Home/Ideas sites, they were also incorporated into other sites, (Shape and Runner’s World) which had slightly different specs. Improvements and changes in a module on one site would be incorporated into the other themes employing these modules. Through this process Iain was able to continuously build upon the modules and eliminate bugs across all sites using them.

The biggest challenge for the Q&A module was successfully porting a complete plugin into the Publisher theme. Once the code was in and functioning properly, he didn’t deviate too much from the original functionality, but it made layout and styling customisation a lot easier.

Module Features

Events:

• Post Type with custom taxonomies and custom fields.
• Landing page with slider (for featured events)
• Upcoming / Past Events
• Featured Events
• Single Event posts
• Event Search
• Events Calendar (linking to single event posts)
• Frontend event posting
• Ratings

Recipes:

• Post Type with custom taxonomies and custom fields.
• Landing page with slider (For featured Recipes)
• Theme options (that define via Dropdown menus which Recipe Types, Methods and Cuisines to feature on the landing page)
• Featured Recipes
• Single Recipe posts
• Recipe Search
• Frontend Recipe Posting
• Ratings

Q&A:

• Ported the WPMU Q&A plugin into the Publisher theme, and made some slight modifications
• Includes separate post types for Questions and Answers
• Categories and Tags
• Users profiles
• Voting and ratings for Questions and Answers
• Reputation Points
• Frontend Q&A posting
• Q&A search

Ad Module:

• Custom post type, with each Ad as a new ‘Ad post’
• Assignable ‘Zone’, which defines where the ad will display on the page
• Assignable conditions per post, for selecting which posts, pages, categories etc will display each ad.

Looking towards the future we have decided to convert these modules into Plugins. Converting the various modules into plugins will result in a slicker, compressed theme, make it easier to move the functionality across themes and enable us to keep the code of the plugins current without complication.

WPtouch Pro and Canvas brings the Mobile Experience Home

We developed the Publisher-Mobile WPtouch theme for Tuis/Home and Ideas/Idees. This mobile theme contains Canvas within it, allowing us to use all standard WooThemes Canvas theme functionality (like hooks, functions and shortcodes). This gives us a lot more freedom from a development perspective, and ensures that content and templates that are reliant on the Canvas infrastructure will work without issues on the mobile version of a site.

Responsive Design

Our Publisher-Mobile theme is partly responsive. The standard WooThemes slider has been switched out for a responsive JavaScript slider, that re-sizes slider images (without losing proportion) based on the size of the screen on which you’re viewing the site. The size of images and divs is generally defined using percentages, meaning that objects and images expand or shrink depending on the interface.

To Illustrate, here is the Tuis site viewed on Safari using the Iphone User agent:

The Publisher Mobile Theme is partly Responsive

WordPress MultiSite

We used two WordPress Multisite installs for the different magazines, Tuis/Home and then Ideas/Idees.

WPML – The WordPress MultiLingual Plugin

We used WPML (The WordPress MultiLingual Plugin) to translate the sites to Afrikaans. WPML allows a non-developer to find and translate language strings. It has many languages supported by default, but the software can be used as a tool for integrating uncommon languages like Afrikaans. Once translation is complete (+- 6000 strings in the case of Tuis/Home and Idees/Ideas), the language file can be downloaded and re-used.

WPML allows you to search the theme and plugins for language strings that can be translated, which can then be downloaded as a .po file for use with other sites. Unfortunately we did not get this functionality to work properly, and we were unable to import the .po file successfully to other sites.

One of the lessons we learned on this project is that it is best to translate before customizing the theme and plugin code. We found that custom code needs to be incorporated in a particular way in order to be translatable with WPML.

WordPress Plugins used

The following WordPress Plugins were used in the development of the Tuis/Home and Ideas/Idees sites;

• BuddyPress (and related plugins such as oEmbed for BuddyPress)
• bbPress (and related plugins such as GD bbPress Attachments)
• Gravity Forms 1.6 RC2
• Jetpack
• WPtouch Pro
• Yoast WordPress SEO

Conclusion

The Tuis/Home/Idees/Ideas project allowed us to push Canvas farther than ever before. Our Publisher Theme now forms the basis of all our Magazine style projects and with the inevitable creation of our various plugins the theme will be lightweight and allow for easy customization in future projects. We’re very proud of the Publisher Theme and it has proven it’s worth in saving valuable time and resources.

CONTACT US today for a quote on a solution for your Magazine or online Publishing needs